Html 响应性img/srcset/大小：不同的jpg质量取决于设备像素密度？

我正在寻找一种响应迅速的图像策略，允许根据设备像素密度提供不同的jpg质量

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

问题：
这在

中可能吗

---

背景/情景

• 不同的原始图像具有不同的原始尺寸
• 不同的图像显示上下文：作为图库缩略图，嵌入在博客文章中，在模式框中，全屏
• 响应式布局，媒体查询会改变这些图像的显示大小，但不一定成比例。
  例如，在桌面上显示为100px缩略图的内容可能在移动设备上以全宽显示
• 高分辨率或“视网膜”设备，带有分辨率倍增器。在这些我想要很多像素，但低文件大小

我正在考虑解决办法 我认为有希望的方法是

但是，我想知道是否应该或者如何组合x描述符和w描述符

x描述符指定相对大小。但是相对于什么呢？

的原始图像大小和布局宽度在不同的上下文和视口之间可能会有所不同。视口报告媒体查询的宽度，但由于视网膜显示，实际像素宽度可以是报告的视口宽度的2倍或3倍

w描述符指定绝对大小。对于桌面上的缩略图大小和移动设备上的全宽图像环境，这听起来更好，反之亦然

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

---

相关问题：

你可以这样做

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

---

（并根据上下文适当更改大小）。

这里的答案很有趣，“压缩图片模式”您的问题在Ok上有答案，所以这里的诀窍是“最小分辨率”媒体查询，可以区分不同的物理分辨率？而其他媒体查询（“最小宽度”）指的是css像素。