必须用 实现格式降级，仅改 不行——浏览器不支持 AVIF/WebP 时会静默跳过，连错误提示都没有，最终只剩白框或 fallback 图；因其原生支持基于 type 和顺序的格式协商，首个匹配且可加载的 被采用， 强制兜底，而 无此机制，不支持即失败。
必须用 <picture></picture> 实现格式降级，仅改 <img src alt="如何通过HTML优化图片降级兼容性" > 不行——浏览器不支持 AVIF/WebP 时会静默跳过，连错误提示都没有，最终只剩白框或 fallback 图。
为什么 <picture></picture> 是唯一可靠方案
HTML 原生的格式协商机制只存在于 <picture></picture> 中：<source></source> 按顺序检查，第一个 type 匹配且资源可加载的就生效；<img alt="如何通过HTML优化图片降级兼容性" > 是强制兜底，语义和行为都明确。而单独写 <img src="a.avif" alt="如何通过HTML优化图片降级兼容性" > 在 Safari 16.3 或 Firefox 90 里直接 404，没有中间态。
-
<source></source>必须带type属性，且值要和服务器返回的Content-Type完全一致：WebP 是image/webp，AVIF 是image/avif - 顺序必须从现代到兼容：先
avif，再webp，最后<img src="a.jpg" alt="如何通过HTML优化图片降级兼容性" > - 每个
<source></source>的srcset至少含两个宽度描述符（如400w, 800w），否则部分浏览器会忽略整条<source></source> - 不要在
<source></source>里写src——它只认srcset+sizes或media
srcset 和 sizes 怎么配才不白写
只写 srcset 不配 sizes，等于没写。浏览器默认按 100vw 推算图片渲染宽度，大概率选错尺寸——比如桌面端加载了 1200w 图，但实际只占 50vw，浪费 60% 流量。
-
sizes必须反映图片**在页面中的实际渲染宽度**，不是容器宽，也不是视口宽。常见写法：sizes="(max-width: 768px) 100vw, 50vw" -
srcset中所有项必须统一用w描述符（推荐）或统一用x，不能混用 - 生成图建议按梯度提供：
400w、800w、1200w，覆盖主流 DPR 和断点 -
<img alt="如何通过HTML优化图片降级兼容性" >的src属性不能空，它是 IE11 / 旧 WebView 的唯一加载入口
服务端 MIME 类型配错会导致降级静默失效
哪怕 HTML 写得完全正确，只要服务器返回 AVIF 文件时 header 里是 Content-Type: image/jpeg，Chrome 和 Firefox 就会跳过该 <source></source>，连 error 事件都不触发——用户看到的是 JPG，你却不知道 AVIF 根本没走通。
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
- 验证方法：DevTools → Network → 点开 AVIF 请求 → 查 Response Headers 中的
Content-Type - Nginx 配置示例：
types { image/avif avif; }，并确保文件后缀为.avif - CDN（如 Cloudflare、阿里云）需单独开启 AVIF/MIME 支持，不能依赖自动识别
- WebP 同理，必须返回
Content-Type: image/webp
IE11 及更老浏览器怎么保底
IE11 完全忽略 <picture></picture> 和 srcset，只渲染内部最后一个 <img alt="如何通过HTML优化图片降级兼容性" >。这不是“降级”，是解析器直接丢弃标签——所以 <img src="fallback.jpg" alt="如何通过HTML优化图片降级兼容性" > 必须存在，且路径真实可用。
- 别写
<picture><source>...</source><img src="" alt="如何通过HTML优化图片降级兼容性" ></picture>——空src在 IE 下就是白屏 - 需要响应式尺寸适配？老环境改用 JS 库
picturefill（v3 支持 IE8+），但前提是<img src alt="如何通过HTML优化图片降级兼容性" >已指向可用图 - 避免用
background-image模拟降级：SEO 丢失、无障碍失效、打印不显示、无法触发loading="lazy" - 首屏关键图（如 banner、商品主图）建议直接用
<img src="real.jpg" alt="如何通过HTML优化图片降级兼容性" >，绕过所有降级逻辑，保证确定性
最容易被忽略的点是：降级是否真被触发，光看页面显示正常没用。必须进 Network 面板关掉缓存，切换设备 DPR，确认加载的 URL 确实随条件变化——否则你写的全是静态 fallback。
