必须用 实现格式降级，仅改 不行——浏览器不支持 AVIF/WebP 时会静默跳过，连错误提示都没有，最终只剩白框或 fallback 图；因其原生支持基于 type 和顺序的格式协商，首个匹配且可加载的 被采用， 强制兜底，而 无此机制，不支持即失败。

必须用 实现格式降级，仅改 不行——浏览器不支持 AVIF/WebP 时会静默跳过，连错误提示都没有，最终只剩白框或 fallback 图。

为什么 是唯一可靠方案

HTML 原生的格式协商机制只存在于 中： 按顺序检查，第一个 type 匹配且资源可加载的就生效； 是强制兜底，语义和行为都明确。而单独写 在 Safari 16.3 或 Firefox 90 里直接 404，没有中间态。

• 必须带 type 属性，且值要和服务器返回的 Content-Type 完全一致：WebP 是 image/webp，AVIF 是 image/avif
• 顺序必须从现代到兼容：先 avif，再 webp，最后
• 每个 的 srcset 至少含两个宽度描述符（如 400w, 800w），否则部分浏览器会忽略整条
• 不要在 里写 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 和断点
• 的 src 属性不能空，它是 IE11 / 旧 WebView 的唯一加载入口

服务端 MIME 类型配错会导致降级静默失效

哪怕 HTML 写得完全正确，只要服务器返回 AVIF 文件时 header 里是 Content-Type: image/jpeg，Chrome 和 Firefox 就会跳过该 ，连 error 事件都不触发——用户看到的是 JPG，你却不知道 AVIF 根本没走通。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 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 完全忽略 和 srcset，只渲染内部最后一个 。这不是“降级”，是解析器直接丢弃标签——所以 必须存在，且路径真实可用。

• 别写 ...——空 src 在 IE 下就是白屏
• 需要响应式尺寸适配？老环境改用 JS 库 picturefill（v3 支持 IE8+），但前提是 已指向可用图
• 避免用 background-image 模拟降级：SEO 丢失、无障碍失效、打印不显示、无法触发 loading="lazy"
• 首屏关键图（如 banner、商品主图）建议直接用 ，绕过所有降级逻辑，保证确定性

最容易被忽略的点是：降级是否真被触发，光看页面显示正常没用。必须进 Network 面板关掉缓存，切换设备 DPR，确认加载的 URL 确实随条件变化——否则你写的全是静态 fallback。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！