标签不自动响应，仅将资源选择权交予浏览器；常见失效因media缺括号、type与content-type不匹配、media条件重叠或src为空，导致浏览器静默跳过所有而只加载fallback图。
为什么写了 却始终只加载 ![]()
的图
这是最常被误认为“功能失效”的问题，实际几乎全是配置错误导致浏览器直接忽略所有
-
media值缺括号，比如写成media="max-width: 768px"（必须是media="(max-width: 768px)"） -
type值与服务器返回的Content-Type不一致，例如写了type="image/webp"，但 Nginx 没配types { image/webp webp; }，响应头仍是Content-Type: image/jpeg，浏览器判定不匹配，跳过 - 多个
<source></source>的media条件重叠（如同时有(max-width: 768px)和(max-width: 1024px)），浏览器只取第一个匹配项，后面的全被无视 - 漏掉
<img>或它的src属性为空——此时整个渲染空白，DevTools Network 面板里连请求都不会发
什么时候非用 不可
别一上来就套 <img srcset> 更轻量、更利于预加载：
- 艺术指导（Art Direction）：移动端裁剪人脸特写，桌面端展示完整场景，图源尺寸/构图完全不同
-
格式强制降级：必须优先用
image/avif，其次image/webp，最后兜底image/jpeg，且要确保旧浏览器（如 Safari 13 前）也能拿到可用图
如果只是同一张图缩放到不同宽度（比如 banner 图在手机上占满屏、桌面占半屏），直接用 <img srcset="a.jpg 400w, b.jpg 800w" sizes="(max-width: 768px) 100vw, 50vw"> 就够了。
srcset + sizes + media 怎么配合才不白写
三者不是并列关系，而是分层决策链：
-
media先筛断点：只在匹配视口时，“启用”该<source></source> -
type再筛格式支持：即使media匹配，若浏览器不支持该 MIME 类型，这条<source></source>仍被跳过 -
srcset+sizes最后做资源精配：仅当该<source></source>被选中，它的sizes才参与计算，用来从srcset中挑最合适的宽度描述符（400w、800w）
注意：sizes 必须写在 <source></source> 上才能影响它的 srcset；<img> 自己的 sizes 只在 fallback 时生效。写错单位（比如用 px）、或与 CSS 实际容器宽度严重不符，会导致浏览器选大图浪费流量。
WebP / AVIF fallback 容易被忽略的兼容细节
光写 <source type="image/avif"></source> 不代表真能用上：
- Android WebView 声称支持
image/avif，但某些版本解码失败，建议加兜底<source media="(min-width: 0px)" type="image/jpeg"></source>确保有出口 - Safari 16.4 之前版本不解析
type，完全依赖<img src>，所以<img>的src必须是 JPEG/PNG 这类无条件支持的格式 - CDN 或反向代理可能过滤
Accept请求头，导致服务端无法返回 AVIF/WebP，而浏览器又因type不匹配拒绝加载——这时 Network 面板会显示(blocked:mime-type)或状态码406
真正难调的从来不是 HTML 标签怎么写，而是 media 查询在不同设备上的解析差异、CDN 对 Accept 头的透传策略、以及图片服务返回的 Content-Type 是否和 type 字符串逐字节一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
