带有 webp 后备和不同屏幕尺寸的图片 srcset答案

【问题标题】：picutre srcset with webp fallback and different screen sizes带有 webp 后备和不同屏幕尺寸的图片 srcset
【发布时间】：2019-11-09 09:25:34
【问题描述】：

当我想在浏览器支持的情况下使用 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>

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

【问题讨论】：

标签： html css image webp

【解决方案1】：

当然可以。说实话很简单

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

这段代码几乎可以自我解释。

它加载webp 图像。 onerror 处理图像未加载的情况。它将src 设置为jpg

【讨论】：

我希望能够定义不同大小的不同webp图像以及不同大小的不同jpg图像。
我想你会找到你的答案here 这是对其工作原理的深入解释。如果您有任何不清楚的地方，请回到这里，以便我们解决:)

【解决方案2】：

您需要在每个source 上使用 type 属性，这样浏览器才能加载它理解的最佳格式，例如：

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

【讨论】：