Responsive img/srcset/sizes: Different jpg quality depending on device pixel density?

3
votes

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
htmlsrcsetresponsive-images
Interesting answer here, stackoverflow.com/a/31099581/246724 "compressive picture pattern" – donquixote
Your question has an answer here on How to use srcset and sizes for responsive images – Pmpr

1 Answers

2
votes

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