1. Главная
2. Форматы изображений

Сравнение форматов изображений: JPEG, PNG, WebP и AVIF

Четыре формата покрывают более 99% изображений в современном вебе. Они делают очень разные компромиссы между сжатием, прозрачностью, анимацией и поддержкой браузерами. Вот практическое руководство по выбору правильного.

Сравнение рядом

Сначала краткий обзор, полный разбор каждого формата ниже.

JPEG — универсальный базовый формат

Как он работает

JPEG (Joint Photographic Experts Group) был стандартизирован в 1992 году и является старейшим из четырёх форматов. Использует lossy-дискретное косинусное преобразование на блоках 8×8 пикселей, за которым следует квантование и энтропийное кодирование. Качество управляется одним числом от 1 до 100. Современные кодеры вроде MozJPEG выжимают из формата на 10–20% больше без изменения битстрима, поэтому любой JPEG-декодер их читает.

Лучше всего для

Фотографического контента с плавными тональными градиентами и большим количеством деталей — портреты, пейзажи, предметная фотосъёмка, hero-изображения.

Плюсы

• Поддерживается буквально каждым просмотрщиком изображений.
• Аппаратно-ускоренное декодирование почти везде.
• Зрелая экосистема оптимизаторов (MozJPEG, jpegli).

Минусы

• Нет альфа-канала — фоны нужно сводить.
• Блочные артефакты на тексте, линейной графике и резких границах.
• Только 8 бит на канал.

PNG — lossless и прозрачный

Как он работает

PNG (Portable Network Graphics) был создан в середине 1990-х как свободная, не обременённая патентами замена GIF. Он строго lossless: DEFLATE-сжатие поверх построчной фильтрации пикселей. Оптимизаторы вроде oxipng (Rust-порт optipng) перебирают все комбинации фильтров/сжатия, чтобы найти минимальное представление, не меняя ни одного пикселя.

Лучше всего для

UI-графики, иконок, скриншотов, диаграмм, линейной графики, логотипов с плоскими цветами и всего, что требует настоящего альфа-канала.

Плюсы

• Lossless — пиксели переживают круговой путь без изменений.
• Полная 8-битная альфа, до 16 бит на канал.
• Универсальная поддержка.

Минусы

• Большой размер на фотографиях — часто в разы больше JPEG/WebP/AVIF.
• Нет анимации в оригинальной спецификации (APNG — более позднее расширение).

WebP — веб-формат от Google

Как он работает

WebP выпущен Google в 2010 году на базе видеокодека VP8 и позже расширен отдельным lossless-режимом. Поддерживает и lossy, и lossless в одном контейнере, с опциональными альфой и анимацией. В lossy-режиме обычно обгоняет JPEG на 25–35% при том же качестве. В lossless-режиме обгоняет PNG на 20–30%.

Лучше всего для

Универсальной веб-доставки, когда AVIF ещё не безопасен — фото, UI-спрайты с прозрачностью, замены анимированных GIF и как фолбэк-слой под AVIF.

Плюсы

• Один формат покрывает фото, графику, альфу и анимацию.
• Значительно меньше JPEG и PNG при сопоставимом качестве.
• Широкая поддержка: все современные браузеры с 2020 года.

Минусы

• 8 бит на канал — нет HDR.
• Декодирование медленнее JPEG на некоторых слабых устройствах.

AVIF — текущий лидер по сжатию

Как он работает

AVIF (AV1 Image File Format) — это профиль для неподвижных изображений видеокодека AV1, выпущенный в 2019 году Альянсом Open Media. Поддерживает до 12-битного цвета, полную альфу, HDR, широкую гамму и синтез зерна плёнки. Референсный энкодер (aom-av1, используемый libavif) медленный, но выжимает лучшее сжатие, доступное сегодня для реальных фотографий.

Лучше всего для

Hero-изображений, фотогалерей и везде, где пропускная способность важнее CPU-времени. Отлично работает как верхний уровень в элементе <picture>.

Плюсы

• Лучшее в классе сжатие — обычно на 40–60% меньше JPEG.
• Поддерживает альфу, анимацию, HDR, широкую гамму и 10/12-бит глубину.
• Royalty-free и открытый.

Минусы

• Медленное кодирование — планируйте на этап сборки или асинхронное.
• Safari добавил поддержку только в версии 16 (2022).
• Хуже подходит для синтетической графики, чем WebP lossless или PNG.

Какой формат использовать?

• Фотографии, полноэкранные hero-изображения: AVIF как основной формат, WebP и JPEG как фолбэки через <picture>.
• UI-графика с прозрачностью (иконки, логотипы): PNG для совместимости со старым, WebP lossless для меньшего веса.
• Линейная графика, скриншоты, диаграммы: PNG (или WebP lossless) — JPEG/AVIF-артефакты беспощадны к резким границам.
• Замена анимированных GIF: WebP или AVIF — оба радикально меньше и поддерживают настоящую альфу.
• Один формат для любого браузера сегодня: JPEG для фото, PNG для графики. Не самый маленький вариант, зато нулевой совместимостный долг.

На практике не обязательно выбирать один. Отдавайте AVIF первым, WebP вторым и JPEG или PNG последним внутри элемента <picture> — каждый браузер получит самую маленькую версию, которую может декодировать.