响应式图片核心是提供线索让浏览器自主选择最适图片，而非强制分发；关键在于media、srcset与sizes三者协同正确——任一括号错误、sizes缺失或type与响应头不一致，均导致整组静默退化为<img src>。
响应式图片的核心不是“强制分发”，而是提供线索，让浏览器自己选最合适的图。关键不在写多少资源，而在 media、srcset 和 sizes 三者是否协同正确——错一个括号、漏一个 sizes、type 和响应头不一致，整组就静默退回到 <img src>。
用 <picture> 实现多维度适配（视口 + DPR + 格式）
当需要不同构图（比如移动端裁切人脸、桌面端展示全景）或同时兼顾格式与分辨率时，<picture> 是唯一可靠方案：
-
media 必须是合法 CSS 媒体查询：写成
media="(max-width: 768px)"✅，media="max-width: 768px"❌（缺括号直接被忽略） -
断点要互斥且顺序合理：推荐开区间写法，如
(max-width: 479px)→(min-width: 480px) and (max-width: 1023px)→(min-width: 1024px)；避免(min-width: 768px)和(min-width: 1024px)同时存在，否则 1024px 设备永远命中第一个 -
type 必须和服务端 Content-Type 完全一致：写
type="image/webp"，但服务器返回text/plain或image/jpg，Chrome 会标记blocked:mime-type，该<source>直接失效 -
每个 <source> 必须有 srcset 或 src，空
<source>被跳过；末尾的<img>是强制回退，src和alt都不可为空
用 <img srcset> 简化 DPR 或布局宽度适配
不需要换构图，只希望 Retina 屏自动加载双倍图，或按容器宽度加载合适尺寸，srcset 更轻量：
-
只适配 DPR（如图标、头像）：用
x描述符，srcset="logo@1x.png 1x, logo@2x.png 2x, logo@3x.png 3x"，无需 sizes；浏览器按window.devicePixelRatio匹配，从左到右取第一个满足的 -
只适配布局宽度（如 banner、卡片图）：必须用
w描述符 +sizes，例如srcset="hero-400w.jpg 400w, hero-800w.jpg 800w"配sizes="(max-width: 480px) 100vw, 50vw"；浏览器先算出图在页面中占多宽（CSS 像素），再结合 DPR 选最接近的w值 -
别混用 w 和 x：比如
photo-400w.jpg 1x是无效组合，整项被忽略 -
sizes 不是可选项：漏掉或写错（如只写
sizes="50vw"），浏览器默认按100vw计算，小屏也可能加载大图
验证是否真生效，别只看页面显示
肉眼清晰 ≠ srcset 在起作用，可能是 fallback 的 src 图刚好够用：
- 打开 Chrome DevTools → Network → Filter 输入
img，刷新页面，看实际请求的文件名和大小是否随视口缩放或设备模拟变化 - 右键图片 → “检查” → 在 Elements 面板查看
currentSrc属性值，或在 Console 输入$0.currentSrc - 用
matchMedia('(max-width: 768px)').matches检查媒体查询是否命中 - 禁用 JavaScript 后测试，确认
<picture>的<img>仍能显示，排除 JS 干扰
容易被忽略的关键细节
很多失效不是功能不支持，而是配置踩了隐性坑：
-
服务器响应头必须匹配 type：.webp 文件返回
Content-Type: image/webp，大小写、空格都不能错 -
所有 srcset 路径必须真实可访问：任一 404，对应候选被跳过，浏览器降级到下一个或
src - 不要指望浏览器自动缩放：它只做选择，不处理渲染；图片体积和解码开销同样影响性能，压缩和格式优化不能省
-
IE 完全不支持 srcset 和 picture，Safari 旧版本对
w描述符支持有限，src回退必须可用
