纯标签降级必须用 <picture> 而非仅改 <img>，因其原生支持基于 type 和顺序的格式协商，首个匹配且可加载的 <source> 被采用，最终由 <img> 兜底；而 <img src> 无降级机制，不支持即失败。
为什么纯标签降级必须用 <picture> 而不是只改 <img>
浏览器对图片格式的支持是渐进式分层的，<img src="a.jpg"> 这种写法只能加载一种格式，遇到不支持的（比如 AVIF 在旧版 Safari）、路径错的、或 MIME 类型配错的，就直接挂掉，连 fallback 都没有。而 <picture> 是 HTML5 原生提供的“资源协商”机制，它靠顺序和 type 属性触发降级逻辑，不依赖 JS 就能工作。
关键点在于：<source> 标签必须显式带 type，且顺序要从现代到兼容——浏览器按顺序检查，第一个 type 匹配且资源可加载的就用它，否则跳过，直到最后的 <img>。
-
<source type="image/avif" srcset="a.avif">→ Safari 16.4+ / Chrome 85+ -
<source type="image/webp" srcset="a.webp">→ Firefox 65+ / Edge 79+ -
<img src="a.jpg" alt="描述">→ 所有浏览器兜底
srcset 和 sizes 不配对等于白写
只写 srcset="small.jpg 400w, medium.jpg 800w" 没用。浏览器不知道你这张图在页面里实际占多宽，它没法判断该选哪个。必须配合 sizes 告诉它：“在视口 ≤768px 时，这张图占满宽度；否则占一半”。
常见错误是把 sizes 写成固定值，比如 sizes="50vw"，结果在小屏上也强行拉半屏，导致加载了大图却只显示窄条——既浪费带宽又拖慢首屏。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 正确写法：
sizes="(max-width: 768px) 100vw, 50vw" - 必须确保每个
<source>的srcset提供至少两个宽度描述符（如400w, 800w），否则浏览器可能忽略整个<source> - 不要在 CSS 里用
width: 300px强制缩放一张 2000×1500 的图——它仍会完整下载
服务端 MIME 类型配错，<source> 直接静默失效
即使你 HTML 写得完全正确，如果服务器返回 image/avif 文件时 header 里写的是 Content-Type: image/jpeg，Chrome 和 Firefox 会直接跳过这个 <source>，连 error 事件都不触发——用户看到的只是 fallback 的 JPG，但你根本不知道降级发生了。
验证方法很简单：打开 DevTools → Network → 点开那个 AVIF 请求 → 查看 Response Headers 里的 Content-Type 是否精确匹配 <source type="..."> 中的值。
- WebP 对应
Content-Type: image/webp - AVIF 对应
Content-Type: image/avif - JPG/PNG 保持默认即可，但别让 Nginx 或 CDN 把 AVIF 当作二进制流返回
静态页面没 JS，也能监听加载失败吗？不能，但可以预埋 fallback
纯标签方案下，error 事件需要 JS 注册，所以静态页无法自动换占位图。但你可以提前把 fallback 图嵌进 <img> 的 src 里，并确保它体积足够小（比如 1×1 的 SVG 或 200B 以内的 data URL）。
更务实的做法是：把最可能出问题的环节前置控制——比如所有 srcset 中的路径都用相对路径 + 统一前缀（/assets/img/），构建时用脚本批量校验是否存在，而不是等用户访问时报 404。
- 别用
alt当占位文案，它不渲染；fallback 必须是真实可加载的src - CDN 自动转格式（如 Cloudflare Polish）虽方便，但会绕过你的
<picture>结构，建议关掉，自己控全链路 - AVIF 和 WebP 不是万能解药：PNG 透明图转 JPEG 会黑底，这种场景 fallback 到 PNG 更合理
