AVIF против WebP: тесты качества и поддержка браузеров
Форматы WebP и AVIF ведут борьбу за звание главного формата современной веб-графики. В руководстве анализируем кодеки VP8 и AV1, сравниваем энергопотребление при декодировании на мобильных процессорах и определяем оптимальную стратегию для тега <picture>.
Различия кодеков: VP8 против AV1
• AVIF (AV1 Image File Format): разработан альянсом AOMedia (Google, Apple, Mozilla, Netflix, Microsoft) на базе видеокодека нового поколения AV1. Поддерживает 10- и 12-битную глубину цвета, нативное цветовое пространство HDR (Rec. 2020), нелинейные фильтры восстановления контуров (Constrained Directional Enhancement Filter, CDEF) и квантование с переменным шагом макроблоков до 128x128 пикселей.
При сверхнизком битрейте (например, баннер размером 25–35 КБ):
- WebP начинает разбивать изображение на блочные квадраты (blocking artifacts);
- AVIF плавно сглаживает текстуры без блочности, сохраняя эстетичный вид фотографий.
Полезный инструмент: WebP остаётся безоговорочным стандартом веб-разработки: используйте наш конвертер WebP онлайн и сжатие изображений.
Полезный инструмент: В отличие от устаревшего формата PNG (см. подробный разбор в руководстве по сжатию графики).
Главный компромисс: время кодирования и нагрузка на CPU
1. Скорость энкодинга (Encoding Speed): кодирование файла в формат AVIF (через libavif или cavif) требует в 8–15 раз больше процессорных циклов, чем создание эквивалентного WebP. Для динамических платформ (маркетплейсы, доски объявлений), где пользователи загружают тысячи фото в секунду, сжатие в AVIF требует масштабных серверных мощностей.
2. Аппаратное декодирование на смартфонах: чипы Apple Silicon (начиная с A17 Pro / M3) и современные процессоры Snapdragon/Dimensity имеют аппаратный блок декодирования AV1. Однако на старых бюджетных смартфонах распаковка тяжёлого AVIF нагружает CPU программно, что может вызывать микрофризы при быстром скролле каталога.
Идеальная продакшн-стратегия с тегом picture
<picture>:<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Hero Banner" loading="lazy" width="1200" height="675">
</picture>
Браузер с поддержкой AVIF загрузит самый лёгкий файл (экономия ~50% от JPEG). Браузер без поддержки AVIF возьмёт WebP (-30% от JPEG). Для одиночных картинок в браузере вы можете прямо сейчас конвертировать изображения в WebP в нашем инструменте.
Попробуйте онлайн-инструменты по этой теме
Используйте бесплатные утилиты Utilora прямо в браузере без регистрации:
Сжатие картинок
Быстрое уменьшение веса фотографий JPEG, PNG и WebP с интерактивным сплит-сравнением качества «до и после».
Запустить ▸PNG в WebP Конвертер
Конвертация тяжелых PNG-картинок в современный легковесный формат WebP с прозрачностью.
Запустить ▸Изменение размера фото
Масштабирование ширины и высоты фото в пикселях или процентах с сохранением пропорций.
Запустить ▸Часто задаваемые вопросы (FAQ)
Да, WebP полностью поддерживает 8-битный альфа-канал как для сжатия с потерями (lossy), так и без потерь (lossless), веся значительно меньше PNG-24.
Для максимальной совместимости со всеми версиями iOS Safari, десктопными ОС и мгновенной скорости сжатия на Canvas в браузере WebP остаётся лучшим сбалансированным стандартом.
Да, в инструменте «Сжатие изображений» Utilora обработка фото и ресайз выполняются прямо в графической памяти вашего браузера.