在 HTML 中，<img>元素的srcset和sizes属性是实现响应式图片加载的重要工具，它们能让网页根据不同设备的屏幕尺寸和分辨率，自动选择并加载最合适的图片，从而优化页面性能和提升用户体验。下面将详细介绍这两个属性及其结合使用的方法。
一、srcset 属性
srcset属性用于指定一组图像源，以及每个图像源对应的宽度描述符（w）或者像素密度描述符（x）。浏览器会依据设备的特性（如屏幕宽度、像素密度）来挑选最合适的图像进行加载。
1. 基于像素密度（x）的用法
当我们有不同像素密度的图片，分别适配普通屏幕（1x）、Retina 屏幕（2x）以及更高像素密度屏幕（3x）时，代码示例如下：
html
<img src="image-1x.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x" alt="示例图片">在这个例子里，src属性指定了默认图片，当浏览器不支持srcset属性时就会加载该图片。而srcset属性提供了额外的图片选项，浏览器会根据设备的像素密度来决定加载哪一张。比如，设备屏幕是普通的 1x 像素密度，就加载image-1x.jpg；若是 2x 像素密度的 Retina 屏幕，就加载image-2x.jpg。
用 SVG 图示来表示这种情况：
2. 基于宽度（w）的用法
当希望根据不同屏幕宽度加载不同宽度的图片时，可以使用宽度描述符w。例如：
html
<img src="image-320w.jpg" srcset="image-320w.jpg 320w, image-640w.jpg 640w, image-1280w.jpg 1280w" alt="示例图片">这里srcset属性列出了不同宽度的图片及其对应的宽度值（320w、640w、1280w）。浏览器会根据设备屏幕宽度来选择合适的图片，比如屏幕宽度为 400px 时，浏览器可能会选择image-640w.jpg，因为它的宽度更接近设备屏幕可展示的宽度（具体选择算法因浏览器而异）。
对应的 SVG 图示：
二、sizes 属性
sizes属性用于定义一组媒体条件（类似 CSS 中的媒体查询）以及每个媒体条件下图像所占视口宽度的百分比或具体像素值。它和srcset属性一起使用，能帮助浏览器更精确地选择合适的图片。
sizes属性的值是一个逗号分隔的列表，每个部分由两部分组成：媒体条件和图像宽度值。例如：
html
<img src="default.jpg" 
  srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1280w" 
  sizes="(max-width: 320px) 100vw, (max-width: 640px) 50vw, (max-width: 1280px) 33vw, 25vw" 
  alt="示例图片">在这个例子中：
-
当视口宽度小于等于 320px 时，图像将占据整个视口宽度（
100vw）。 -
当视口宽度在 320px 到 640px 之间时，图像将占据视口宽度的 50%（
50vw）。 -
当视口宽度在 640px 到 1280px 之间时，图像将占据视口宽度的 33%（
33vw）。 -
当视口宽度大于 1280px 时，图像将占据视口宽度的 25%（
25vw）。
用 SVG 图示来展示不同视口宽度下图像宽度变化的情况：
三、srcset 和 sizes 结合使用时图片的选择
当srcset（带w描述符）和sizes结合使用时，浏览器选择图片的核心逻辑是计算每个图片的 "有效像素密度"，然后选择最匹配当前设备像素密度的图片。
1. 核心计算步骤
-
确定当前匹配的
sizes规则 ：浏览器根据当前视口宽度，从sizes属性中找到第一个满足条件的媒体查询，获取图片在当前视口下的显示宽度（单位通常为vw或固定像素）。 -
将显示宽度转换为实际像素值 ：若
sizes中是vw单位（1vw = 视口宽度的 1%），则显示宽度（px）= 视口宽度（px）× 百分比；若sizes中是固定像素（如300px），则直接使用该值。 -
计算每个图片的 "有效像素密度" ：对
srcset中每个带w描述符的图片，用图片宽度除以显示宽度，公式为：有效像素密度 = 图片宽度（w 值）÷ 显示宽度（px）。 -
选择最合适的图片：浏览器将计算出的 "有效像素密度" 与设备的实际像素密度（如 1x、2x、3x）对比，选择最接近且不小于设备像素密度的图片。
2. 实例演示
假设我们有如下代码：
html
<img src="default.jpg"
  srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 50vw, 30vw"
  alt="示例图">场景 1：设备为 2x 像素密度，视口宽度 500px
-
匹配
sizes规则：视口宽度 500px 满足(max-width: 600px)，因此sizes取50vw。 -
计算显示宽度：50vw = 500px × 50% = 250px（图片在当前视口显示宽度为 250px）。
-
计算每个图片的有效像素密度：
-
small.jpg（400w）：400 ÷ 250 = 1.6x
-
medium.jpg（800w）：800 ÷ 250 = 3.2x
-
large.jpg（1200w）：1200 ÷ 250 = 4.8x
-
-
选择图片：设备像素密度为 2x，最接近且不小于 2x 的是
medium.jpg（3.2x），因此加载该图片。
场景 2：设备为 1x 像素密度，视口宽度 1000px
-
匹配
sizes规则：视口宽度 1000px 不满足(max-width: 600px)，因此sizes取默认的30vw。 -
计算显示宽度：30vw = 1000px × 30% = 300px。
-
计算每个图片的有效像素密度：
-
small.jpg（400w）：400 ÷ 300 ≈ 1.33x
-
medium.jpg（800w）：800 ÷ 300 ≈ 2.67x
-
large.jpg（1200w）：1200 ÷ 300 = 4x
-
-
选择图片：设备像素密度为 1x，最接近的是
small.jpg（1.33x），因此加载该图片。
3. 关键注意点
-
浏览器会优先保证图片清晰度，若计算出的有效像素密度略小于设备像素密度，可能会选择稍大的图片（避免模糊）。
-
sizes的作用是告诉浏览器图片在当前页面中实际占多大空间，配合srcset的w描述符才能精准匹配。 -
若不写
sizes，浏览器默认sizes="100vw"（图片占满视口宽度），可能导致选择的图片过大或过小。
通过合理运用srcset和sizes属性，以及了解它们结合使用时图片的选择逻辑，我们可以为不同设备提供最适配的图片，提升网页性能和用户体验。同时，别忘了在img标签中设置src属性，以确保在不支持srcset和sizes属性的浏览器中也能正常显示图片。