Форматы изображений: JPEG, PNG, WebP, AVIF и другие

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

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

JPEG: стандарт для фотографий

JPEG (Joint Photographic Experts Group) был представлен в 1992 году и остаётся доминирующим форматом для фотографий. Его алгоритм сжатия основан на Дискретном косинусном преобразовании (DCT): изображение делится на блоки 8×8 пикселей, каждый блок преобразуется из пространственной области (цвета пикселей) в частотную (насколько быстро цвета меняются в блоке). Затем кодировщик квантует эти частотные данные — сохраняя низкочастотные компоненты, описывающие широкие цветовые области, и отбрасывая или огрубляя высокочастотные, описывающие мелкие детали и резкие края.

Именно поэтому при агрессивных настройках JPEG-сжатие создаёт характерные артефакты: блочные квадраты 8×8 (макроблоки), размытие вокруг резких краёв и полосы в градиентах. Эти артефакты появляются в областях мелких деталей и высокого контраста — именно там, где высокочастотные компоненты, отброшенные кодировщиком, были бы наиболее важны.

JPEG — формат с потерями: каждое сохранение безвозвратно отбрасывает информацию. При качестве 85–90 (по шкале 0–100) фотографии при веб-просмотре, как правило, неотличимы от оригинала, при этом в 5–20 раз меньше, чем PNG того же изображения. JPEG не поддерживает прозрачность (альфа-канал) и анимацию.

PNG: точность без потерь

PNG (Portable Network Graphics) использует сжатие без потерь на основе алгоритма DEFLATE, который сочетает словарное сжатие LZ77 (поиск и замена повторяющихся последовательностей байтов) с кодированием Хаффмана (назначение более коротких битовых кодов более часто встречающимся значениям). Данные изображения никогда не отбрасываются. Каждый пиксель хранится точно.

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

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

WebP: современный веб-формат

WebP был представлен Google в 2010 году, производный от видеокодека VP8. Он поддерживает режимы сжатия как с потерями, так и без потерь, плюс анимацию и прозрачность в обоих режимах. Режим с потерями использует подход на основе DCT-блоков, похожий на JPEG, но с более сложными методами предсказания и энтропийным кодированием, обычно достигая файлов на 25–35% меньше, чем JPEG при эквивалентном визуальном качестве. Режим без потерь на 15–25% эффективнее PNG для большинства контента.

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

AVIF: следующее поколение

AVIF (AV1 Image File Format) основан на ключевых кадрах видеокодека AV1, разработанного Alliance for Open Media и выпущенного в 2018 году. Методы сжатия AV1 значительно более совершенны, чем те, что лежат в основе JPEG или WebP: более крупные блоки предсказания переменного размера, более сложное внутрикадровое предсказание, лучшая обработка зернистости и шума пленки, превосходное энтропийное кодирование. Результат — обычно файлы на 40–50% меньше, чем JPEG при эквивалентном качестве, часто превосходя WebP на 20–30%.

AVIF поддерживает полный HDR, широкий цветовой охват, прозрачность, анимацию и глубину цвета как 8, так и 10 бит. Поддержка браузеров быстро наверстала: Chrome (85+), Firefox (93+) и Safari (16+) поддерживают AVIF. Главный недостаток — скорость кодирования: AVIF значительно медленнее кодируется, чем JPEG или WebP, что важно для конвейеров обработки изображений в реальном времени, но несущественно для предварительно сжатых статических ресурсов.

Сравнение размеров файлов для одного изображения

Чтобы различия были конкретными, вот репрезентативное сравнение для фотографии 1920×1080 при сопоставимом воспринимаемом визуальном качестве:

• PNG (без потерь) — 4,2 МБ. Идеальное воспроизведение, без артефактов. Подходит для исходного мастера или когда требуется точность до пикселя.
• JPEG (качество 85) — 380 КБ. Минимальные видимые артефакты при просмотре на экране. Стандарт для фотографической веб-доставки на протяжении трёх десятилетий.
• WebP (с потерями, эквивалентное качество) — 270 КБ. Примерно на 30% меньше JPEG, визуально сопоставим. Прямолинейное улучшение для большинства веб-проектов.
• AVIF (эквивалентное качество) — 180 КБ. Примерно на 50% меньше JPEG, визуально сопоставим или лучше. Лучший размер файла на сегодняшний день для фотографического контента.

Это ориентировочные цифры; реальные соотношения варьируются в зависимости от контента изображения. Детальная, зашумлённая фотография меньше выигрывает от новых кодеков, чем гладкие, малошумные изображения.

Когда использовать каждый формат

• Фотографии в вебе — используйте WebP с JPEG-fallback через HTML-элемент <picture>. Если ваш конвейер сборки поддерживает AVIF-кодирование, отдавайте AVIF с WebP и JPEG в качестве fallback.
• Логотипы, иконки, UI-элементы с прозрачностью — WebP (без потерь) или PNG. JPEG вообще не поддерживает прозрачность.
• Скриншоты и записи экрана — PNG для всего, требующего точного попиксельного воспроизведения. WebP без потерь как более компактная альтернатива, когда точность не критична.
• Иллюстрации с плоскими цветами и резкими краями — PNG или WebP без потерь. JPEG создаст заметные артефакты «звона» вокруг резких краёв даже при высоких настройках качества.
• Печать и архивирование — PNG (без потерь) или TIFF. Форматы с потерями неуместны для исходных ресурсов, которые будут повторно редактироваться.
• Электронная почта — JPEG или PNG. Почтовые клиенты имеют непостоянную поддержку WebP и практически никакой поддержки AVIF. Здесь совместимость важнее оптимизации.

Влияние на Core Web Vitals и производительность страниц

Largest Contentful Paint (LCP) — один из Core Web Vitals Google — измеряет, сколько времени требуется для загрузки самого крупного видимого элемента контента (часто это hero-изображение). Выбор формата изображения напрямую влияет на LCP: AVIF hero-изображение загружается быстрее, чем эквивалентный JPEG, и быстрый LCP улучшает и пользовательский опыт, и позиции в поиске.

Накопительный эффект тоже важен. Страница с 20 изображениями товаров, каждое из которых ненужно сохранено как PNG вместо WebP, может быть на 5–10 МБ тяжелее, чем необходимо. На мобильных соединениях это разница между страницей, загружающейся за 2 секунды, и страницей, загружающейся за 8 секунд.

Отдача разных форматов разным браузерам

HTML-элемент <picture> и его дочерние <source> позволяют отдавать лучший формат для каждого браузера без JavaScript:

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero image" />
</picture>

Браузер выбирает первый поддерживаемый <source>. Браузеры с поддержкой AVIF загружают наименьший файл; остальные переходят к WebP или JPEG. Тег <img> в конце служит универсальным fallback и является единственным элементом, которому обязателен атрибут alt.

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