Какой формат изображения выбрать?

Вопрос, который всё решает

Состоит ли картинка из плавных тонов или из однотонных областей и резких границ?

Фотография — это плавные тона: миллионы едва различимых цветов, ни одного пикселя, в точности похожего на соседний, и никаких жёстких границ, кроме краёв предметов. Скриншот, логотип, диаграмма, схема или штриховой рисунок — противоположность: большие области одного цвета, встречающиеся на идеально резких границах.

Каждый формат изображений создан для одного из этих случаев и плохо справляется с другим. Форматы с потерями — JPEG, а также WebP и AVIF в режиме с потерями — выбрасывают детали, которые глаз плохо замечает: на плавных тонах это работает великолепно, а вокруг каждой резкой границы появляются заметные ореолы. Форматы без потерь — PNG, а также WebP и AVIF в режиме без потерь — сжимают, находя повторы: на однотонных цветах это работает великолепно, а на фотографическом шуме почти никак. Неправильный выбор делает файл либо некрасивым, либо огромным, и обычно замечают только что-то одно.

Короткие ответы

Фотография для человека, для письма или для старой системы: JPG с качеством около 85. Читается везде, весит мало, а потери на такой настройке незаметны.

Скриншот, логотип, диаграмма или схема: PNG. Все края остаются идеально резкими, а однотонные области сжимаются почти в ничто. Если есть прозрачность, из двух классических форматов её умеет хранить только PNG.

Всё, что идёт на веб-страницу, которой вы управляете: WebP или AVIF, если можете позволить себе время на кодирование. Оба справляются с задачами JPG и PNG лучше: у WebP есть режимы с потерями и без, и прозрачность он поддерживает в обоих, а AVIF хранит фотографию примерно вдвое компактнее равноценного JPEG.

Логотип или иконка: SVG, если он у вас есть, — он остаётся чётким в любом размере и обычно меньше любой пиксельной версии. Растрируйте его только для тех мест, где векторы не читаются: favicon, превью для соцсетей, письма и магазины приложений.

Чего не умеет каждый формат

Ограничения полезнее списков возможностей: именно на них люди и попадаются.

В JPG нет прозрачности. Совсем, и никогда не будет. При конвертации PNG с прозрачным фоном в JPG фон заливается сплошным цветом — вот почему логотип, сохранённый в JPG, приходит в белом прямоугольнике. К тому же JPG теряет качество при каждом сохранении, так что если раз за разом редактировать и пересохранять один и тот же JPG, он с каждым проходом понемногу портится.

PNG ужасен для фотографий. Не ошибочен — он без потерь и точен, — но огромен, потому что фотографический шум сводит на нет предсказание, на котором построено его сжатие. PNG с фотографией обычно в десять раз больше JPEG, который никто не смог бы от него отличить.

У WebP жёсткий потолок — 16 383 пикселя по любой стороне: для фотографий это щедро, а для панорамы, скриншота длинной веб-страницы целиком или отсканированной карты — тесно.

AVIF медленно кодируется. Секунды на одну большую фотографию: это стоп-кадр видеосжатия, и размер выигрывается именно за счёт перебора. Декодирование мгновенное — правильный компромисс для того, что кодируют один раз, а смотрят часто.

Где на самом деле проходит граница совместимости

Здесь советы обычно устарели на годы — причём в обе стороны. Все современные браузеры читают WebP и AVIF, и уже много лет, так что для сайта довод о совместимости против них больше не работает. А если отдавать AVIF с запасным JPEG через элемент picture, исчезает и последнее опасение.

За пределами браузера картина другая, и здесь люди ошибаются уже в обратную сторону. Старые почтовые клиенты, многие программы для просмотра изображений на компьютере, масса корпоративного ПО и большинство процессов печати всё ещё ненадёжно читают WebP и AVIF. Так что правило зависит от места назначения, а не от года: новые форматы — для веб-страницы, которой вы управляете, JPG или PNG — для файла, который вы передаёте человеку или системе.

Конвертация не исправляет повреждения

Самое частое заблуждение о форматах изображений стоит сформулировать прямо: конвертация файла с потерями в формат без потерь ничего не восстанавливает. Конвертация JPG в PNG идеально сохраняет артефакты JPEG — блочность, ореолы вокруг текста, размытый цвет на насыщенных краях, — потому что к этому моменту они уже просто значения пикселей и неотличимы от содержимого картинки. PNG получается больше и содержит ровно те же видимые повреждения.

Но в нужный момент это всё равно имеет смысл. Конвертация в PNG перед редактированием означает, что каждое следующее сохранение ничего не стоит, тогда как редактирование и пересохранение JPG каждый раз его ухудшает. Делайте это в начале работы, а не после четырёх сохранений.

Та же логика действует и в обратную сторону. При кодировании в AVIF или WebP из JPEG новый кодировщик наследует артефакты старого и тратит реальные биты на их сохранение — поэтому файл, закодированный один раз из оригинала, одновременно меньше и лучше, чем закодированный дважды. Всегда начинайте с лучшей версии, которая у вас есть.