srcset本身不降级，仅提供候选资源；真正实现降级的是sizes属性与浏览器宽度匹配逻辑的协同作用。

srcset 本身不降级，它只提供候选资源；真正起降级作用的是 sizes + 浏览器的宽度匹配逻辑。单独写 srcset 而不配 sizes，Chrome 默认按 100vw 加载最大图，Safari 可能直接忽略整组属性——这不是“没生效”，而是你没给浏览器做决策的依据。

为什么 srcset 配了却没加载小图

浏览器不是根据屏幕尺寸“猜”该用哪张图，而是用 sizes 告诉它“这张图在页面里实际占多宽”，再结合设备像素比（DPR）从 srcset 中选最接近的资源。常见断点错位：

• sizes="(max-width: 768px) 100vw, 50vw" 写对了，但 CSS 把图片容器设成 max-width: 600px，导致小屏下浏览器仍按 100vw 算，永远选不到 400w 档
• srcset 里写了 photo-400w.jpg 400w, photo-800w.jpg 800w，但原图真实宽度其实是 382px 或 824px —— 宽度描述符必须和文件真实像素宽严格一致，否则匹配偏差放大
• 用了 loading="lazy"，但图片在首屏，lazy 在弱网下可能延迟触发预加载，导致 fallback 到 src（如果写了）或空白

srcset + sizes 必须共存的硬规则

缺一不可，且顺序、写法有强约束：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• sizes 必须是媒体条件 + 宽度值组合，例如 sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"；不能只写 sizes="50vw"
• srcset 中每个资源后必须跟 w 描述符（如 400w），禁用 x（如 2x）混用，否则部分浏览器静默跳过整组
• src 属性必须保留：它是 IE11、旧 Safari 等不支持 srcset 的唯一兜底，不能省略
• 所有 srcset 图片必须原始像素尺寸一致（比如都是 400×225），否则切换时 layout shift 明显

开发阶段怎么一眼看出是否生效

别只看页面显示是否正常，重点确认“浏览器到底请求了哪张图”：

• 打开 Chrome DevTools → Network → 勾选 Disable cache 和 Large rows
• 用设备模拟器切不同 DPR（iPhone 12 是 3x，Mac Retina 是 2x），刷新后观察请求 URL 后缀是否变化（如从 800w.jpg 变成 1200w.jpg）
• 右键图片 → Copy → Copy response，粘贴到编辑器里看实际返回尺寸，验证是否和 srcset 描述符一致
• 如果始终只加载 src 地址，检查是否漏写了 sizes，或 sizes 的媒体查询根本没命中（比如忘了加 ）

最容易被忽略的是：sizes 不是 CSS 尺寸声明，它不改变布局；它只是告诉浏览器“请按这个宽度去算”，而这个宽度必须和真实渲染结果完全对齐——哪怕 CSS 里只差一个 padding: 1px，都可能导致匹配错档。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！