avif降级必须用，须置首，为强制兜底；浏览器自上而下匹配首个可识别type并停止，type与content-type须字面完全一致，尺寸需像素级统一。
AVIF 降级必须用 <picture></picture>，<source type="image/avif"></source> 必须放最前，<img src> 是强制兜底，不是可选项——漏掉它，现代浏览器可能加载成功，但 IE、旧 WebView 会彻底空白。
为什么 <source></source> 顺序不能调换
浏览器从上到下逐个检查 <source></source>，遇到第一个 type 可识别且资源能解码的就加载并停止。这不是“建议”，是执行逻辑本身。
-
type="image/avif"必须放在第一行：Chrome 120+、Firefox 120+、Edge 120+ 原生支持；Safari ≤17.6 和多数旧 Android WebView 不认，会直接跳过 -
type="image/webp"放第二：覆盖 iOS 14+ Safari、Android 4.0+、所有主流桌面浏览器 - 不能把
type="image/jpeg"写在 AVIF 前面——否则哪怕设备支持 AVIF，也永远加载不到 -
<img>的src不是第 N 个<source></source>，它是独立兜底入口，不参与顺序匹配
type 属性写错一个字符就静默失效
type 是浏览器判断“支不支持”的唯一依据，服务器返回的 Content-Type 也必须字面完全一致——少一个字母、多一个空格、大小写错位，都导致跳过。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ✅ 正确：
type="image/avif"、type="image/webp"、type="image/jpeg"（注意不是image/jpg） - ❌ 错误：
type="avif"、type="image/AVIF"、type="image/jpg"、type="webp" - CDN 或 Nginx 必须透传
Accept请求头，否则后端无法根据Accept: image/avif,image/webp返回对应格式 - 如果服务器返回的是 JPEG 文件，但响应头是
Content-Type: image/avif，Safari 一定跳过，Chrome 也可能校验失败
<img> 的 src 必须真实可访问且无查询参数
<img> 是所有不支持 type 的老浏览器（IE、旧 Android WebView）唯一能识别的入口。它不是“备用 source”，而是最终防线。
-
src必须指向一个真实存在的 JPEG 或 PNG 文件，比如logo.jpg，不能是logo.jpg?format=webp或api/image/123 - 路径必须可靠：本地双击打开时，
src="logo.png"可能失败，推荐src="./logo.png"；所有斜杠必须是正斜杠/ - 绝对路径如
file:///C:/project/logo.jpg理论可行，但跨设备即失效，开发阶段禁用 - 如果
<img src>本身 404 或返回 406，整个<picture></picture>就退化为只显示alt文本
所有格式图片必须像素级尺寸一致
降级后拉伸、跳变、高度塌陷，90% 是因为 AVIF/WebP/JPEG 的 intrinsic 尺寸（原始宽高比）不一致。浏览器按不同元数据计算高度，不是靠 CSS 拉齐。
- 用
file logo.avif（macOS/Linux）或在线 EXIF 查看器确认每张图的像素尺寸是否完全相同 - CMS 导出、tinypng 旧版压缩可能抹除 JPEG 的 EXIF 宽高字段，让浏览器误判为“无尺寸”
- 生成 JPEG 时加参数强制写入尺寸：
convert -resize 800x450\! input.png output.jpg - 补 EXIF 字段：
exiftool -ImageWidth=800 -ImageHeight=450 logo.jpg - 避免用 CDN 动态转码路径作兜底，比如
logo.jpg?x-oss-process=image/resize,w_800，这类响应往往缺失元数据且Content-Type不稳定
最容易被忽略的点：你写的代码可能全对，但只要服务器返回的 Content-Type 和 type 属性差一个字符，或者 <img src> 路径里有个错位的 ..，降级就静默失败——连 error 事件都不会触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
