问题
I am looking for a responsive image strategy that allows to serve different jpg quality based on the device pixel density.
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.
QUESTION:
Is this somehow possible with <img srcset=".." sizes=".." />?
Background / scenario
- Different original images with different original dimensions.
- Different image display contexts: As a gallery thumbnail, embedded in a blog post, in a modal box, full screen..
- Responsive layout, with media queries that change the display size of those images, not necessarily proportional.
E.g. a what is displayed as a 100px thumbnail on desktop, might be displayed in full width on mobile. - High-resolution or "Retina" devices, with a resolution multiplier. On these I want many pixels, but low file size.
Solutions I'm considering
I think the promising approach for this is <img srcset=".." sizes=".."/>.
However, I am wondering if or how I should combine the x-descriptor and the w-descriptor.
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.
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.
Questions / Related
How could I serve different jpg quality depending on the pixel density on the device? (question as above)
Related question: Do srcset and sizes refer to device pixels or layout pixels?
回答1:
You can do something like this
<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>
(And change sizes as appropriate depending on context.)
来源：https://stackoverflow.com/questions/35170336/responsive-img-srcset-sizes-different-jpg-quality-depending-on-device-pixel-den