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

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

Коротко о форматах

WebP

Формат, разработанный Google. Поддерживает сжатие с потерями и без потерь, прозрачность и анимацию. Сегодня его понимают все распространённые браузеры. Большинство CMS, конструкторов и сервисов оптимизации умеют с ним работать.

AVIF

Более новый формат, основанный на видеокодеке AV1. Как правило, при том же визуальном качестве даёт меньший вес файла, чем WebP, особенно на фотографиях. Поддерживает прозрачность, анимацию и расширенный цветовой диапазон. Современные версии основных браузеров его поддерживают, но совместимость старых устройств и некоторых программ хуже, чем у WebP.

Сравнение

Когда выбрать WebP

• Нужен один формат «на всё» без сложной настройки
• Сайт на конструкторе или CMS, где AVIF не поддерживается
• Много картинок генерируется на лету, и скорость обработки важна
• Аудитория пользуется старыми устройствами и браузерами

Когда выбрать AVIF

• Главные изображения крупные и фотографические: интерьеры, недвижимость, еда, товары с детализацией
• Каждый килобайт на первом экране важен для LCP
• Картинки готовятся заранее, и время кодирования не критично
• Есть возможность отдавать запасной формат

Лучший вариант — оба

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

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

Качество и настройки сжатия

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

Для скриншотов, схем и логотипов с чёткими линиями рассмотрите сжатие без потерь или SVG вместо растровых форматов.

Влияние на SEO

Поисковики индексируют изображения в WebP и AVIF. Однако если вам важен трафик из поиска по картинкам, убедитесь, что адрес изображения стабилен, а у тега img есть alt. Сам формат не даёт прироста позиций — эффект косвенный, через скорость.

Типичные ошибки

• Конвертировать уже сильно сжатые JPEG: качество падает дважды
• Отдавать AVIF без запасного формата
• Конвертировать картинки, но оставить их огромные исходные размеры
• Забыть про картинки в CSS-фонах: им тоже нужны современные форматы
• Не проверить, что сервер отдаёт правильный тип файла

Порядок внедрения

1. Найдите самые тяжёлые изображения на ключевых страницах через PageSpeed Insights
2. Сделайте тест: один и тот же файл в WebP и AVIF при разных настройках качества
3. Выберите настройки, при которых разница незаметна глазу
4. Настройте автоматическую конвертацию при загрузке или на стороне CDN
5. Проверьте отображение в разных браузерах и на телефонах
6. Сравните вес страниц до и после