问题
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.
回答1:
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.
来源：https://stackoverflow.com/questions/35170139/do-srcset-and-sizes-refer-to-device-pixels-or-layout-pixels