WebP и AVIF: как выбрать и проверить подходящий формат изображения

На некоторых изображениях и при некоторых требованиях к качеству AVIF может превзойти WebP; WebP может быстрее кодироваться и лучше вписываться в более широкий старый процесс. Расширение не гарантирует результат. Сравнивайте типичные выходные файлы, совместимость и стоимость конвейера и давайте резервные форматы там, где они нужны аудитории.

Два формата в двух словах

Оба формата выросли из видеокодеков. Google выпустил WebP в 2010 году на базе VP8 — той же технологии, что стоит за видеоформатом WebM. Альянс за открытые медиа (Alliance for Open Media) выпустил AVIF в 2019 году на базе AV1 — более нового и эффективного видеокодека, разработанного совместно Google, Mozilla, Apple, Netflix и другими компаниями.

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

Сжатие: насколько меньше файлы?

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

• AVIF — способен дать хороший результат для фотографий, градиентов, HDR и процессов с большой битовой глубиной, но кодирование может быть дорогим
• WebP — способен эффективно выдавать варианты с потерями и без них благодаря зрелым инструментам и меньшей эксплуатационной сложности многих конвейеров

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

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

Поддержка браузеров и программ

Таблицы поддержки меняются, а мировая доля не равна вашей аудитории. Проверяйте целевые браузеры и другие получатели. Элемент <picture> может предложить сначала AVIF, затем WebP, а JPEG оставить последним резервным <img>:

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="Описание" />
</picture>

Скорость кодирования и инструменты

Кодировщики WebP при сопоставимых настройках усилия часто требуют меньше вычислений, чем AVIF, но соотношение сильно меняется. Если CMS конвертирует изображения при загрузке или большими пакетами, измеряйте пропускную способность, память, очередь и качество на тех библиотеках и настройках, которые развёрнуты.

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

Инструменты поддерживают форматы широко, но неравномерно. Проверьте импорт, экспорт, анимацию, цветовые профили, метаданные и автоматическое согласование в конкретном редакторе, CMS, тарифе CDN и наборе браузеров.

Сравнение возможностей

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

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

Выбирайте AVIF, когда:

• Вы контролируете процесс обработки изображений и можете настроить фолбэки
• Типичные результаты AVIF улучшают важное узкое место передачи или качества
• Нужны возможности AVIF, например большая битовая глубина или HDR, и проверена вся цветовая цепочка
• CDN или сборочный конвейер правильно создаёт, кэширует и согласует проверенные варианты

Выбирайте WebP, когда:

• Измеренная пропускная способность кодировщика или простота эксплуатации говорят в пользу WebP
• Поддерживаемые клиенты принимают WebP, а дополнительный AVIF не оправдан
• Типичная графика достигает целей по байтам и качеству в WebP
• Вы уже используете WebP и миграция не оправдана

Используйте оба, когда измеренная польза это оправдывает:

Набор <picture> добавляет работу по созданию, хранению, кэшированию, разметке и проверке качества, но может улучшить доставку. Некоторые CDN автоматизируют согласование; проверяйте тариф, ключи кэша, обработку Vary, настройки качества и резервный результат, а не предполагайте «оптимальную» доставку.

Как конвертировать изображения

Vizua создаёт поддерживаемые WebP и AVIF в браузере без установки программы. Выбранный файл не отправляется на наш сервер обработки изображений; необходимый код и службы сайта всё же могут использовать сеть:

• Сжать WebP — уменьшить существующие WebP-файлы
• Конвертировать в AVIF — создать AVIF из поддерживаемых входных изображений
• JPG в WebP — конвертировать JPEG-фотографии в WebP
• PNG в WebP — конвертировать PNG-графику в WebP

Если вы работаете с JPEG-исходниками, наше руководство о том, как сжать изображения без потери качества, объясняет выбор начальных настроек и сравнение реальных результатов.

Часто задаваемые вопросы