Резервное изображение в картинке тег не работает

Question

Я пытался использовать тег <picture> в html для загрузки изображений "webp" для ускорения загрузки.Это работает и загружает изображение webp:

<picture>
<source srcset="img/imageXYZ.webp" type="image/webp">
<img src="img/imageXYZ.png">
</picture>

Это работает и загружает изображение png:

<img src="img/imageXYZ.png">

Но Firefox, Chrome и Edge не могут загрузить запасное изображение.Я проверил это, изменив имя изображения webp на неправильное, как в примере ниже:

<picture>
<source srcset="img/imageXYZZZ.webp" type="image/webp">
<img src="img/imageXYZ.png">
</picture>

Это просто показывает «символ отсутствующего изображения», как вы видите на скриншоте здесь: Снимок экрана

РЕДАКТИРОВАТЬ: Чтобы заставить тест работать, Родриго Фария указал правильный ответ.Более подробный ответ на мою проблему см. В моем ответе.

Answer 1

Ошибка была на моей стороне: резервное изображение работает, например, изображение png загружается в Safari, потому что Safari не поддерживает изображения webp.Резервный img просто не работает, когда вы даете образу webp неправильное имя, как я сделал с srcset="img/imageXYZZZ.webp".Причина этого заключается в том, что резервное изображение загружается, когда браузер не может поддерживать тип (type="image/webp").Firefox, Chrome и Edge могут поддерживать тип и попытаться загрузить webp img, а затем не найти его, потому что он назван неправильно.Но тогда они больше не проверяют запасное изображение, они делают это только с помощью «type» или «media».

Answer 2

Резервное изображение используется, когда ни один из источников не соответствует атрибуту «media».

Для теста попробуйте сделать следующее:

<picture>
   <source srcset="img/imageXYZ.webp" type="image/webp" media="(min-width: 2800px)">
   <img src="img/imageXYZ.png">
</picture>

Вы увидите, что носители не совпадают, и будет использоваться «img»!

Посмотрите на это описание: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture