Сравнение форматов

AVIF и WebP: какой формат нового поколения выбрать?

И AVIF, и WebP заметно превосходят JPEG и PNG, но различаются по балансу между сжатием и скоростью. AVIF сжимает до 50 процентов лучше JPEG; WebP укладывается примерно в 25-35 процентов и кодируется намного быстрее. Для веб-страницы, которую вы контролируете, AVIF стоит ожидания при кодировании; там же, где скорость доставки важнее каждого килобайта, WebP это практичный выбор.

В чём WebP лучше всего

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

В чём AVIF лучше всего

AVIF основан на видеокодеке AV1 и достигает сжатия, которое обычно на 50 процентов лучше JPEG и заметно лучше WebP при том же визуальном качестве. Он также чище обрабатывает плавные градиенты и мелкие детали, чем WebP, давая меньше артефактов звона вокруг контрастных краёв, характерных для форматов с потерями. Поддержка браузеров охватила все основные браузеры с конца 2023 года. Настоящая цена это время кодирования: AVIF тратит минуты там, где WebP справляется за секунды, поэтому он лучше всего подходит для изображений, которые сжимают один раз, а отдают многократно, например для главных и товарных фото.

Как выбрать и протестировать оба в браузере

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

Компрессор изображений с загруженным фото и выбранным форматом вывода AVIF

Результат AVIF в сравнении с WebP, видна разница в размере файла при равном качестве

Инструменты из этого гайда

Частые вопросы

Можно ли использовать AVIF без запасного WebP?

Для новых веб-страниц, нацеленных на современные браузеры, да. AVIF поддерживается в Chrome, Firefox, Safari и Edge с конца 2023 года, что покрывает подавляющее большинство веб-трафика. Если в вашей аудитории есть старые браузеры или некоторые мобильные webview, которые вы не можете проверить, надёжнее предусмотреть запасной WebP в элементе picture: браузеры берут первый поддерживаемый формат и игнорируют остальные.

Какой формат использовать для прозрачных изображений?

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