Сравнение форматов изображений для сайта: что лучше

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

Почему возникает вопрос выбора формата изображения

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

Использование ленивой загрузки и адаптивной оптимизации частично решает проблему, но требует дополнительных настроек и времени разработки.

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

Разберёмся, какой формат изображения подходит для разных задач на сайте — от фотографий до иконок.

JPG

Старый и проверенный формат JPG (или JPEG — оба варианта допустимы).

Плюсы:

Поддерживается всеми браузерами и платформами.
Обеспечивает хорошее качество фотографий при умеренном сжатии.

Минусы:

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

Качество:

Из-за субдискретизации цветности мелкие красные элементы и узоры могут терять чёткость. После изменения масштаба возможны искажения.

PNG

Долгое время PNG был основным выбором для интерфейсов и графики.

Плюсы:

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

Минусы:

Файлы с фотографиями значительно тяжелее, чем в WebP или AVIF.
Не поддерживает анимацию и сжатие с потерями.

Качество:

PNG даёт самые чистые края и мягкие тени. Если в WebP появляются ореолы или неровности, PNG сохранит исходную чёткость.

WebP

Современный универсальный формат WebP стал стандартом для большинства сайтов.

Плюсы:

Размер файлов меньше, чем у JPG, при схожем качестве.
Поддерживает прозрачность и анимацию.
Работает во всех популярных браузерах.
Есть режимы с потерями и без потерь.

Минусы:

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

Качество:

Оптимальный диапазон качества для фотографий — 75–85. При слишком сильном сжатии логотипы и текст теряют резкость — в этом случае лучше выбрать формат изображения WebP без потерь, PNG или AVIF.

AVIF

Относительно новый формат, который стремительно набирает популярность.

Плюсы:

Сжимает картинку на 20–40% эффективнее, чем WebP, при равном качестве.
Поддерживает HDR, широкую цветовую гамму и 10-битную глубину цвета.
Отлично передаёт плавные градиенты и мягкие переходы.

Минусы:

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

Качество:

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

Энергопотребление при передаче данных

И WebP, и AVIF технически являются форматами на основе видеокодеков, которые используют один кадр. Поэтому браузеру приходится декодировать их как мини-видео, что требует немного больше вычислительных ресурсов.

Тем не менее, если учитывать общий объём передаваемых данных, более лёгкие типы файлов оказываются экологичнее.

По оценкам, основная доля энергозатрат приходится на передачу данных по сети, а не на процесс декодирования.

Пример:

JPG — 500 КБ
WebP — 300 КБ
AVIF — 220 КБ

При 1000 загрузках и сетевой нагрузке 0,01 кВт⋅ч/ГБ:

JPG: 5 Вт·ч
WebP: 3 Вт·ч
AVIF: 2,2 Вт·ч

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

Практические тесты

Для проверки эффективности каждого формата были выбраны три типа изображений: фотография, продуктовая визуализация и изображение с прозрачностью. Все файлы конвертировались через picflow.com с уровнем качества 85%.

1. Фотография

Кадр в HDR, размер 1500×1000.

JPG — 328 КБ
PNG — 3,2 МБ
WebP — 298 КБ
AVIF — 393 КБ

Результаты:

Различий в качестве практически нет. Побеждает WebP — тот же визуальный результат при меньшем размере файла. AVIF оказался неожиданно крупнее JPG, что, вероятно, связано с особенностями сцены.

2. Изображения продукта

Макеты мобильного сайта, созданные в Figma, размер 2400×1260.

Lift & Revive

JPG — 197 КБ
PNG — 2,4 МБ
WebP — 100 КБ
AVIF — 119 КБ

Результаты:

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

3. Изображение с прозрачностью

Изображение с портретом и графикой, размер 1065×873.

aKCZvTZbrxcBNVNATxYMVQg5yhU

JPG — 85 КБ
PNG — 687 КБ
WebP — 73 КБ
AVIF — 95 КБ

Результаты:

JPG не подходит для прозрачных изображений, в нем прозрачность заменяется белым фоном. Остальные три формата показывают одинаковое качество, но WebP даёт наименьший вес.

Лучший формат изображений для сайта

На данный момент оптимальным выбором для большинства веб-проектов остаётся WebP. Он обеспечивает хорошее качество при небольшом размере файла, поддерживается всеми современными браузерами и помогает снизить нагрузку на сервер. Тем не менее AVIF постепенно внедряется в веб, и по мере развития поддержки в браузерах вполне может использоваться чаще в будущем.

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

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

Статья подготовлена на основании материала WebP, AVIF, PNG or JPG. What image file should you use for websites and is it sustainable?