我可以在 srcset 中使用不同的文件类型吗？

Question

我正在尝试合并 .jpg 和 .webp，但它对我不起作用..

<img src="flower.jpg" srcset="flower.webp 480w, flower.jpg 1080w" sizes="50vw">

Answer 1

srcset 属性中的图像 URL 的唯一要求是 URL 有效并指向图像。图像类型不必相同。请参阅WHATWG standard 或MDN docs 了解更多信息。

但是，如果您出于性能原因包含多种图像类型（提供更好压缩的图像，同时为旧版浏览器提供后备），那么<picture> 标记将是可行的方法。

<picture>
  <source srcset="flower.webp" type="image/webp">
  <img src="flower.jpg" alt="[something that describes the image]">
</picture>

您还可以使用<source> 标记上的srcset 和sizes 属性提供不同的图像宽度。