JPG, PNG, WebP или AVIF

Четыре формата в сравнении

Чем хорош каждый формат

JPG хранит мелкие детали блоками 8 × 8 пикселей с пониженной точностью, а цвет, как правило, — с меньшим разрешением, чем яркость. На фотографиях это почти незаметно, а вокруг текста и резких краёв появляются ореолы. Каждый раз, когда JPG редактируют и сохраняют заново, он перекодируется и обычно теряет ещё немного деталей. Что означает число качества, объясняется в руководстве «Как работают настройки сжатия изображений».

PNG сжимает без потерь, отыскивая повторяющиеся и предсказуемые фрагменты, поэтому скриншоты, диаграммы и логотипы получаются компактными, а фотографии — нет. В 12-мегапиксельной фотографии 36 миллионов байт данных о цвете (4000 × 3000 пикселей × 3 байта); шум камеры почти не повторяется, поэтому PNG такой фотографии обычно в несколько раз больше хорошего JPG.

У WebP есть режим с потерями и режим без потерь, и оба поддерживают прозрачность. WebP с потерями хранит цвет с вдвое меньшим разрешением по ширине и по высоте, поэтому тонкие цветные линии и красный текст могут выглядеть размытыми. Ни одна сторона изображения WebP не может превышать 16 383 пикселя, так что очень длинные скриншоты в этот формат не сохранить; формат JPG допускает до 65 535 пикселей.

AVIF основан на видеокодеке AV1. Для фотографий он часто оказывается самым эффективным из четырёх форматов, особенно при невысоком качестве, и может хранить 10- или 12-битный цвет и HDR. Кодирование обычно занимает больше времени, а поддержка за пределами браузеров отстаёт от WebP.

Пример с замерами: один скриншот, шесть файлов

Мы нарисовали скриншот дашборда размером 1280 × 800 (однотонные заливки, текст, столбчатая диаграмма) и сохранили его с помощью Python Pillow 12.3 (libjpeg-turbo 3.1, libwebp 1.6, libavif 1.4) с качеством 92 там, где качество задаётся, — это то же число, что и фиксированное значение 0,92, которое конвертер LeedyBox передаёт браузеру. WebP без потерь сохранялся с самой медленной и самой сильной настройкой сжатия. Это всего одно синтетическое изображение: браузерные кодировщики используют другие настройки и дают другие цифры, а фотографии ведут себя иначе. 1 КБ = 1024 байта.

Для такой графики с однотонными заливками JPG оказался худшим вариантом: файл получился более чем вдвое больше и уже не совпадает с оригиналом попиксельно. WebP без потерь сохранил каждый пиксель и дал самый маленький файл, а WebP с потерями почти ничего не сэкономил. Конвертация JPG обратно в PNG ничего не исправила: PNG пришлось в точности хранить артефакты JPG, и файл вырос в 4,5 раза по сравнению с оригиналом.

Логотип 512 × 512 на прозрачном фоне дал такие результаты: PNG — 31,6 КБ, WebP с потерями — 18,4 КБ с сохранённой прозрачностью, AVIF — 16,6 КБ, WebP без потерь — 12,7 КБ, а JPG — 25,2 КБ, причём вместо прозрачности появился белый квадрат. И здесь самым маленьким оказался файл WebP без потерь, который к тому же сохранил каждый пиксель.

Что конвертация может, а чего не может

• Она не восстанавливает детали. JPG, пересохранённый в PNG, остаётся с теми же артефактами.
• Из формата с потерями в формат с потерями — новые потери. При конвертации JPG в WebP или AVIF старые артефакты кодируются заново, поэтому начинайте с лучшего оригинала, какой у вас есть.
• Для прозрачности нужен формат, который её хранит. В JPG нет альфа-канала, поэтому конвертер LeedyBox при сохранении в JPG или BMP заливает прозрачные области белым, а мягкие края смешиваются с этим белым. Логотипы и вырезанные объекты оставляйте в PNG или WebP.
• Размеры в пикселях часто важнее. Фотография 4000 × 3000, показанная в размере 1200 × 900, несёт 12 миллионов пикселей там, где нужно 1,08 миллиона, — примерно в 11 раз больше. Даже экрану с удвоенной плотностью пикселей нужно лишь 2400 × 1800, то есть 4,32 миллиона. См. руководство «Изменение размера изображений: пиксели, пропорции и DPI».

Конвертация в конвертере изображений LeedyBox

1. Откройте конвертер изображений и нажмите «Выберите файлы или перетащите их сюда» либо перетащите изображения в эту область. Принимаются PNG, JPG, WebP, BMP, GIF и AVIF, если ваш браузер может открыть файл.
2. Каждый файл появляется в списке с размером в пикселях и меню формата, в котором изначально выбран JPG; также доступны PNG, WebP, BMP, AVIF и ICO. Меняйте формат для каждого файла отдельно или задайте его для всех файлов сразу в меню «Установить все форматы как...» рядом с надписью «Пакетные настройки:». Для всего, что содержит прозрачность, выбирайте PNG, WebP или AVIF.
3. Нажмите «Конвертировать и скачать». Одно изображение скачивается под своим именем с добавлением «_converted», например holiday_converted.webp; несколько изображений приходят в архиве leedybox_converted_images.zip.

Конвертер сохраняет размеры в пикселях; исключение составляет ICO: такое изображение при необходимости уменьшается, чтобы уместиться в 256 × 256 пикселей. Для JPG, WebP и AVIF конвертер запрашивает у браузера качество 0,92 (по шкале от 0 до 1), а настройки качества в нём нет. Chrome и Edge при этом значении создают WebP с потерями; кодировщики других браузеров могут вести себя иначе. JPG и BMP получают белый фон; BMP сохраняется без сжатия, 24 бита на пиксель, поэтому фотография 6000 × 4000 превращается в файл размером 72 000 054 байта. Многие браузеры не умеют создавать AVIF; конвертер проверяет это при открытии страницы и, если проверка не пройдена, отключает этот вариант и подписывает его «AVIF (не поддерживается этим браузером)».

Конвертация выполняется в вашем браузере, и для неё изображения не отправляются в LeedyBox. Каждая картинка перерисовывается, поэтому EXIF-данные, GPS-координаты и другие метаданные не копируются. Чтобы самостоятельно выбрать качество и сравнить результат до и после, воспользуйтесь инструментом «Сжатие изображений» (JPG, WebP или PNG, ползунок качества со значением 75 по умолчанию или целевой размер файла); чтобы уменьшить размеры — инструментом «Изменение размера изображений».

Какой формат для какой задачи

Об изображениях для веб-страниц см. также руководство «Как выбрать формат изображений для сайта».

Типичные проблемы и их решение

• Прозрачный фон стал белым. Файл был сохранён в JPG (он выбран изначально) или в BMP. Конвертируйте его заново в PNG, WebP или AVIF.
• Файл стал больше. Это обычное дело для фотографий и JPG, сохранённых в PNG, а также для BMP, который хранится без сжатия. Для фотографий используйте JPG или WebP либо оставьте оригинал.
• AVIF нельзя выбрать. Ваш браузер не умеет создавать AVIF. Выберите WebP или попробуйте другой браузер.
• В ZIP-архиве меньше файлов, чем вы добавили. При конвертации в WebP и logo.png, и logo.jpg становятся logo_converted.webp, и файл, обработанный позже, заменяет предыдущий. Сначала переименуйте один из них.
• Ничего не скачалось. Файл не конвертируется, если браузер не может создать выбранный формат: некоторые браузеры не умеют создавать WebP, а формат WebP не допускает изображений шире или выше 16 383 пикселей. Кроме того, очень большие изображения могут превышать размер холста (canvas), с которым способен работать браузер. При пакетной конвертации один такой файл останавливает конвертер ещё до создания ZIP-архива. Смените формат этого файла или удалите его из списка.
• Анимация превратилась в статичное изображение. Сохраняется только один кадр, обычно первый.

Что проверить после конвертации

• Посмотрите на результат в натуральную величину: на текст, края, лица и градиенты.
• Сравните размеры файлов; если новый файл не меньше, оставьте оригинал.
• Проверьте прозрачные изображения на светлом и на тёмном фоне.
• Проверьте файл там, где он будет использоваться: некоторые почтовые программы и формы загрузки не принимают WebP или AVIF.

Часто задаваемые вопросы