是唯一可靠方案，因其原生支持资源协商、无需JS、SEO友好且降级由浏览器执行；必须严格按→→顺序书写，且各资源路径、MIME类型、尺寸、宽高比须完全一致。
必须用 <picture></picture>，且 <source type="image/avif"></source> → <source type="image/webp"></source> → <img src="fallback.jpg" alt="如何通过HTML设置图片降级兼容规则" > 顺序不能错，否则浏览器静默跳过、图片留白。
为什么 <picture></picture> 是唯一可靠方案
纯 <img src="a.webp" alt="如何通过HTML设置图片降级兼容规则" > 在 Safari ≤13.1、IE、旧 Android WebView 中不会报错，也不会加载——它直接丢弃请求，页面空白。而 <picture></picture> 是 HTML5 原生支持的资源协商机制，不依赖 JS，不发额外请求，SEO 友好，且降级逻辑由浏览器原生执行。
关键点在于：<source></source> 的 type 是开关，<img alt="如何通过HTML设置图片降级兼容规则" > 的 src 是强制兜底。漏掉 <img alt="如何通过HTML设置图片降级兼容规则" > 或它的 src 指向 404 路径，整个结构就失效。
-
<source></source>必须显式带type，且值必须是标准 MIME 字符串（如image/avif，不是avif或image/avif+json） - 顺序决定执行优先级：浏览器从上到下检查，遇到第一个
type支持 *且* 资源可加载的就停，不再往下看 -
<img alt="如何通过HTML设置图片降级兼容规则" >必须写在所有<source></source>之后，src必须指向一个静态、可直访的 JPG/PNG 地址（粘贴到地址栏能打开）
type 和服务器 Content-Type 必须完全一致
写了 <source type="image/webp" srcset="a.webp"></source> 却仍加载 JPG？大概率是服务器没返回正确的响应头。浏览器只认精确匹配的 Content-Type，错一个字符或类型不对应，就静默跳过该 <source></source>，连 error 事件都不触发。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- Nginx 需配置
types { image/webp webp; image/avif avif; }，否则.webp文件默认被当成application/octet-stream - CDN 需透传
Accept: image/webp请求头，否则后端无法判断客户端能力，统一返回 JPG - 本地双击打开 HTML 时，HTTP 服务缺失，
Content-Type无从谈起，建议用python -m http.server启个本地服务验证
路径和格式一致性常被忽略
所有格式图片（AVIF/WebP/JPG）必须尺寸一致、构图一致，否则切换时视觉跳变；但更基础的问题是路径一错，连兜底都进不去。
- 路径中所有斜杠必须是正斜杠
/，..images/logo.jpg是错的，正确是../images/logo.jpg - 本地开发慎用
file://绝对路径，跨设备即失效；推荐./logo.jpg或相对路径 -
<img src="logo.jpg?format=webp" alt="如何通过HTML设置图片降级兼容规则" >看似聪明，但 IE 和旧 WebView 可能返回 406 或解析失败，必须用静态路径 - 所有格式图片宽高比必须一致，AVIF 居中裁切、JPG 顶部对齐会导致切换时画面突然上移
<img alt="如何通过HTML设置图片降级兼容规则" > 的 src 就是默认占位，别当摆设
很多人以为 <picture></picture> 只管格式协商，其实末尾的 <img alt="如何通过HTML设置图片降级兼容规则" > 才是最终渲染载体——它的 src 就是默认占位图地址，必须真实存在、尺寸匹配、无障碍可用。
- 禁用
<img src="" alt="如何通过HTML设置图片降级兼容规则" >或<img src="broken.jpg" alt="如何通过HTML设置图片降级兼容规则" >，否则所有<source></source>失败后只剩alt文本 - 推荐用 CDN 托管的小尺寸 PNG 占位图，如
/assets/placeholder-320x240.png（1–2KB），确保首屏可快速加载 -
alt不能为空字符串，必须准确描述内容，否则影响 SEO 和屏幕阅读器 - 首屏关键图建议加
fetchpriority="high"，提升 LCP；加在<source></source>上无效
最易被忽略的是：所有格式图片必须共用同一套尺寸策略，且 <img alt="如何通过HTML设置图片降级兼容规则" > 的 src 必须是静态、可直访、无查询参数的真实路径——这不是“优化项”，是生效前提。
