WebP и AVIF: как отдавать современные форматы картинок

WebP и AVIF — форматы изображений с более эффективным сжатием, чем у JPEG и PNG: при похожем визуальном качестве файл обычно весит меньше, а выигрыш зависит от типа картинки — на фотографиях со сложной текстурой разница заметнее, чем на простой иллюстрации с плоскими цветами или на скриншоте с текстом.

Главное отличие форматов друг от друга — в кодеке и совместимости: WebP основан на кодеке VP8 и поддерживается браузерами дольше (в Safari — начиная с версии 14), AVIF основан на кодеке AV1, сжимает фотографии сильнее, но поддерживается новее (в Safari — начиная с версии 16.4) и кодируется заметно дольше при максимальном качестве.

Как подключить через picture

Самый надёжный способ отдать современный формат и не потерять посетителей со старым браузером — элемент <picture> с несколькими вариантами источника и обычным <img> как запасным вариантом.

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="description" width="800" height="600">
</picture>

Браузер проверяет варианты по порядку и берёт первый, который умеет показать, поэтому AVIF указывают первым, WebP вторым, а JPEG или PNG оставляют последним как вариант, понятный абсолютно всем — включая почтовые клиенты и часть ботов соцсетей, которые разбирают обычный <img>, но не умеют читать <picture>.

Как раздавать по заголовку Accept на сервере

Вместо разметки picture можно отдавать нужный формат на уровне веб-сервера: Nginx проверяет заголовок запроса Accept и, если в нём есть image/webp или image/avif, переписывает путь на файл в нужном формате — это удобно для старых тем, где менять HTML дорого.

• Хранить рядом с оригиналом файлы «.webp» и «.avif» с тем же именем — конвертация должна происходить заранее, а не на лету при каждом запросе.
• Добавлять заголовок Vary: Accept к ответу — без него CDN или браузерный кэш может отдать одному посетителю формат, предназначенный для другого.
• Проверять заголовок Accept, а не User-Agent — некоторые боты и приложения отправляют нестандартный User-Agent, но честно указывают поддерживаемые форматы в Accept.
• Отдавать оригинальный JPEG или PNG, если файла в новом формате не нашлось на диске, а не отвечать ошибкой — конвертация могла ещё не завершиться для свежей загрузки.
• Проверить после деплоя, что картинки открываются напрямую по прямой ссылке на .webp или .avif — некоторые конфигурации отдают нужный MIME-тип только через правило переписывания и ломаются при прямом запросе файла.

Правила переписывания путей добавляют в тот же конфиг, где настроено сжатие ответов — порядок применения директив имеет значение, и подробнее об этом рассказано в статье про Gzip и Brotli в Nginx.

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

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

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

Отдельный случай — WooCommerce

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

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

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

Нужно ли хранить оригинальный JPEG, если сайт уже отдаёт WebP и AVIF?

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

Почему AVIF иногда весит больше, чем WebP для одной и той же картинки?

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

Можно ли обойтись одним WebP и не возиться с AVIF?

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