<picture>是唯一能用纯HTML实现AVIF/WebP降级的方案，需严格配置MIME类型、<source>顺序及<img>兜底，否则旧浏览器留白或失效。
<picture> 是唯一能用纯 HTML 实现现代格式（AVIF/WebP）降级的方案，不写它，只改 <img src="x.webp"> 就是白忙——旧 Safari、IE、微信 iOS 旧 WebView 会静默丢弃请求，页面留白。
为什么 <source type="image/webp"> 写了却没加载
不是浏览器“不支持”，而是链路中某处 MIME 类型对不上。浏览器只认标准 type 字符串，且必须和服务器返回的 Content-Type 响应头完全一致：
- 服务器返回
Content-Type: text/plain或空 → 浏览器跳过该<source>，不报错也不 fallback - Nginx 没配
types { image/avif avif; image/webp webp; }→ .avif 文件被当成application/octet-stream - CDN 没透传
Accept: image/avif,image/webp请求头 → 后端统一返回 JPEG，<source>根本没机会匹配
<source> 的顺序和 type 值必须严格匹配规范
浏览器从上到下逐个尝试，遇到第一个 type 可解码且资源可加载的就停，其余全忽略。这不是建议，是执行逻辑本身：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
<source srcset="a.avif" type="image/avif">—— 必须放最前，Chrome/Firefox/Edge 120+ 已稳定支持 -
<source srcset="a.webp" type="image/webp">—— 居中，覆盖 iOS 14+、Android 4.0+、所有现代桌面 -
<img src="a.jpg" alt="描述">—— 必须存在，且src指向真实可访问的 JPG/PNG，不能是broken.jpg或带查询参数的动态地址（如?format=webp） - 写成
type="webp"、type="image/jpg"或漏掉引号 → Safari 直接跳过，Chrome 可能侥幸但不可靠
<img> 的 src 不是“备用”，而是强制兜底载体
<picture> 自身不渲染、不发请求，真正触发加载的是匹配成功的 <source> 或最终的 <img>。漏掉 <img>，或它的 src 404，整个结构就退化为仅显示 alt 文本：
立即学习“前端免费学习笔记（深入）”；
- 别写
<img src="">或<img src="#">—— 页面空白 - 推荐用 CDN 托管的兼容图，如
/assets/logo-800x600.jpg，尺寸与 AVIF/WebP 一致，宽高比相同 -
alt必须准确描述内容，不能空、不能写“图片1”，否则无障碍和 SEO 都失效 - 首屏关键图建议加
fetchpriority="high"，提升 LCP；加在<source>上无效
最容易被忽略的点：所有格式图片的构图、裁剪比例、宽高必须一致。否则 AVIF 切换到 JPG 时，用户会看到突然拉伸或偏移——这不是降级，是视觉 bug。
