viewport未生效则所有响应式图片逻辑失效；sizes必须严格匹配CSS渲染宽度，srcset不可混用w/x描述符，且src为必需兜底。
浏览器在解析 HTML 阶段就发出了图片请求，srcset 和 sizes 写错，图片就永远加载错——不是“看起来还行”，而是带宽白耗、首屏变慢、用户在 4G 下多等两秒。
viewport 标签没生效，后续所有响应式逻辑全失效
这是最隐蔽也最致命的前置错误。如果 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 没写对或没放在 <head> 最顶部，浏览器会按桌面宽度（通常是 980px）解析 DOM，srcset 和 sizes 的计算全部错乱。
- 常见错误包括：写在
<body>里、动态 JS 插入、内容写成width=375、漏掉initial-scale=1.0、SSR 渲染时被遗漏 - 验证方式：Chrome DevTools 切手机模式 → 右键“查看网页源代码”，确认该标签在
<head>开头附近，且仅出现一次 - 同一页面重复声明两次会导致部分浏览器静默忽略后一个，务必 grep 检查
sizes 属性必须和 CSS 实际渲染宽度严格一致
sizes 不是 CSS，不支持 calc()，也不是“大概占多少”，它是一串字符串，告诉浏览器“这张图在当前视口下 *会渲染成多宽*”。写错就等于没写，浏览器直接退化为只加载 src。
- 比如图片在栅格中占 1/3 宽，断点从 768px 开始，
sizes就该是"(max-width: 767px) 100vw, 33.33vw"，不是硬写100vw - 漏写中间断点，如
"(max-width: 480px) 100vw, 33vw"（缺768px段），整个属性会被 Safari / Chrome 忽略 - 旧版 Edge（EdgeHTML）对空格敏感：
(max-width: 768px)会失效，必须写成(max-width:768px)
srcset 混用 w 和 x 描述符，浏览器直接跳过整个属性
srcset 支持两种语法：400w（固有宽度）和 2x（像素密度），但二者不能混用。混了就等于没写，老浏览器 fallback 到 src，新浏览器也放弃匹配逻辑。
立即学习“前端免费学习笔记（深入）”；
- 正确写法一（推荐 w 单位）：
srcset="img-400w.jpg 400w, img-800w.jpg 800w"，必须配sizes - 正确写法二（x 单位）：
srcset="img-1x.jpg 1x, img-2x.jpg 2x"，此时sizes可省略，但无法响应布局变化 - 错误写法：
srcset="img-400w.jpg 400w, img-2x.jpg 2x"—— 浏览器静默忽略整个srcset -
src不可省：它是所有浏览器都识别的兜底地址；只写srcset会导致 IE、旧 WebView 完全不显示图片
picture 的 media 属性写错，Network 面板里根本看不到请求
<source> 的 media 是完整 CSS 媒体查询，语法错一点，浏览器就跳过，不报错也不请求，直接 fallback 到 <img>。
- 错误示例：
media="max-width: 768px"（缺括号）、media="768px"（非媒体查询）、media="screen and (max-width: 768px)"（冗余可能触发降级） - 临界冲突常见：
media="(max-width: 768px)"和media="(min-width: 768px)"在 768px 宽度下同时命中，但只有前者生效，建议改用开区间：max-width: 767px→min-width: 768px→min-width: 1024px -
type必须拼写准确：image/webp有效，image/webp;或image/webp;charset=utf-8会被跳过
真正难的不是写对语法，而是把 sizes 值和你真实 CSS 布局中图片的最终渲染宽度对齐——别信设计稿标注，用 DevTools 的 Layout 面板实测，尤其注意 Flex/Grid 容器里 min-width: 0 是否漏加。
