<picture> 元素和 srcset

Question

与 srcset 相比，我更喜欢使用 <picture> 元素，因为我可以使用 WebP 并回退到 JPG。我不能用 srcset 做到这一点，这很遗憾。

不过，我更喜欢 srcset，因为它可以根据分辨率更改图像，例如2x, 3x

有没有办法将这两个选项结合起来，以便我可以两全其美。
为什么我不能将 srcset 用于艺术指导，因为这通常被用作使用 <picture> 的主要原因，但我不明白为什么我不能这样做这与 srcset.

Answer 1

您实际上可以将 srcset 与 picture 元素结合起来，并同时使用这两个功能

<picture>
  <source 
    media="(min-width: 650px)" 
    srcset="images/kitten-stretching.png,
            images/kitten-stretching@1.5x.png 1.5x,  
            images/kitten-stretching@2x.png 2x">
</picture>

我仍然不知道为什么你不使用 srcset 作为艺术指导，因为它看起来是可能的。

<picture> 元素和 srcset

<picture> element and srcset

image

srcset