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

Question

我正在寻找一个响应的图像策略，允许服务不同的jpg质量基于设备像素密度。

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

问题：

这在<img srcset=".." sizes=".." />中有可能吗

背景/设想

• 不同的原始图像和不同的原始尺寸。
• 不同的图像显示上下文:作为画廊缩略图，嵌入在博客帖子中，在一个模态框中，全屏。
• 响应性布局，媒体查询改变这些图像的显示大小，不一定成比例。 例如，桌面上显示为100 in缩略图的内容，可能会在移动设备上以全宽度显示。
• 高分辨率或"Retina“设备，具有分辨率倍增器。在这些，我想要许多像素，但文件大小低。

我正在考虑的解决方案

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

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

X描述符指定相对大小.但相对于什么？<img>的原始图像大小和布局宽度都可能因上下文和视图端口而异。视口报告媒体查询的宽度，但由于视网膜显示，实际像素宽度可以是所报告视口宽度的2倍或3倍。

W-描述符指定绝对大小.这听起来更好的图像上下文，可能是缩略图大小的桌面，全宽度的移动-反之亦然。

问题/有关

根据设备上的像素密度，我如何提供不同的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。)