JPEG vs PNG vs WebP: какой формат изображений действительно стоит использовать

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

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

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

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

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

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

WebP был создан специально для того, чтобы превзойти и JPEG, и PNG на их собственном поле, используя техники сжатия, разработанные уже после того, как оба этих старых формата были спроектированы. В режиме с потерями WebP обычно даёт файл на 25–35% меньше, чем JPEG сопоставимого визуального качества на той же фотографии, потому что его алгоритм — производный от исследований сжатия видеокодеков — эффективнее моделирует избыточность между соседними блоками изображения, чем это делает более старый подход JPEG. В режиме без потерь WebP обычно превосходит PNG на сопоставимую величину на том же скриншоте или логотипе, по той же причине: более новое и продвинутое обнаружение избыточности находит экономию там, где старый алгоритм её не находил.

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

Для настоящей фотографии, предназначенной для веба — фотографии товара, изображения-заголовка блога, фотогалереи, — WebP в режиме с потерями является лучшим выбором по умолчанию там, где получатель это поддерживает, а JPEG служит резервным вариантом там, где не поддерживает; PNG практически никогда не является правильным выбором для настоящего фотографического контента, поскольку цена в виде размера файла не приносит сколько-нибудь заметного улучшения качества по сравнению с хорошо настроенным форматом с потерями. Для скриншота, логотипа, иконки или чего угодно с однородным цветом, чётким текстом или необходимой прозрачностью правильным выбором будет PNG или WebP без потерь, поскольку JPEG внесёт заметные артефакты именно вокруг тех резких границ, которых в таком контенте предостаточно. Для всего, что предназначено для контекста с жёстким требованием совместимости — почтового клиента, более старой системы контента, конкретного процесса печати, — сохранение более старого, универсально поддерживаемого формата из двух (JPEG для фото, PNG для графики) остаётся безопасным, хоть и не самым эффектным выбором.

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