srcset单独使用不配sizes时，现代浏览器因缺失渲染宽度估算依据而默认按100vw查表选图，导致小屏加载大图；老浏览器（如IE）则仅加载src兜底图。

srcset 单独用在 上，不配 sizes，老浏览器（IE、Android 4.3 WebView）能加载 src，但现代浏览器大概率加载错图——不是兼容问题，是尺寸估算逻辑失效。

为什么写了 srcset 还是加载最大图

浏览器只在有 sizes 时才启用「按渲染宽度匹配」逻辑；没写或写错，就退化为默认按 100vw 查表。比如视口宽 375px，srcset 里只有 800w 和 1200w，它只能选 800w，哪怕你实际只渲染 200px 宽。

• sizes 必须覆盖所有断点，例如 sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"，漏掉任意区间会导致整条属性被忽略
• srcset 中每个 URL 后的 w 描述符（如 400w）必须和图片真实宽度一致，不能写 photo-400.jpg 400w 但实际图宽是 382px
• CDN 裁剪参数要对齐：如果用 https://cdn.com/img.jpg?w=400，就必须写 400w；写成 ?w=400 800w 会被跳过

IE11 及更老浏览器怎么 fallback 才可靠

它们完全不解析 srcset 和 sizes，只认 src 属性。所以 src 不是“可选项”，而是降级链唯一入口。

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

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

下载

• src 必须指向一个真实可用资源，比如 CDN 上一张 800w 主图，或 1px GIF 占位图；不能是空值、"#" 或 404 路径
• 不要混用 w 和 x：写 srcset="a.jpg 1x, b.jpg 400w" 整条会被浏览器丢弃，直接回退到 src
• 如果要用 WebP/AVIF 降级，必须改用 ，因为 srcset 本身不支持 type 判断

如何验证降级是否真生效

别看页面有没有图，要看 Network 面板里到底发了哪个请求。缓存会掩盖问题，必须禁用后硬刷。

• Chrome DevTools → Network → 勾选 Disable cache 和 Large rows
• 用设备模拟器切不同 DPR（如 iPhone 12 的 3x、Mac Retina 的 2x），然后 Ctrl+Shift+R 强制刷新，观察请求 URL 是否变化
• 右键图片 → Copy → Copy response，粘贴进新标签页确认返回尺寸是否匹配预期
• 检查 Request Headers 里有没有 Sec-CH-DPR 或 Width，没有说明浏览器没走响应式选择流程

最容易被忽略的是 sizes 和 CSS 实际渲染宽度的偏差——哪怕只差 10px，也可能让浏览器选错一档图；而 src 的可用性，在断网或 CDN 故障时就是最后一道防线，它必须始终可访问。

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