3

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

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

问题：
这在某种程度上可能<img srcset=".." sizes=".." />吗？

背景/场景

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

我正在考虑的解决方案

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

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

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

w-descriptor 指定一个绝对大小。对于桌面上的缩略图大小和移动设备上的全宽图像上下文来说，这听起来要好得多 - 反之亦然。

问题/相关

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

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

4

1 回答 1

2

你可以做这样的事情

<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根据上下文酌情更改。）

于 2016-02-15T12:22:27.580 回答