时间戳

首页 > 解决方案 > 我可以在 srcset 中使用不同的文件类型吗？

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

问题描述

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

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

标签： htmlwebplighthousesrcset

解决方案

属性中对图像 URL 的唯一要求srcset是 URL 有效并指向图像。图像类型不必相同。有关更多信息，请参阅WHATWG 标准或MDN 文档。

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

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

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

推荐阅读