Do srcset and sizes refer to device pixels or layout pixels?

[亡魂溺海] 提交于 2019-12-25 03:34:18

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!