Как использовать картинки WebP и AVIF с запасным вариантом

Короткий ответ

Оберните <img> в <picture> и перечислите форматы от лучшего к простому:

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

Браузер читает type, пропускает форматы, которые не понимает, и скачивает только один файл — первый подходящий. Если не подошёл ни один, сработает JPEG из <img>.

Живого примера здесь нет: на сайте лежат только картинки JPEG, и на них разницы не увидеть — <picture> просто покажет запасной файл.

Зачем это нужно

При том же качестве WebP обычно весит на 25–35% меньше JPEG, а AVIF — ещё меньше, иногда вдвое. Для страницы с фотографиями это секунды загрузки на медленном интернете. Сегодня оба формата понимают все современные браузеры, а <picture> страхует старые.

Вместе с разными размерами

У <source> тоже есть srcset и sizes, так что формат и ширину можно выбирать одновременно:

<picture>
  <source type="image/avif" srcset="photo-400.avif 400w, photo-800.avif 800w" sizes="(max-width: 600px) 100vw, 600px">
  <img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w" sizes="(max-width: 600px) 100vw, 600px" alt="A flower" width="800" height="500">
</picture>

Как получить файлы

Сконвертировать картинку можно в бесплатном онлайн-сервисе Squoosh или командами:

cwebp -q 80 photo.jpg -o photo.webp
avifenc photo.jpg photo.avif

Частая ошибка

Ставить WebP раньше AVIF или забывать атрибут type. Браузер берёт первый подходящий <source>, поэтому AVIF после WebP почти никогда не будет выбран. А без type браузер не знает формат заранее и может выбрать файл, который не сумеет показать.