具有Webp后备和不同屏幕尺寸的picutre srcset

当我想在浏览器支持时使用webp图像,否则回退到jpg时,我会这样使用:

<picture>
    <source srcset="image.webp" type="image/webp" />
    <img src="image.jpg" alt="Something">
</picture>

还要选择适合屏幕尺寸的图像尺寸:

<picture>
    <source media="(max-width: 799px)" srcset="small.jpg">
    <source media="(min-width: 800px)" srcset="big.jpg">
    <img src="big.jpg" alt="something">
</picture>

由于我拥有所有图像,并且具有所有大小和两种格式,因此我想同时执行以上两个功能,因此我既有大小的webps,也有大小的jpg。因此,如果浏览器支持webp,则仅使用不同大小(基于屏幕大小)的webp图像,否则不使用不同大小的jpg文件。

我想知道这是否可能。

我对此进行了测试:

<picture>
    <source media="(max-width: 799px)" srcset="small.webp">
    <source media="(min-width: 800px)" srcset="big.webp">
    <source media="(max-width: 799px)" srcset="small.jpg">
    <source media="(min-width: 800px)" srcset="big.jpg">
    <img src="big.jpg" alt="something">
</picture>

但它只会选择与屏幕尺寸匹配的第一个

ldl274057936 回答:具有Webp后备和不同屏幕尺寸的picutre srcset

当然可以。说实话很简单

<img src="images/keyboard.webp" onerror="this.src='images/keyboard.jpg';"  alt="Image not found"/>

这段代码说明了自己。

它加载webp张图片。 onerror处理是否未加载图像。它将src设置为jpg

本文链接:https://www.f2er.com/3133406.html

大家都在问