创建只有低分辨率内容的响应式图像标签答案

【问题标题】：Create responsive image tag with only low res content创建只有低分辨率内容的响应式图像标签
【发布时间】：2017-06-13 22:01:57
【问题描述】：

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

我正在建立一个每页包含许多图像的网站。我们更关心页面加载速度，而不是图像质量。例如，在具有高分辨率屏幕的手机上，我们宁愿浏览器使用低分辨率图像而不是选择 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 手机会选择我们希望它们使用最小文件的最大文件。

【问题讨论】：

标签： image resolution image-resizing responsive-images

【解决方案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>

【讨论】：