srcset和尺寸是指设备像素还是布局像素？ [英] Do srcset and sizes refer to device pixels or layout pixels?

问题描述

关于< img srcset =..sizes =../> html标签+响应图片的属性问题。

• 在3x视网膜显示器（3 * 341 = 1023）上，srcset中的w描述符是指设备像素（1023px）还是布局/ css像素（341px）？
  
  编辑：显然，w描述符指定图像分辨率，它与设备像素或css像素无关。
  
  但是问题是，浏览器如何挑选提供的图像之一？基于设备像素，还是基于CSS像素？


• 尺寸属性中的媒体查询是指设备像素还是布局像素？


• size属性中的图像宽度px是指设备像素还是布局像素？

我个人的猜测是尺寸总是指布局像素。但愿意如果这可以得到证实。

（理想情况下，我希望根据设备上的像素密度提供不同的jpg质量。视网膜=低质量，高但这可能是一个单独的问题）

完整的场景在这里：响应img / srcset / sizes：不同的jpg质量取决于设备的像素密度？

编辑：当我说设备像素时，我的意思是设备上的物理像素。

方案

但问题是，浏览器如何挑选提供的图像之一？基于设备像素，还是基于css像素？

这在技术上取决于实现，但其想法是应该是基于设备像素;如果您有高像素密度的屏幕，则需要更大的图像。

尺寸属性中的媒体查询是指设备像素还是布局像素？
size属性中的图像宽度px是指设备像素还是布局像素？

这些都是CSS px。

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.

解决方案

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.

这篇关于srcset和尺寸是指设备像素还是布局像素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！