很多站点图片显示尺寸只有 300px 宽，却让手机下载 2000px 的原图。响应式图片属性就是为解决这个浪费而生的。
一、srcset：给浏览器一张候选清单
srcset 里列出同一张图的不同分辨率版本和各自宽度，浏览器根据设备像素比和视口宽度自行选择，不用 JavaScript。
二、sizes：告诉浏览器图片会显示多大
只有 srcset 时浏览器只能按像素比猜；sizes 属性进一步描述”这张图在不同断点下的显示宽度”，让选择更精确，比如宽屏下占半栏、窄屏下占满宽。
三、别忘 picture 的场景
需要”不同断点换完全不同的图”（比如横版改竖版裁切）时，用 <picture> 配合 source media 更直接；单纯的分辨率适配则交给 srcset 就够。
四、懒加载顺手加上
loading="lazy" 一行属性即可让首屏外的图片延迟加载，与响应式图片配合，首屏体积通常能降一大截。
五、验证方法
浏览器开发者工具的 Network 面板按 Img 过滤，缩放窗口或切换设备模拟，观察实际请求的是哪个尺寸文件，就能确认配置生效。
