I’m testing out the following HTML5 Picture element, but I can’t get it to show the correct source.
I would like the default image type to be ‘webp’, then ‘jpg’ as a fallback.
In this test, the webp image does not exist, so I was expecting the jpg to load instead.
But when trying on Chrome and Safari, it only fails to find the first source and does not try to load the existing jpg. So the picture is either blank or has a question mark icon.
Is there something wrong with the following code?
<picture class="item-slide" data-slideid="1">
<source srcset="https://imgnotexist.com/test.webp" type="image/webp" />
<img src="https://i.stack.imgur.com/QeSoC.jpg" />
</picture>
>Solution :
The <img> is only used if none of the <source> tags matches the media selection. If a <source> tag matches, as yours does, then that’s the one that will be displayed. In your example, the <img> will never be used.
There’s no way to do an "image does not exist" fallback without using Javascript. That seems like a strange desire.