响应式 img/srcset/sizes：根据设备像素密度不同，使用不同的 jpg 图片质量？

Question

我正在寻找一种响应式图片策略，可以根据设备像素密度提供不同的jpg质量。在小屏幕高分辨率上，我会提供低质量但高分辨率的jpg。在大屏幕低像素密度上，我会提供高质量的jpg，最好与设备分辨率匹配。问题：是否可以使用实现这一点？

---

背景/场景

• 不同原始尺寸的不同原始图像。
• 不同的图像显示上下文：作为画廊缩略图，嵌入博客文章，模态框中，全屏等。
• 响应式布局，使用媒体查询更改这些图像的显示大小，不一定成比例。
  例如，在桌面上显示为100px缩略图的内容，在移动设备上可能以全宽度显示。
• 高分辨率或“Retina”设备，具有分辨率乘数。在这些设备上，我希望获得许多像素，但文件大小较小。

我正在考虑的解决方案

我认为这个问题的有前途的方法是<img srcset=".." sizes=".."/>。

然而，我想知道是否或如何结合x-descriptor和w-descriptor。

x-descriptor指定相对大小。但相对于什么？<img>的原始图像大小和布局宽度在上下文和视口之间都可能不同。视口报告媒体查询的宽度，但由于Retina显示器的存在，实际像素宽度可以是所报告视口宽度的2倍或3倍。

w-descriptor指定绝对大小。这在图像上下文中听起来更好，因为它们可能在桌面上缩略图大小，在移动设备上则是全宽度-或反之亦然。

问题/相关

如何根据设备的像素密度提供不同的jpg质量？（与上述问题相同）

相关问题： srcset和sizes是指设备像素还是布局像素？

- donquixote

---

有趣的答案在这里，http://stackoverflow.com/a/31099581/246724，“压缩图片模式”。 - donquixote

你的问题在这里有答案：如何使用srcset和sizes实现响应式图片。 - Peyman Mohamadpour

Answer 1

你可以像这样做：

<picture>
 <source media="(min-resolution: 1.5dppx)"
         srcset="low-quality-high-res.jpg 2x">
 <img src="high-quality-low-res.jpg" ...>
</picture>

实际上，您可能需要为每个质量设置多个尺寸：

<picture>
 <source media="(min-resolution: 1.5dppx)"
         srcset="lq-500w.jpg 500w, lq-1000w.jpg 1000w"
         sizes="100vw">
 <img src="hq-250w.jpg"
      srcset="hq-250w.jpg 250w, hq-500w.jpg 500w"
      sizes="100vw" ...>
</picture>

（根据上下文，视情况更改sizes。）

- zcorpan

---

好的，这里的诀窍在于“min-resolution”媒体查询可以区分不同的物理分辨率，而其他媒体查询（“min-width”）则是指CSS像素。 - donquixote