图片逐级降级是开发者主动提供多格式、多尺寸资源，通过++构成fallback链，浏览器自上而下匹配首个支持的（如avif→webp），最终以为强制兜底，非自动行为。
什么是图片逐级降级？
图片逐级降级不是浏览器自动行为，而是开发者主动为同一张图提供多套资源（不同格式、尺寸、质量），让浏览器按能力「选最合适的那个」。核心是利用 <picture></picture> + <source></source> + <img alt="HTML怎么实现图片逐级降级" > 的 fallback 链，而不是只靠 srcset 或单个 src。
<picture></picture> 里怎么写 <source></source> 优先级？
浏览器从上到下解析 <source></source>，遇到第一个匹配的就停止，后面的全跳过。所以顺序很关键：
- 高优先级格式（如
avif）放最前面，搭配type="image/avif" - 次优格式（如
webp）放中间，用type="image/webp" - 兜底的
<img alt="HTML怎么实现图片逐级降级" >必须存在，且只带src和alt，不能加srcset或type - 别在
<source></source>里混用media和type—— 它们是正交条件，但叠加后容易误判匹配逻辑
<picture> <source type="image/avif" srcset="logo.avif"> <source type="image/webp" srcset="logo.webp"> <img src="logo.png" alt="Logo"> </picture>
srcset 和 sizes 能和降级混用吗？
可以，但只能加在 <source></source> 上，不能加在 <img alt="HTML怎么实现图片逐级降级" > 里——否则会破坏降级链。常见错误是把响应式逻辑和格式降级写反了：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 正确：每个
<source></source>自己带完整的srcset+sizes，比如<source type="image/webp" srcset="logo-400w.webp 400w, logo-800w.webp 800w" sizes="(max-width: 600px) 400px, 800px"></source> - 错误：只在
<img alt="HTML怎么实现图片逐级降级" >里写srcset，上面<source></source>却没对应资源，结果老浏览器加载了低效的 PNG，新浏览器反而因不匹配而退回到<img alt="HTML怎么实现图片逐级降级" > -
sizes值必须和 CSS 布局一致，否则浏览器预估宽度出错，选错资源
为什么 avif 图片有时根本不加载？
不是代码写错了，而是两个硬性限制没绕过去：
立即学习“前端免费学习笔记（深入）”；
- Chrome 109+、Firefox 113+、Safari 16.4+ 才原生支持
avif；旧版 Safari（尤其 iOS 16.3 及更早）即使声明了type="image/avif"也会直接跳过该<source></source> - 服务器必须返回正确的
Content-Type: image/avif，Nginx/Apache 若没配 MIME 类型，浏览器会拒绝解析，静默 fallback 到下一个<source></source> - 别依赖
<link rel="preload">提前拉avif—— preload 不识别type，很可能提前加载失败或加载了错误格式
真正稳的做法：把 avif 放第一，webp 放第二，png/jpg 作 <img alt="HTML怎么实现图片逐级降级" > 兜底，再加一层服务端 User-Agent 检测做兜底重定向（复杂场景才需要）。
