是唯一原生、零js、seo友好的webp/avif降级方案，必须按→→顺序书写，type值须严格匹配标准mime类型，且所有图片尺寸构图一致。
用 <picture></picture> 而不是只写 <img>
直接写 <img src="logo.webp"> 在 Safari 13.1 之前、IE、旧版 Android WebView 中会留白——这些浏览器根本不知道 image/webp 是什么，既不加载也不报错。你不能指望浏览器“自动降级”，它只会静默丢弃不识别的 MIME 类型资源。
<picture></picture> 是唯一原生、零 JS、不发额外请求、SEO 友好的方案。它的行为是确定性的：浏览器从上到下检查 <source></source>，遇到第一个 type 支持且资源可解码的就加载并停止，后面全跳过。
- 必须包含至少一个
<source></source>和一个<img>（不能只有<source></source>） -
<img>的src是强制兜底，不是可选项；漏掉整个结构就空白 - IE 完全忽略
<picture></picture>标签，但会渲染内部的<img>，这反而是优势
type 值必须严格匹配标准 MIME 类型
写错一个字符就失效：type="webp"、type="image/jpg"、type="image/jpe" 全部无效；只有 type="image/webp"、type="image/avif"、type="image/jpeg"、type="image/png" 才被识别。
服务器返回的 Content-Type 也必须一致。比如 Nginx 返回 Content-Type: image/webp，但 HTML 写成 type="webp"，Safari 就跳过；Chrome 可能侥幸加载，但不可靠。
- AVIF →
type="image/avif" - WebP →
type="image/webp" - JPEG → 必须用
type="image/jpeg"，不是image/jpg - PNG →
type="image/png"
顺序决定加载结果，不是“备选”而是“优先级队列”
把 image/avif 放最前，现代 Chrome/Firefox/Edge 能用上；iOS 14+、Android 4.0+ 等不支持 AVIF 的设备会自动跳过，继续看下一个；image/webp 次之；最后的 <img src="logo.jpg"> 是所有不支持现代格式浏览器的终点。
如果把 image/jpeg 写在第一个 <source></source>，哪怕后面有 AVIF，支持 AVIF 的浏览器也永远不会加载它——它匹配即停。
- 推荐顺序：
<source type="image/avif"></source>→<source type="image/webp"></source>→<img src="logo.jpg"> - 不要把 JPEG 写成第三个
<source></source>，它只该出现在<img>的src里 -
<img>的src必须是静态可直访路径，不能带查询参数（如?format=webp或?x-oss-process=image/format,avif）
所有格式图片必须尺寸一致、构图一致
这是最容易被忽略的点。如果 logo.avif 是 1200×630、居中裁剪，而 logo.jpg 是 800×420、左上角截取，切换时页面会明显跳变——用户没动，视觉却“抖”了一下。
不是“只要能显示就行”，而是“同一张图的不同编码版本”。批量转换时务必统一宽高、DPR、裁剪比例、色彩空间（sRGB）、alpha 处理（WebP 的 -alpha_q 参数要设好）。
- 用工具生成时，确保所有输出都基于同一源图 + 相同 crop/scale 参数
- CDN 转码需关闭自动裁剪或固定 crop 规则
- 测试时手动清缓存，分别在 Chrome、Safari（14+ 和 13.1）、Firefox、旧 Android WebView 中打开，观察是否跳变
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
