必须用，不能只靠——否则webp/avif在safari 13.1前、ie、旧android webview中直接空白；因浏览器不识别image/webp mime类型时会静默丢弃请求，不加载也不报错，且无格式协商能力，的type必须严格匹配标准mime类型（如image/webp），服务器响应头也须一致，须为静态可直访的jpeg/png路径作强制兜底。
必须用 <picture></picture>，不能只靠 <img> —— 否则 WebP/AVIF 在 Safari 13.1 之前、IE、旧 Android WebView 里直接空白，连错误提示都没有。
为什么 <img src="x.webp"> 会出问题
浏览器看到 src 地址后，会向服务器发起请求，并检查响应头里的 Content-Type。如果返回的是 image/webp，但浏览器根本不支持这个 MIME 类型（比如旧 Safari），它就静默丢弃，不加载、不报错、不 fallback——页面上就是一块空。
- 这不是“加载失败”，是“格式未被识别”，连解码器都不会调用
-
<img>单标签没有任何协商能力，type属性在<img>上无效 - 想让老浏览器显示图片，唯一办法是把降级路径显式写进
<img>的src属性里，且必须放在<picture></picture>内部末尾
<source type="image/webp"></source> 总是不生效的常见原因
写了 type 却还是加载 JPEG，90% 是链路中某处 MIME 类型没对齐。
-
type值必须严格为image/webp（不是webp、image/webp;或image/jpg） - 服务器返回的
Content-Type响应头也必须是image/webp，少一个字符都不行 - Nginx 需配置
types { image/webp webp; }；CDN 要透传Accept: image/webp请求头 - DevTools Network 面板里看到状态是
blocked:mime-type或406 Not Acceptable，基本可锁定服务端配置
<picture></picture> 里 <img> 的 src 不能随便填
<img> 不是“备用选项”，而是整个结构的强制出口：没它，<picture></picture> 就不渲染任何内容。
-
src必须指向一个静态、可直访的 JPEG/PNG 路径（如/images/logo.jpg），不能带查询参数（?format=webp或?x-oss-process=...） - 该地址必须能在浏览器地址栏单独打开并正常显示，否则老浏览器会加载失败+留白
-
alt不可省，否则无障碍和 SEO 全挂 - 所有格式图片（AVIF/WebP/JPEG）宽高、构图、裁剪比例必须一致，否则切换时视觉跳变
顺序错了，现代浏览器也会加载错图
浏览器从上到下扫描 <source></source>，命中第一个满足条件的就停，不会继续往下看。
- AVIF 必须放最前：
<source srcset="a.avif" type="image/avif"></source> - WebP 居中：
<source srcset="a.webp" type="image/webp"></source> - JPEG 不能写成第三个
<source></source>，必须塞进<img src="a.jpg">的src里 - 断点别重叠：
(max-width: 768px)和(min-width: 768px)会让 768px 宽度永远匹配第一条，第二条永无机会
最容易被忽略的一点：你导出的 WebP 文件本身可能损坏或编码异常——Chrome 可能勉强解码，Safari 却直接拒收。上线前务必用真实旧设备（如 iOS 12 真机）验证 <img src> 是否真能兜住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
