img 的 srcset 属性

问题

如何根据不同屏幕密度和视口宽度加载合适的图片？

解答

基于屏幕密度

srcset 属性可以根据屏幕密度自动加载不同分辨率的图片：

<img src="image-128.png" srcset="image-256.png 2x" />

这段代码会在 1x 屏幕密度下加载 image-128.png，在 2x 屏幕密度下加载 image-256.png。

基于图片宽度

为了避免为每种屏幕密度（1x、2x、3x、4x）都准备图片，可以使用 w 描述符配合 sizes 属性：

<img src="image-128.png"
     srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
     sizes="(max-width: 360px) 340px, 128px" />

srcset 说明：

• 128w、256w、512w 表示图片的实际宽度
• 浏览器会根据设备像素比和显示尺寸自动选择最合适的图片

sizes 说明：

• 语法：sizes="[media query] [length], [media query] [length], [默认值]"
• 示例中表示：视口宽度 ≤ 360px 时显示 340px，否则显示 128px
• 浏览器结合 sizes 和设备像素比，从 srcset 中选择最小的可用图片

关键点

• srcset 配合 x 描述符可以根据屏幕密度加载图片
• srcset 配合 w 描述符和 sizes 属性可以根据视口宽度加载图片
• w 单位表示图片的实际宽度，浏览器会自动计算并选择最优图片
• sizes 定义图片在不同视口下的显示尺寸，帮助浏览器做出选择