3

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?

Community
  • 1
  • 1
donquixote
  • 4,877
  • 3
  • 31
  • 54
  • Interesting answer here, http://stackoverflow.com/a/31099581/246724 "compressive picture pattern" – donquixote Feb 03 '16 at 07:08
  • Your question has an answer here on [How to use srcset and sizes for responsive images](https://stackoverflow.com/questions/35099471/how-to-use-img-device-pixel-ratio-srcset-sizes-in-responsive-images-for-retina) – Peyman Mohamadpour Jul 02 '19 at 07:39

1 Answers1

2

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

zcorpan
  • 1,243
  • 6
  • 11
  • Ok, so the trick here is the "min-resolution" media query that can differentiate between different physical resolutions? Whereas other media queries ("min-width") refer to css pixels. – donquixote Feb 15 '16 at 17:05