<picture> 必须用 <source type="image/webp"> 显式声明降级链，因旧浏览器不识别 WebP；type 值须与服务器 Content-Type 完全一致，Nginx 需配置 types，CDN 需透传 Accept 头，<img> 是老浏览器唯一入口且不可省略，intrinsic 尺寸不一致会导致布局跳变。
直接写 <img src="x.webp"> 在 Safari ≤13.1、IE、旧版 Android WebView 中必然空白，这不是加载失败，而是浏览器压根不识别 image/webp，连请求都不发——必须用 <picture> 显式声明降级链。
为什么 <source type="image/webp"> 写了却没生效
浏览器只认标准 MIME 类型字符串，且要求与服务器返回的 Content-Type 响应头完全一致。错一个字符或服务端配置漏掉，就静默跳过。
-
type="webp"、type="image/webp "（末尾空格）、type="image/jpg"全部无效；正确写法只有type="image/webp" - Nginx 未配
types { image/webp webp; }，.webp 文件会被当成application/octet-stream，浏览器拒绝解码 - CDN 没透传
Accept: image/webp请求头，后端无法判断能力，统一返回 JPEG，导致<source>匹配失败但不报错 - 本地双击打开 HTML 时，相对路径如
src="logo.webp"可能因协议为file://被拦截；改用src="./logo.webp"更可靠
<picture> 的 <source> 顺序为什么不能乱
浏览器从上到下逐条匹配：第一个 type 被支持 *且* 对应资源可成功解码（文件存在、格式合法、网络可达），就立即加载并终止后续检查。这不是“备选列表”，是硬性执行逻辑。
-
image/avif必须放最前：Chrome/Firefox/Edge 新版本优先用，旧 Safari 自动跳过 -
image/webp居中：覆盖 iOS 14+、Android 4.0+、绝大多数桌面浏览器 -
image/jpeg不能写成第三个<source>：它只是格式 fallback，不是响应式 fallback；必须放在末尾<img src="logo.jpg">的src里才起作用 - 漏掉
<img>标签，整个结构在旧环境就是空白——<picture>本身不渲染也不发请求
<img> 的 src 和 alt 为什么不可省略
<img> 不是“备用 source”，而是所有不支持 type 的老浏览器（IE、旧 WebView）唯一能识别的入口。它的 src 是强制兜底地址，alt 是语义与无障碍底线。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
src必须指向静态、可直访的 JPEG/PNG：不能带查询参数（如?format=webp），否则旧浏览器可能返回 406 或损坏数据 -
alt缺失会导致屏幕阅读器无法读图、SEO 抓取降权、无图环境下纯文本断裂 - 路径必须全用正斜杠
/：写成..images/logo.jpg（缺/）或.\logo.jpg（Windows 反斜杠）会解析失败 - 首屏关键图建议加
fetchpriority="high"提升 LCP，但只能加在<img>上，加在<source>无效
所有格式图片宽高不一致引发的视觉跳变
你看到的“比例失调”，其实是 WebP 和 JPEG 的 intrinsic 尺寸（原始像素宽高）不一致，导致浏览器切换格式时重算高度，触发 layout shift。
- 用
file logo.webp和file logo.jpg确认二者是否逐像素一致；CMS 导出、tinypng 旧版压缩常抹除 JPEG EXIF 宽高字段，让浏览器误判为“无尺寸” - 生成 JPEG 时强制写死尺寸：
convert -resize 800x450\! input.png output.jpg（末尾\!表示拉伸并写入元数据） - 若无法统一 intrinsic 尺寸，改用 CSS 容器控制比例：
style="aspect-ratio: 16 / 9; object-fit: cover;"；Safari ≤15.2 需降级为padding-top: 56.25%+ 绝对定位子元素 - 绝对不要在同一个
<picture>里混用width/height属性和aspect-ratio，它们冲突且行为不可控
最容易被忽略的点：降级链里任意一环（type 字符串、服务器 Content-Type、<img src> 路径、intrinsic 尺寸）出问题，都不会报错，只会静默留白或跳变——得靠 Array.from(document.images).filter(i => i.naturalWidth === 0) 这类手段主动排查，而不是等用户反馈。
