<img> 标签的 srcset 属性是 HTML5 引入的一个响应式图像特性，它的主要作用是为不同的设备和屏幕条件提供多个图像源，让浏览器能够根据当前的显示环境（如屏幕分辨率、像素密度、视口大小等）自动选择最合适的图像进行加载。
这解决了在高分辨率屏幕（如 Retina 显示屏）上显示模糊图像，或在小屏幕设备上加载过大图像浪费带宽的问题。
srcset 的核心作用
- 适配不同分辨率的屏幕：
- 为高 DPI（高像素密度）屏幕提供高分辨率图像，确保图像清晰锐利。
- 为低 DPI 屏幕提供标准分辨率图像，避免加载不必要的大文件。
- 优化性能和带宽：
- 在移动设备或小屏幕设备上，优先加载较小的图像文件，减少数据消耗和加载时间。
- 避免在不需要的情况下加载超大图像。
- 提升用户体验：
- 无论用户使用手机、平板还是高分辨率显示器，都能看到清晰且加载快速的图像。
srcset 的语法与用法
srcset 属性的值是一个由逗号分隔的图像源列表。每个列表项包含：
- 图像 URL
- 空格
- 描述符（
w或x）
1. 使用 x 描述符（基于像素密度）
这是最常见和最简单的用法，用于适配不同 DPR (Device Pixel Ratio) 的屏幕。
<img
src="image-1x.jpg"
srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x"
alt="描述性文字"
>image-1x.jpg 1x：适用于标准分辨率屏幕（DPR=1）。image-2x.jpg 2x：适用于高分辨率屏幕（如 Retina，DPR=2）。image-3x.jpg 3x：适用于超高分辨率屏幕（DPR=3）。
浏览器选择逻辑：
浏览器会根据设备的 DPR 选择最匹配的图像。例如：
- 在 DPR=1 的设备上，加载
image-1x.jpg。 - 在 DPR=2 的设备上，加载
image-2x.jpg。 - 在 DPR=3 的设备上，加载
image-3x.jpg。
注意：
src属性是必需的，作为不支持srcset的旧浏览器的回退方案。
2. 使用 w 描述符（基于视口宽度）
用于根据视口宽度提供不同尺寸的图像，通常与 sizes 属性配合使用，实现更精细的响应式控制。
<img
src="image-small.jpg"
srcset="image-small.jpg 300w, image-medium.jpg 600w, image-large.jpg 1200w"
sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 33vw"
alt="描述性文字"
>w描述符：300w表示这张图像的固有宽度是 300 像素。sizes属性：告诉浏览器在不同条件下，这个<img>元素在页面中预计会占据多宽。(max-width: 480px) 100vw：当视口宽度 ≤ 480px 时，图片宽度为视口宽度的 100%。(max-width: 1024px) 50vw：当视口宽度 ≤ 1024px 时，图片宽度为视口宽度的 50%。33vw：其他情况下，图片宽度为视口宽度的 33%。
浏览器选择逻辑：
- 浏览器根据当前视口宽度和
sizes规则，计算出<img>元素的预期显示宽度。 - 结合设备的 DPR，计算出需要的图像资源宽度。
- 从
srcset列表中选择一个最接近且不小于所需宽度的图像。
示例：
假设在 DPR=2 的手机上（视口宽度 375px）：
sizes计算：100vw= 375px。- 考虑 DPR，需要的图像宽度：375px * 2 = 750px。
srcset中最接近且 ≥ 750px 的是image-large.jpg 1200w（虽然 600w * 2 = 1200px，但实际需要 750px，1200w 足够）。- 浏览器加载
image-large.jpg。
何时使用 x 与 w
- 使用
x描述符：当你主要关心设备的像素密度（DPR），并且图像在不同设备上的显示尺寸大致相同时。例如：图标、头像、固定尺寸的 banner。 - 使用
w描述符 +sizes：当你希望根据视口大小改变图像的显示尺寸，并且有对应不同尺寸的图像资源时。例如：响应式布局中的文章主图、背景图。
总结
srcset 属性的作用是提供多张不同分辨率或尺寸的图像源，让浏览器智能选择最适合当前设备和显示条件的图像进行加载，从而：
- 在高分辨率屏幕上提供清晰图像。
- 在低分辨率或小屏幕上节省带宽和加载时间。
- 提升网站的性能和用户体验。
它是构建现代响应式网站不可或缺的工具。通常建议优先使用 x 描述符处理 Retina 屏幕，而使用 w + sizes 处理复杂的响应式布局场景。
THE END
