响应式img/srcset/大小:取决于设备像素密度的不同jpg质量? [英] Responsive img/srcset/sizes: Different jpg quality depending on device pixel density?

问题描述

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

I am looking for a responsive image strategy that allows to serve different jpg quality based on the device pixel density.

在高分辨率的小屏幕上，我将提供低质量但高分辨率的jpg.在像素密度低的大屏幕上，我会提供高质量的jpg，非常适合设备分辨率.

On a small screen with high resolution, I would serve a low-quality but high-resolution jpg. On a big screen with low pixel density, I would serve a high-quality jpg, ideally matching the device resolution.

问题:

• 具有不同原始尺寸的不同原始图像.
• 不同的图像显示上下文:作为图库缩略图，嵌入在博客文章的模式框中，全屏显示.
• 响应式布局，其中媒体查询会更改这些图像的显示尺寸，而不必成比例.
  例如.在桌面上显示为100px缩略图的内容，可能会在移动设备上以全角显示.
• 具有分辨率倍增器的高分辨率或"Retina"设备.在这些像素上，我需要很多像素，但文件要小.

我认为对此很有希望的方法是< img srcset =".." Size =".."/> .

I think the promising approach for this is <img srcset=".." sizes=".."/>.

但是，我想知道是否应该或应该结合使用x描述符和w描述符.

However, I am wondering if or how I should combine the x-descriptor and the w-descriptor.

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

The x-descriptor specifies a relative size. But relative to what? Both the original image size and the layout width of the <img> can vary between contexts and between viewports. The viewport reports a width for the media queries, but the actual pixel width can be 2x or 3x the reported viewport width, thanks to retina displays.

w描述符指定绝对大小.对于桌面上为缩略图大小而在移动设备上为全角的图像上下文来说，这听起来要好得多.

The w-descriptor specifies an absolute size. This sounds way better for image contexts that could be in thumbnail size on desktop, and full width on mobile - or vice versa.

如何根据设备上的像素密度提供不同的jpg质量?(上述问题)

How could I serve different jpg quality depending on the pixel density on the device? (question as above)

相关问题:执行srcset和尺寸是指设备像素还是布局像素?

推荐答案

您可以执行以下操作

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

实际上，您可能希望每种质量都有多个尺寸:

In practice you probably want to have multiple sizes for each quality:

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

(并根据情况适当更改 size .)

(And change sizes as appropriate depending on context.)

这篇关于响应式img/srcset/大小:取决于设备像素密度的不同jpg质量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！