真正响应式图片需 srcset 与 sizes 配合且必设 src 兜底；src 设最小图，sizes 精准匹配布局宽度，w/x 描述符不可混用，width/height 属性防 cls。
只写 max-width: 100% 不算响应式图片，它不减少加载体积，手机照样下载 2MB 的桌面图——真正起作用的是 srcset 和 sizes 的配合，缺一不可。
srcset 必须和 src 同时存在才能生效
浏览器不会只靠 srcset 加载图片。src 是强制兜底项：旧浏览器（如 IE、Safari ≤12.0）直接忽略 srcset，只认 src；现代浏览器没 src 也会降级失败或触发警告。
-
src应设为最小可用尺寸图（如photo-400w.jpg），确保弱网/无 JS 场景下仍可显示 - 漏写
src时，DevTools Network 面板里可能根本看不到图片请求——不是报错，是静默跳过 -
srcset候选列表中路径写错一个，整条属性可能被浏览器忽略（尤其在 Safari 旧版中）
sizes 写错等于没写 srcset
sizes 不是 CSS，也不是估算值，它是浏览器计算“这张图该占多宽”的唯一依据。写错或缺失，浏览器就按默认 100vw 算，小屏也拉大图。
- 常见错误：
sizes="(max-width: 768px) 100vw, 50vw"但实际 CSS 中该图在桌面端被 flex 容器压缩到 300px 宽 → 浏览器仍按 50vw（比如 600px）匹配，选了 800w 图，浪费 400KB - 媒体查询必须与真实布局断点一致：CSS 用
@media (max-width: 768px)，sizes就不能写成(max-width: 767px) - 旧版 Edge（EdgeHTML）会因
sizes="(max-width: 768px)"中的空格直接失效——得写成(max-width:768px)才行
w 描述符和 x 描述符不能混用
srcset 支持两种单位：400w（表示图片固有宽度）和 2x（表示设备像素比），但二者逻辑不同、适用场景不同，混写会导致整个 srcset 被浏览器跳过。
- 用
w：适合响应式布局（如卡片内图片、全宽 banner），必须配sizes才能精准匹配 - 用
x：适合固定尺寸图标/头像（如width="100" height="100"），浏览器只看 DPR，不关心布局宽度 - 错误示例：
srcset="icon-100.jpg 100w, icon-200.jpg 2x"→ 混用单位，Chrome 可能加载第一个，Safari 可能全跳过
为什么加了 srcset 还是加载最大图
这不是 bug，是浏览器严格按规则匹配的结果：它只看 sizes 算出的渲染宽度 + 设备 DPR，然后在线性候选列表里找最接近的源。没有“智能裁剪”，只有“最接近”。
- 检查 DevTools → Network → 图片请求的 Request Headers，确认是否有
Sec-CH-DPR或Width字段——没有说明响应式逻辑根本没触发 - 如果
sizes返回 320px 渲染宽，而srcset只提供400w和800w，浏览器只能选400w；但若你提供320w和640w，它就会选320w - 别依赖“大概差不多”：视口 500px 时
sizes="(max-width: 480px) 100vw, 50vw"会返回 250px，此时srcset中最近的240w比400w更合适
最容易被忽略的其实是 width 和 height 属性——它们不是可选项，而是防布局偏移（CLS）的硬性要求。哪怕用了 srcset，没设这两个属性，图片加载瞬间页面仍会跳动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
