<picture>是唯一原生支持格式协商的HTML标签，通过<source type="image/webp">声明候选格式、按顺序匹配首个支持项，并强制以末尾<img src="fallback.jpg">兜底，解决旧浏览器不识别WebP时显示空框的问题。
直接用 <picture> + <source type="image/webp"> + 底层 <img src="fallback.jpg"> 就能跑通 90% 场景，不用 JS、不改构建流程、不依赖 CDN 配置。
为什么不能只写 <img src="x.webp">
Safari 13.1 之前、IE、旧版 Edge、部分安卓 WebView（如 Android 4.4 系统 WebView）根本不认识 webp 格式，也不会 fallback 到 JPEG——它就显示一个空框，连 alt 都不渲染。浏览器不是“看不懂就换一个”，而是“不认识就跳过”。<picture> 是唯一原生支持格式协商的 HTML 标签，它靠顺序和 type 属性触发降级逻辑。
-
<source>必须带type属性，比如type="image/webp"；漏掉就等于没写，Safari 直接忽略整条<source> - 多个
<source>按从强到弱排：AVIF → WebP → JPEG，浏览器取第一个type匹配且资源可加载的 - 末尾
<img>不是可选项，是强制兜底节点；它的src必须真实可访问，不能是相对路径错误或 404 地址 - IE8–IE11 会完全忽略
<picture>和<source>，只渲染内部<img>——这反而是优势，前提是你的<img src="...">能加载
srcset 和 sizes 怎么配才不白写
只写 srcset 不配 sizes，浏览器默认按 100vw 估算宽度，大概率加载大图小用，浪费流量又拖慢首屏。而 sizes 不是“建议尺寸”，是告诉浏览器“这张图在页面里实际占多宽”。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
sizes必须用媒体条件 + 宽度值，例如sizes="(max-width: 768px) 100vw, 50vw"，表示小屏占满视口、桌面占半宽 -
srcset中每个候选图后必须跟w描述符（如photo-400w.jpg 400w），别混用x和w，否则部分浏览器直接跳过整组 - 所有
<source>的srcset必须提供至少两个宽度档位（如400w, 800w），否则 Chrome 可能无视该<source> - 服务端返回 AVIF/WebP 时，
Content-Type必须精确匹配type值（image/avif/image/webp），错一个字母或返回application/octet-stream就静默失效
开发阶段怎么快速验证降级是否生效
光看页面显示正常没用。真正要确认的是“浏览器到底加载了哪个 URL”，以及“失败时有没有退到兜底图”。手动点开 Network 面板太慢，得用可复现的检查方式。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Network → 勾选
Disable cache和Large rows，方便看清请求 URL 和响应大小 - 用设备模拟器切 DPR：iPhone 12（3x）、Mac Retina（2x）、普通笔记本（1x），观察加载的图是否随 DPR 变化；不变说明
srcset或sizes失效 - 临时把 WebP 文件重命名为
.jpg并保留type="image/webp"，刷新——如果仍加载该图，说明服务端Content-Type没配对 - 运行
Array.from(document.images).filter(i => i.naturalWidth === 0)，直接列出所有加载失败的<img>，比肉眼看alt文字快得多
最容易被忽略的三个硬性前提
再标准的 <picture> 结构，只要下面任意一条不满足，降级就可能当场失效。
-
<img>的src必须指向静态、高可用资源（如 CDN 托管的/assets/placeholder-320x240.png），不能是动态地址（/api/image?uid=123）或本地相对路径（./images/x.jpg，部署后常因路由重写失效） - 图片容器必须预留空间：优先用
aspect-ratio: 16/9，Safari 15.3 及更早版本回退为height: 0; padding-bottom: 56.25%；没宽高会导致布局抖动，用户感知为“加载失败” -
alt必须准确描述内容，不能空、不能填" "（带空格会被朗读）、不能用title替代；CMS 或 React/Vue 动态渲染时，要加|| ""防止alt="undefined"
