Responsive Images —— Pixel, DPR...
Physical Pixel
- Pixel(abbr. px): 红绿蓝(Red, Blue, Green)三个发光二极管组成一个物理像素(Physical Pixel)，组成一个最小的单元
- Resolution: 描述一块屏幕/图片有多少个Pixel，iPad 12.9-inch分辨率为2048x2732，即横向有2048个像素，纵向2732个像素
- Inch: 1 inch =2.54 centimeters，一般用英尺描述屏幕尺寸，12.9inch意思是屏幕对角线长度为12.9inch，即32.766 cm
在屏幕评测的视频中，经常会遇到Pixels Per Inch(abbr. PPI)，概念正如字面意思，表示显示设备上每英寸（2.54cm）含有多少个物理像素。还是以iPad Pro 12.9 inch为例：
$$
PPI = \sqrt{2048^2 + 2732^2} / 12.9 \approx 264
$$
另外一个经常一起出现的名词是DPI（Dots Per Inch），通常是在打印/图像扫描等领域出现，可以表示打印设备或图像文件在每英寸能打印（或设计）多少个点（dots）
CSS Pixel
前面提到的物理像素概念引出了一个问题：如果网页直接使用物理像素进行布局，那么在不同设备上会出现巨大的显示差异。
例如，以下几个不同的显示设备为例，假设要显示 font-size: 16px 的文字
| Display Device | Display Width | Resolution(px) | Pixel Pitch | Picture Width |
|---|---|---|---|---|
| Dell P2722H | 59.7888cm | 1920 x 1080 | 0.311 mm | 0.4976 cm |
| iPad Pro-12.9 Inch | 21.49cm | 2048 x 2732 | 0.096 mm | 0.1536 cm |
| Samsung S24+ | 7.59cm | 3120 x 1440 | 0.05mm | 0.08 cm |
从表格可以看出，如果直接使用物理像素，同样的16px文字在不同设备上的实际大小会相差悬殊：
- Dell显示器上：16 × 0.311mm = 4.976mm
- iPad上：16 × 0.096mm = 1.536mm
- 手机上：16 × 0.05mm = 0.8mm
这种差异会导致严重的用户体验问题：同样大小的按钮在某些设备上小得点不到，在某些设备上大得无法容纳多个元素。
为了解决这个问题，浏览器使用设备像素比（DPR）来建立CSS像素和物理像素之间的映射关系。在实际渲染时，浏览器会根据设备的DPR将CSS像素转换为对应数量的物理像素：
- DPR = 1：老式屏幕，一比一映射
- DPR = 2：一个 CSS 像素用 2×2 物理像素绘制
- DPR = 3：同理，一个CSS像素用 3x3 物理像素绘制
Rendered Size & Intrinsic Size
了解了DPR的概念后，我们回到响应式图片的核心问题：如何为不同设备提供合适分辨率的图片？
在DevTools中可以看到图片的两个重要尺寸：Rendered Size 和 Intrinsic Size
- Rendered Size：单位为CSS Pixel，表示图片在页面上显示的逻辑尺寸
- Intrinsic Size：单位为Physical Pixel，表示图像文件的实际像素尺寸
响应式图片的实际应用
在DevTools的console中打印 window.devicePixelRatio，如果显示2，说明当前设备的DPR为2，即一个CSS像素需要用2×2个物理像素来绘制。
这时浏览器会智能地选择图片资源：如果图片的Rendered Size是879px（CSS像素），浏览器会请求横向像素个数与 879 × 2 = 1758 最相近的资源，比如选择 2000w 的图片。这样在高DPR屏幕上显示时不需要像素扩充，避免了图片模糊的情况。
srcset 的实际应用
基于上述像素概念，我们可以使用 srcset 属性来实现真正的响应式图片：
1
2
3
4
5
<img src="image-1x.jpg"
srcset="image-1x.jpg 1x,
image-2x.jpg 2x,
image-3x.jpg 3x"
alt="Responsive Image">或者基于宽度描述符：
1
2
3
4
5
6
7
<img src="image-800w.jpg"
srcset="image-400w.jpg 400w,
image-800w.jpg 800w,
image-1200w.jpg 1200w,
image-1600w.jpg 1600w"
sizes="(max-width: 768px) 100vw, 50vw"
alt="Responsive Image">浏览器会根据设备的DPR、视口大小等因素，自动选择最合适的图片资源进行加载。
Ref
Responsive Images —— Pixel, DPR...