Fallback Image in Picture Tag not working

问题: I tried to use the <picture> Tag in html to load "webp" images for faster loading times. This works and loads the webp image: <picture> <source srcset="img...

问题:

I tried to use the <picture> Tag in html to load "webp" images for faster loading times. This works and loads the webp image:

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

This works and loads the png image:

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

But Firefox, Chrome and Edge aren't able to load the fallback image. I tested that by changing the name of the webp image to a wrong one like in the example below:

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

It just shows the "missing image symbol" like you see in the screenshot here: Screenshot

EDIT: To get the test to work, Rodrigo Faria pointed out the right answer. For a more specific answer to my problem, see my answer.


回答1:

The fallback image is used when none of images matches with the attribute "media".

For your test, try to do this:

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

You will see that the media doesn't match and the "img" will be used!

Look at this description: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture


回答2:

The mistake was on my side: The fallback image does work, for example the png image is loaded on Safari, because Safari doesn't support webp images. The fallback img just doesn't work when you give the webp image a wrong name like I did with srcset="img/imageXYZZZ.webp". The reason for that is that the fallback image is loaded when the browser can't support the type (type="image/webp"). Firefox, Chrome and Edge can support the type and try to load the webp img and then don't find it because it is named wrong. But then they don't check again for the fallback image, they only do that with "type" or "media".

  • 发表于 2019-03-07 19:12
  • 阅读 ( 179 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除