1

Questions about the <img srcset=".." sizes=".."/> html tag + attributes for responsive images.

  • On a 3x retina display (3 * 341 = 1023), does a w-descriptor in srcset refer to device pixels (1023px) or to layout/css pixels (341px) ?
    EDIT: Obviously the w-descriptor specifies the image resolution, which has nothing to do with either the device pixels or the css pixels.
    But the question is, how does the browser pick one of the provided images? Based on device pixels, or based on css pixels?
  • Does the media query in the sizes attribute refer to device pixels or to layout pixels?
  • Do image width px in the sizes attribute refer to device pixels or to layout pixels?

My own guess would be that sizes refers to layout pixels always. But would prefer if this can be confirmed.

(Ideally I would want to serve different jpg quality depending on the pixel density on the device.. Retina = low quality, high resolution. But this is probably a separate question)

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

EDIT: When I say "device pixels", I really mean the physical pixels on the device.

Community
  • 1
  • 1
donquixote
  • 4,877
  • 3
  • 31
  • 54
  • 1
    The TL;DR version is just ignore pixel density. Device pixels and CSS pixels dont matter provided you [set the correct meta tag in your head](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=en). – marblewraith Feb 03 '16 at 06:45
  • @MatthewRath Not really sure where your advice is headed, and what would happen with or without the meta tag. I'll wait for a more lengthy answer. – donquixote Feb 03 '16 at 06:59
  • See also http://stackoverflow.com/a/31099581/246724 – donquixote Feb 03 '16 at 07:14
  • 1
    I'm not going to bother explaining. If you can't be bothered to go to the referenced google fundamentals link and read that the metatag sets device pixels and 'layout pixels' to 1:1 scaling thus making your question regarding which kind of pixels different width properties are based on redundant that's your problem. The only other thing ill do is provide a link to CSS tricks related directly the use case of [responsive images](https://www.youtube.com/watch?v=pw6shMBnISQ). – marblewraith Feb 03 '16 at 07:30
  • Guess what.. my CMS or my theme already gave me the meta tag for free! So yes, I think I get what it does, also from [this blog post](http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972). When writing the question, I was assuming that this behavior is already active. My bad. – donquixote Feb 03 '16 at 17:33
  • Also, maybe I chose misleading terms: "width=device-width". On a 1080px mobile, the "device-width" would be 360px. But when I was talking about "device pixels", I meant the full 1080px. – donquixote Feb 03 '16 at 17:37
  • The meta tag + "ignore pixel density" is good advice, but it is not helpful with regard to srcset. Obviously, I DO care about physical pixels, because I want retina displays to show high-resolution images. Whereas the sizes attribute and media queries all refer to CSS pixels. Interestingly, I hardly find any articles on google that deal with the effect of the meta tag on srcset. I guess either because there is little connection, or because most people already have the meta tag in place. – donquixote Feb 03 '16 at 17:42
  • This said: A lot of my original question answers itself, in hindsight. Everything in sizes attribute refers to css pixels. The w-descriptor in srcset refers to the physical px width of the image file. The only question is how the browser chooses which image version to display, if reported device width != physical px width. – donquixote Feb 03 '16 at 17:45

1 Answers1

2

But the question is, how does the browser pick one of the provided images? Based on device pixels, or based on css pixels?

This is technically up to the implementation, but the idea is that it should be based on device pixels; if you have a screen with a high pixel density, you want a bigger image. If you zoom in, you may also want a bigger image.

Does the media query in the sizes attribute refer to device pixels or to layout pixels? Do image width px in the sizes attribute refer to device pixels or to layout pixels?

These are both CSS px.

zcorpan
  • 1,243
  • 6
  • 11