JPEG, PNG, WebP, AVIF или JXL
Пять форматов — пять разных компромиссов. Этот гид объясняет, как каждый из них на самом деле сжимает, где он ломается и как выбирать без догадок.
В двух словах
Используйте JPEG для фотографий, когда важнее всего максимальная совместимость, WebP — как надёжный современный вариант по умолчанию, AVIF — когда нужен максимально маленький файл, и PNG — всегда, когда на изображении есть резкие края, текст или прозрачность. А JXL — когда нужен современный формат архивного уровня и вы контролируете программу, которая его открывает.
Как сжимает каждый формат
JPEG — универсальная рабочая лошадка
JPEG остаётся форматом по умолчанию для фотографий с 1992 года, и его по-прежнему понимают любые инструменты, браузеры и принтеры. Он сжимает с потерями: изображение разбивается на блоки, преобразуется в частотные данные, а затем отбрасываются высокочастотные детали, к которым глаз наименее чувствителен. Именно поэтому слишком низкое качество даёт характерные блочные артефакты и «звон» вокруг контуров.
Сильные стороны: крошечные файлы для фотографий, универсальная поддержка, быстрое кодирование и декодирование. Слабые стороны: нет прозрачности, плохо с резкими краями и текстом, а при каждом повторном сохранении изображение деградирует. Никогда не пересжимайте JPEG по кругу.
PNG — без потерь, и это его гордость
PNG хранит каждый пиксель точно. Он использует фильтры предсказания вместе с DEFLATE, поэтому хорошо сжимается там, где много повторяющихся областей: однотонная заливка, интерфейсы, скриншоты, схемы, логотипы. Он также поддерживает полноценную альфа-прозрачность, чего JPEG не умеет.
Сильные стороны: попиксельная точность, прозрачность, идеален для текста и штриховой графики. Слабые стороны: фотографии сжимаются ужасно — снимок, сохранённый в PNG, легко оказывается в пять–десять раз больше того же снимка в JPEG. Учтите, что вывод PNG всегда без потерь, поэтому это безопасный выбор, когда потеря качества недопустима.
WebP — прагматичная золотая середина
WebP создан Google как прямая замена JPEG и PNG и делает обе работы: режим с потерями для фотографий и режим без потерь для графики, плюс альфа-прозрачность. На практике WebP с потерями обычно выходит на 25–35 % меньше JPEG при сопоставимом качестве, и его поддерживают все современные браузеры.
Сильные стороны: хорошая экономия при широкой поддержке; прозрачность работает и в режиме с потерями. Слабые стороны: несколько старых или нишевых инструментов всё ещё не открывают его, а WebP без потерь не всегда лучше оптимизированного PNG.
AVIF — самые маленькие файлы
AVIF построен на видеокодеке AV1, и сегодня это самый эффективный из широко используемых форматов. По сравнению с JPEG он обычно даёт файлы заметно меньше при том же визуальном качестве — нередко примерно вдвое, — а также поддерживает прозрачность, широкий цветовой охват и HDR.
Сильные стороны: лучшее сжатие с явным отрывом, современный набор возможностей. Слабые стороны: кодирование медленное (секунды, а не миллисекунды на изображение), и очень старые браузеры его не отобразят. Для пакета изображений это тот формат, где терпение окупается больше всего.
JXL — современный вариант для архива
JPEG XL (JXL) задуман как преемник JPEG. Он поддерживает режимы с потерями и без потерь, полную альфа-прозрачность, широкий цветовой охват, HDR и прогрессивное декодирование. При сопоставимом качестве он обычно даёт файлы меньше, чем JPEG, поэтому подходит для архивирования и конвейеров, где декодер контролируете вы.
Сильные стороны: эффективное сжатие в одном формате с потерями и без, современные возможности, отсутствие патентных отчислений. Слабые стороны: кодирование медленное на высоких уровнях усилия, а поддержка показа в браузерах по-прежнему неравномерна — Chrome и Firefox не показывают файлы JXL по умолчанию, поэтому он пока не может безопасно заменить WebP или AVIF в открытом вебе. tinyimg умеет кодировать и декодировать JXL, но сначала проверьте, чем его будут открывать.
Сравнение бок о бок
| Формат | Сжатие | Прозрачность | Лучше всего для | На что обратить внимание |
|---|---|---|---|---|
| JPEG | С потерями | Нет | Фотографии, максимальная совместимость | Артефакты при низком качестве; деградация при пересохранении |
| PNG | Без потерь | Да | Скриншоты, интерфейсы, логотипы, текст | Очень большой размер для фотографий |
| WebP | Оба режима | Да | Универсальный современный вариант по умолчанию | Изредка нет поддержки в инструментах; без потерь редко лучше PNG |
| AVIF | Оба режима | Да | Самые маленькие файлы, сайты с обилием изображений | Медленное кодирование; нужен свежий браузер |
| JXL | Оба режима | Да | Архивы, фото высокого качества, контролируемые конвейеры | Медленное кодирование; неравномерный показ в браузерах |
Выбор по тому, что это за изображение
- Фотография (люди, пейзажи, товары) — сначала AVIF, если время кодирования не пугает, иначе WebP. К JPEG возвращайтесь лишь тогда, когда его требует следующий инструмент.
- Скриншот или макет интерфейса — PNG или WebP без потерь. Резкие линии толщиной в один пиксель и текст — именно там форматы с потерями размазывают картинку.
- Логотип или иконка с однотонной заливкой — PNG или WebP без потерь; если изначально это была векторная графика, подумайте об SVG.
- Изображение, которому нужна прозрачность — PNG, WebP, AVIF или JXL. JPEG этого просто не умеет.
- Уже сильно оптимизированный файл — не трогайте его. Повторное кодирование оптимизированного файла часто делает его больше.
Практичный ответ для веба: экспортируйте AVIF и WebP, а затем отдавайте их с JPEG-запасным вариантом через <picture>. Новые браузеры получат маленький файл, старые всё равно покажут изображение.
Два правила, которые важнее выбора формата
- Сначала уменьшайте размер, потом сжимайте. Фотография шириной 4000 пикселей в слоте на 800 пикселей тратит куда больше байтов, чем способна сэкономить любая разница между кодеками. Бюджеты размеров разобраны в гиде по веб-производительности.
- Храните оригиналы. Каждое сохранение с потерями необратимо. Сжимайте копии, а сжатые файлы считайте результатом сборки, а не архивом.
Проверьте на своих файлах
Поскольку цифры сильно зависят от конкретных изображений, единственный надёжный ориентир — ваш собственный набор. tinyimg может сжать одну партию сразу в несколько форматов, чтобы вы сравнили размеры бок о бок, — и всё работает локально, так что при экспериментах ничего не загружается.