Ответ
Для указания нескольких форматов одной картинки можно использовать тег <picture> с <source> внутри. Это позволяет браузеру выбрать оптимальный формат из предложенных:
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.avif" type="image/avif">
<img src="image.jpg" alt="Описание">
</picture>Браузер проверит поддержку форматов и загрузит первый подходящий. Если ни один не поддерживается, загрузится fallback из <img>.
Для адаптивных изображений можно комбинировать с media-запросами:
<picture>
<source media="(min-width: 800px)" srcset="large.webp" type="image/webp">
<source srcset="small.webp" type="image/webp">
<img src="fallback.jpg" alt="Описание">
</picture>Ответ 18+ 🔞
А, ну это ж классика, блядь! Картинки в интернете, сука! Все эти форматы, как собаки несчастные — каждый тянет одеяло на себя. WebP, AVIF, JPEG... Ёпта, целый зоопарк!
Так вот, слушай сюда, гениальная мысль. Чтобы не гадать, какой формат у пользователя в браузере заведётся, есть тег <picture>. Это как умный, блядь, швейцар, который сам решает, кого впустить. Внутри него источники <source> лежат, как меню в столовой.
Браузер, этот хитрожопый клиент, смотрит: «Ага, AVIF я жру? Жру!» — и хватает его. Не жрёт AVIF? Ну, ладно, WebP схавает. А если он совсем старый пердун и ничего нового не понимает — тогда уже дефолтная JPEG-картинка из тега <img> вылезет, как запасной игрок. И никто не останется голодным, все довольны!
Ну а если тебе надо не просто формат выбрать, а ещё и для разных экранов разные картинки — так это вообще красота! Ты ему прямо в media укажи, мол, для широких экранов вот эту здоровую картинку давай, а для телефонов — ту, что поменьше. Умная система, ёбана!
Короче, вместо того чтобы одним <img> всё на авось кидать, используй <picture>. Выглядит это, конечно, как простыня кода, но зато работает на ура. Вот, смотри, как это выглядит, без всяких там изменений:
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.avif" type="image/avif">
<img src="image.jpg" alt="Описание">
</picture>А для адаптивности — вообще песня:
<picture>
<source media="(min-width: 800px)" srcset="large.webp" type="image/webp">
<source srcset="small.webp" type="image/webp">
<img src="fallback.jpg" alt="Описание">
</picture>Вот и весь секрет, блядь. Никакой магии, чистая логика, как у Герасима из «Муму» — либо так, либо никак. Только тут топить никого не придётся.