具有webp后备和不同屏幕尺寸的图片集

Question

[当我想在浏览器支持时使用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>

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

Answer 1

当然可以。说实话，这很简单