直接写<img src="xxx.webp">会导致不支持WebP的浏览器（如旧版Safari、IE）显示空白，因无fallback机制；必须用<picture>+<source type="image/webp">实现原生格式降级，且<img>为必选兜底。
为什么直接写 <img src="xxx.webp"> 会出问题
因为不支持 WebP 的浏览器（比如旧版 Safari、IE）根本不会渲染这张图，页面上只留一个破损图标或空白——它不是“加载失败”，而是压根没 fallback 路径。<picture> + <source> 才是唯一能触发格式降级的原生机制，<img> 只是兜底容器，不能省略。
<source> 的 media 和 type 必须同时生效
只写 media 不写 type，或者只写 type 不写 media，都会导致该 <source> 被跳过。浏览器必须同时满足“屏幕条件”和“格式支持”才选它。
-
media值必须是标准 CSS 媒体查询，例如(max-width: 768px)，不能用max-device-width（已失效） -
type必须严格匹配 MIME 类型：写成image/webp，不能多空格、分号或大小写混用（image/WEBP或image/webp;都会被 Safari 忽略） - 多个
<source>按顺序匹配，第一个同时满足media和type的就中选，后续全跳过
怎么组织 <source> 顺序才能避免高分辨率图被低断点截胡
浏览器从上到下逐个检查 <source>，一旦匹配立即停止。所以顺序错了，比如把 (max-width: 768px) 放在 (min-width: 1200px) 前面，那所有屏幕都会走小屏路径。
- 推荐按视口宽度从大到小排列：
(min-width: 1440px)→(min-width: 768px)→ 最后留一个无media的<source>或直接靠<img> - 每个
<source>的srcset可以带2x描述符，例如"hero@1x.webp, hero@2x.webp 2x"，让高 DPR 设备自动选高清版 -
<img>的src应设为最小屏通用图（如hero-mobile.jpg），而不是最大图，否则低屏设备也会拉取大文件
测试时最容易忽略的三个细节
光看页面显示没用，得进 Network 面板确认实际加载的是哪个文件名。常见漏点：
立即学习“前端免费学习笔记（深入）”；
- DevTools 切换 device preset 后，手动拖动窗口宽度——很多 preset 的 viewport width 和真实断点对不上
- 本地开发时用 file:// 协议，Safari 会禁用 WebP 加载，必须走 http(s) 服务（如
live-server或python -m http.server） - CDN 或服务器没配好 WebP 的 MIME 类型（
image/webp），即使 HTML 写对了，返回头不对也会当普通二进制丢弃
