Кратко

Фотографию отдают в WebP или AVIF, JPEG оставляют запасным вариантом. Графику с резкими краями и прозрачностью — в PNG, а лучше в SVG, если она векторная. В наших измерениях медиана AVIF при равном качестве — 66 КБ против 119 КБ у JPEG, но кодируется он дольше, и ему нужен фолбэк через тег picture.

Спор «что лучше, JPEG или PNG» бессмысленен ровно потому, что это инструменты для разных задач. Формат выбирают по четырём свойствам, и все четыре можно проверить.

Чем форматы вообще отличаются?

Четырьмя вещами: теряет ли формат данные при сжатии, умеет ли прозрачность, умеет ли анимацию и насколько широко его понимают.

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

Сжатие без потерь восстанавливает файл байт в байт. Оно незаменимо для графики с плоскими заливками, но фотография в нём весит в разы больше.

Формат Сжатие Прозрачность
JPEG только с потерями нет
PNG только без потерь да
WebP и так, и так да
AVIF и так, и так да

Прозрачность нужна логотипам, иконкам и вырезанным объектам. Её отсутствие у JPEG — не мелочь: вырезанный предмет придётся класть на однотонный фон и надеяться, что фон страницы не изменится.

Когда JPEG всё ещё правильный выбор?

Когда файл должен открыться где угодно: в старом почтовом клиенте, в CRM десятилетней давности, в типографии. JPEG понимают все, и он остаётся разумным запасным вариантом внутри тега picture.

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

Когда нужен PNG?

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

У PNG есть недооценённый режим — палитра. Изображение с несколькими десятками цветов, сохранённое с палитрой в 64 цвета, весит в разы меньше полноцветного и выглядит так же. Для иконок и простых схем это лучший компромисс, если по какой-то причине нельзя отдать вектор.

Чего PNG не умеет — сжимать фотографию. Тот же кадр в PNG весит на порядок больше, чем в JPEG: в наших измерениях эталонный PNG шириной 1200 пикселей занимал от 1 до 2 МБ там, где JPEG укладывался в 58–213 КБ.

Что даёт WebP?

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

Важная деталь для тех, кто печатает или обрабатывает: лоссовый WebP работает в восьми битах и с субдискретизацией 4:2:0, а лосслесс — в 8-битном ARGB. И у формата есть жёсткий потолок размера — 16 383 пикселя по стороне. Для панорам и полотен под большой формат это ограничение реальное.

Что даёт AVIF и в чём подвох?

AVIF построен на видеокодеке AV1 и сжимает фотографию заметно плотнее. Он умеет прозрачность, анимацию, широкий цветовой охват и глубину до 12 бит, а предел размера у него практически недостижим — те же 2 147 483 647 пикселя по стороне, что и у PNG.

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

Формат Предел стороны, px Анимация
JPEG 65 535 нет
PNG 2 147 483 647 нет
WebP 16 383 да
AVIF 2 147 483 647 да

Пределы взяты из той же документации MDN; они полезны редко, но когда упираешься — упираешься внезапно.

Насколько форматы различаются по весу?

Настолько, насколько позволяет сюжет: гладкое небо сжимается втрое лучше листвы. Поэтому «AVIF на 50 % легче» — утверждение без кадра рядом бессмысленно. Проверить можно на своих кадрах, и вот метод.

Мы взяли восемь фотографических кадров из каталога, привели каждый к ширине 1200 пикселей и сохранили эталоном PNG. Затем для каждого формата подбирали наименьшее качество, при котором расхождение с эталоном по метрике SSIM не превышает 0,02, — то есть сравнивали форматы при равном измеренном качестве, а не при одинаковой цифре в поле «quality».

Формат Медиана Разброс
PNG без потерь 1,4 МБ 1,0–2,0 МБ
JPEG 119 КБ 58–213 КБ
WebP 97 КБ 33–194 КБ
AVIF 66 КБ 16–130 КБ

Разброс здесь важнее медианы. В среднем по восьми кадрам AVIF оказался на 45 % легче JPEG, а WebP — на 22 %, но крайние значения разъезжаются вдвое: на ночном городском кадре с шумом AVIF выиграл у JPEG 39 % веса, а на деловом кадре с ровным светлым фоном — 73 %. Повторить измерение на своём кадре можно тремя командами ImageMagick:

magick photo.jpg -resize 1200x -strip ref.png
magick ref.png -quality 60 out.avif
magick compare -metric SSIM ref.png out.avif null:

Меняйте качество, пока расхождение не подойдёт к выбранному порогу, и сравнивайте вес получившихся файлов. Как связать вес с секундами загрузки, разобрано в статье о быстрых картинках для сайта.

Две колонки: свойства проверенных временем форматов и современных

Современные форматы выигрывают вес, но требуют запасного варианта в разметке.

WebP или AVIF?

WebP

Кодируется быстро, читается везде, включая многие настольные программы. Прозрачность и анимация на месте. Потолок стороны 16 383 пикселя. Разумный выбор по умолчанию для большой библиотеки, которую пересобирают часто.

AVIF

Сжимает плотнее: медиана 66 КБ против 119 КБ у JPEG на тех же кадрах. Умеет широкий охват и 12 бит. Кодируется в разы дольше и не всегда открывается вне браузера, поэтому нужен фолбэк.

Как перевести библиотеку на современные форматы?

  1. Разделите картинки по типу

    Фотографии — в один список, графику с резкими краями и прозрачностью — в другой. Правила для них разные.

  2. Оставьте оригиналы нетронутыми

    Все производные всегда делаются из оригинала. Пережатый файл нельзя «улучшить» переводом в другой формат.

  3. Соберите варианты

    Для фотографий — AVIF и WebP, запасной JPEG. Для графики — SVG, если она векторная, иначе PNG с урезанной палитрой.

  4. Опишите выбор в разметке

    Тег picture с несколькими source: браузер возьмёт первый формат, который понимает, и не тронет остальные.

  5. Проверьте вес и качество выборочно

    Достаточно десятка кадров разного сюжета: гладкий фон, мелкая текстура, контрастная графика.

  6. Оставьте путь назад

    Ссылка в письме, выгрузка для партнёра или файл для типографии — это по-прежнему JPEG или TIFF, а не AVIF.

А GIF и SVG?

GIF пережил свою эпоху: 256 цветов и предел стороны 65 536 пикселей. Всё, ради чего его ещё используют, — короткая анимация, — лучше делает WebP, AVIF или обычное видео.

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

Что это значит для работы с фотостоком

Работа со стока приходит в формате, удобном для хранения, а не для вашей страницы: это исходник, из которого вы делаете варианты под конкретное место. Обложки и превью Picwin отдаются в WebP, а сама витрина объявляет тип каждой картинки, чтобы браузер не гадал.

Иллюстрации

Иллюстрации и графика — та самая половина каталога, где чаще всего нужен вектор или PNG с прозрачностью.

Смотреть работыТекстуры и паттерны

Текстуры и фоны: гладкие сюжеты сжимаются лучше всего, и разница между форматами на них видна нагляднее.

Смотреть работы

Главное

  • Формат выбирают по четырём свойствам: потери, прозрачность, анимация, поддержка.
  • Фотография — WebP или AVIF, запасной JPEG; графика — SVG, иначе PNG.
  • AVIF при равном качестве оказался на 45 % легче JPEG, WebP — на 22 %.
  • У WebP есть потолок стороны 16 383 пикселя, у AVIF его практически нет.
  • Проценты экономии зависят от сюжета: меряйте на своих кадрах.
Что лучше — WebP или AVIF?

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

Можно ли уже отказаться от JPEG?

На сайте — почти да, за пределами сайта — нет. Письма, выгрузки, типографии и внутренние системы всё ещё живут JPEG и TIFF.

Портится ли качество при переводе JPEG в WebP?

Да, если сохранять с потерями: артефакты исходника остаются, к ним добавляются новые. Переводите из оригинала, а не из пережатой копии.

Почему PNG-фотография весит десять мегабайт?

Потому что PNG сжимает без потерь. Для фотографии это означает хранение почти всех оттенков — на наших кадрах эталонный PNG весил 1–2 МБ уже при ширине 1200 пикселей.

Какой формат выбрать для логотипа?

SVG, если есть вектор. Если нет — PNG с прозрачностью; для маленьких размеров хватает палитры в 64 цвета.

Поддерживают ли AVIF все браузеры?

Актуальные версии основных браузеров — да, но за пределами браузера поддержка неровная. Именно поэтому MDN рекомендует запасной вариант через picture.

Что такое субдискретизация 4:2:0 и когда она мешает?

Это хранение цвета с половинным разрешением. На фотографии незаметно, на цветном тексте и тонких цветных линиях даёт грязные края — там нужен PNG или лосслесс.

Дальше по теме: размеры и разрешение, подготовка картинок для быстрого сайта и подготовка к печати. Готовые работы — в каталоге.