一：引言

我们经常在img上看到srcset属性，那么作用是什么呢？

二：定义

1：目的：

根据设备特性（分辨率/屏幕尺寸）自动选择最优图像资源，提升加载效率与显示效果，适配多分辨率屏幕

三：代码

1. ‌适配多分辨率屏幕

<img src="fallback.jpg"  
     srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1024w"  
    >  
:

2. ‌响应式宽度适配‌（需配合 sizes 属性）

<img src="fallback.jpg"  
     srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1024w"  
     sizes="(max-width: 768px) 100vw, 50vw"> 

四：场景

1：电商大图流‌：针对折叠屏/VR设备推送8K图

‌2：移动端H5‌：节省低端机流量消耗（自动降级1x图）

‌3：PWA应用‌：预加载适配不同DPR的缓存资源

五：流程

1：检测设备像素比（DPR）和视口尺寸

2：根据sizes计算所需图片宽度

3：从srcset中选‌≥需求宽度‌且‌体积最小‌的图

4：不支持srcset的浏览器回退到src

六：总结

1：srcset可以按需加载匹配尺寸，避免了带宽消耗浪费，

2：自动匹配最佳清晰度，根据设备显示，也避免了模糊