响应式img / srcset / sizes：不同的jpg质量取决于设备像素密度？

Question

我正在寻找一种响应式图像策略，可以根据设备像素密度提供不同的jpg质量。

在高分辨率的小屏幕上，我会提供低质量但高分辨率的jpg。在像素密度较低的大屏幕上，我会提供高质量的jpg，理想地匹配设备分辨率。

问题：
<img srcset=".." sizes=".." />会以某种方式实现这一点吗？

背景/场景

• 具有不同原始尺寸的不同原始图像。
• 不同的图片显示上下文：作为图库缩略图，嵌入博客文章，模态框中，全屏..
• 响应式布局，使用可更改这些图像的显示大小的媒体查询，不一定成比例 例如。在桌面上显示为100px缩略图的内容可能会在移动设备上以全宽显示。
• 高分辨率或＆＃34; Retina＆＃34;设备，具有分辨率乘数。在这些我想要很多像素，但文件很小。

解决方案我正在考虑

我认为有希望的方法是<img srcset=".." sizes=".."/>。

但是，我想知道是否应该或如何组合x-descriptor和w-descriptor。

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

w-descriptor指定绝对大小。这对于可能在桌面上的缩略图大小和移动设备上的全宽度的图像上下文来说听起来更好 - 反之亦然。

问题/相关

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

相关问题：Do srcset and sizes refer to device pixels or layout pixels?

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。）