Ответ
Для указания нескольких форматов одной картинки используйте тег <picture> с вложенными <source> и <img> как fallback. В <source> указывайте type с MIME-типом и srcset с путями к изображениям. Браузер выберет первый подходящий вариант.
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.avif" type="image/avif">
<img src="image.jpg" alt="Описание">
</picture>Порядок важен - браузер использует первый поддерживаемый формат. <img> обязателен как fallback для старых браузеров.
Ответ 18+ 🔞
Ага, слушай, вот есть у тебя картинка, и ты такой: "Хочу, чтобы у умных браузеров она в AVIF грузилась, у чуть менее умных — в WebP, а у всех остальных дедов — в старом добром JPEG". Ну, логично же, чё.
Так вот, для этого есть тег <picture>. Это как такой умный дирижёр для твоих изображений. Внутри него ты выстраиваешь источники в порядке своего хотелка. Сверху — самый крутой и современный формат, который ты обожаешь, внизу — тот, который работает везде.
Каждый вариант ты заворачиваешь в <source>. И вот тут важно, блядь, не проебаться с атрибутами:
- В
srcset— путь к файлу. Можно несколько для ретины, но в базовом случае — один. - В
type— MIME-тип этого файла.image/avif,image/webpи т.д. Это браузеру подсказка, мол, "этот файл вот такого формата, если не умеешь — даже не пытайся скачивать, иди к следующему".
И в самом конце, внутри <picture>, ОБЯЗАТЕЛЬНО должен сидеть старый добрый <img> с обычным src. Это наш бронежилет, наш неприкосновенный запас. Если браузер — древний пиздюк и про <picture> не слышал, он просто проигнорит всё и возьмёт картинку из <img>. И она, сука, должна быть! И с alt, конечно, а то ты что, совсем?
Порядок — это всё. Браузер идёт сверху вниз, проверяет type, и как только видит "о, image/avif — это я могу!", он на этом и останавливается. Остальные <source> ему уже похуй. Поэтому если ты сначала поставишь JPEG, а потом AVIF, то до AVIF дело никогда не дойдёт, потому что JPEG-то все понимают. Ты сам себе ногу выстрелишь, понимаешь?
Вот, смотри, как это выглядит вживую, чтобы было понятно, как обезьяне на карте:
<picture>
<!-- Пытаемся впихнуть самый топовый формат -->
<source srcset="kotik.avif" type="image/avif">
<!-- Не получилось? Ладно, давайте WebP, он тоже хорош -->
<source srcset="kotik.webp" type="image/webp">
<!-- Всё, сдаёмся, вешаем старую табличку для всех, кто вышел из пещеры с дубиной -->
<img src="kotik.jpg" alt="Рыжий кот с выражением глубокого презрения">
</picture>Вот и вся магия. Браузер сам выберет, что ему по зубам, а ты не будешь грузить AVIF там, где его, блядь, не распознают. Умно, эффективно, и все довольны.