用 srcset + sizes 实现响应式图片时，必须严格区分 w（对应布局宽度，需配 sizes）和 x（对应设备像素比，不依赖 sizes），严禁混用；sizes 必须与真实 CSS 渲染宽度一致，否则选图失准；src 是必填兜底项，应设为中等清晰度图而非最小图。

直接用 srcset + sizes 就能实现浏览器自动选图，但写错一个参数，它就静默回退到 src——连报错都不会有，你只能在 Network 面板里看到加载了 4K 图却只显示 200px 宽。

srcset 里该用 w 还是 x？别混着写

用 w（如 "photo-800.jpg 800w"）对应页面布局宽度变化；用 x（如 "photo.jpg 2x"）对应设备像素比（DPR）。两者逻辑不同，浏览器行为也不同：

• w 必须配 sizes 才生效，否则浏览器默认按 100vw 算，小屏也拉大图
• x 不依赖 sizes，但只响应 DPR，不响应视口缩放——比如 iPad Pro 在横竖屏切换时渲染宽度变了，x 却不会换图
• 严禁混用：srcset="a-400w.jpg 400w, b@2x.jpg 2x" 是未定义行为，Chrome 可能整个忽略该属性
• 若需兼顾 DPR 和视口，优先用 w + sizes；只有纯图标、固定尺寸组件才考虑 x

sizes 属性写错等于没写

sizes 不是“建议宽度”，而是告诉浏览器：“这张图在当前布局下，CSS 渲染宽度会是多少”。它必须和真实 CSS 表现一致，否则选图失准：

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

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

下载

• 写成 sizes="(max-width: 768px) 100vw, 50vw" 意味着：≤768px 时占满视口，否则占一半；如果实际 CSS 把图片限制在 max-width: 300px，那这个 sizes 就高估了 2–4 倍
• 漏掉单位（如写 "50" 而非 "50vw"）或括号不闭合（如 "(max-width: 768px 100vw"），浏览器直接忽略整条 sizes
• 移动端常被忽略的点：某些 Android WebView 对媒体查询语法更敏感，min-width 比 max-width 更稳，可写成 sizes="(min-width: 769px) 50vw, 100vw"

src 是必填项，不是可选项

没有 src，老浏览器（IE、iOS 12 以下 Safari、部分低版本 WebView）会完全不渲染图片，连 alt 文字都不触发：

• src 应指向一个中等清晰度、体积适中的版本（如 768w 或 800w），作为兜底而非“最小图”
• 不要把 src 指向 200w 小图再指望 srcset 补救——浏览器不会“升级”src，只会用它 fallback
• Network 面板里如果某张图请求头里没有 Sec-CH-DPR 或 Width 字段，说明浏览器根本没走响应式逻辑，大概率是 src 存在但 srcset/sizes 有语法错误

最隐蔽的问题往往出在「看似生效」：DevTools 显示加载了 800w 图，但实际渲染宽度只有 320px，说明 sizes 偏大或断点没覆盖真实布局。别信代码写了就对，要对着 Network 请求宽度和 Elements 面板里的 computed width 一帧帧对齐。

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