Question

我们如何构建响应式图像标记以确保浏览器选择将填充其容器的文件大小最低的图像，而不是选择更高分辨率的版本？

我建立的网站每页都有很多图片。我们更关注快速页面加载而不是图像质量。在具有高分辨率屏幕的手机上，我们宁愿浏览器使用低分辨率图像而不是选择2x图像，例如，即使有一点像素化也是如此。

我们如何构建img标签或图片标签来实现这一目标？

我试过这个：

<img
src="//placehold.it/992x662"
srcset="//placehold.it/1024x683 1024w,
    //placehold.it/992x662 992w,
    //placehold.it/768x512 768w,
    //placehold.it/544x363 544w"
sizes="(min-width: 1200px) 1024px,
    (min-width: 992px) 992px,
    (min-width: 768px) 768px,
    (min-width: 544px) 544px,
    calc(100vw - 30px)"
/>

但Retina手机会选择我们希望他们使用最小文件的最大文件。

Answer 1

我认为您需要使用<picture>：

<picture>
  <source media="(min-width: 1024px)" srcset="//placehold.it/1024x683">
  <source media="(min-width: 992px)" srcset="//placehold.it/992x662">
  <source media="(min-width: 768px)" srcset="//placehold.it/768x512">
  <source media="(min-width: 544px)" srcset="//placehold.it/544x363">
  <img src="//placehold.it/992x662" />
</picture>

仅使用低分辨率内容创建响应式图片代码

1 个答案: