<picture>不是<img>的替代品而是容器，必须配合<source>和末尾带src与alt的<img>才能正常渲染、保障可访问性与SEO；其核心价值在于艺术指导、现代格式降级与复杂条件组合。
picture 标签不是 img 的替代品，而是它的容器
直接把 <picture> 当成增强版 <img> 用，十有八九会白屏或加载失败。它本身不渲染图片，必须配合内部的 <source> 和兜底的 <img> 才能生效——浏览器先按 <source> 规则匹配，没命中就回退到 <img> 的 src。
必须写 <img> 且带 src 和 alt，否则语义和可访问性全崩
很多人只写 <source>，以为图片就“按需加载”了，结果屏幕阅读器读不出内容，SEO 也抓不到图，Lighthouse 直接报错。正确的最小结构是：
<picture> <source media="(min-width: 768px)" srcset="hero-desktop.webp" type="image/webp"> <source srcset="hero-mobile.jpg" type="image/jpeg"> <img src="hero-fallback.jpg" alt="夏季促销主图"> </picture>
注意三点：
-
<img>必须在<picture>最末尾，且必须含src（不能只靠srcset）和alt - 所有
<source>的srcset值必须真实存在并可访问，否则匹配成功但加载 404 -
type属性只起 MIME 类型提示作用，不校验文件实际格式，别写错（比如把.webp写成image/jpg）
media 和 srcset 组合决定“按需”的边界，但浏览器不保证只加载一个
你写 media="(min-width: 1024px)" srcset="a.webp 1x, a@2x.webp 2x"，浏览器会根据视口宽度 + 设备像素比 + 网络条件综合决策，可能预加载多个候选资源。这不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
常见误判点：
-
media查询不支持max-height或orientation等非宽度维度（部分新浏览器开始支持orientation，但兼容性差） -
srcset中的w描述符（如800w）必须配合sizes属性才有效，否则浏览器按默认 100vw 计算，容易选错尺寸 - Chrome DevTools 的 Network 面板里看到多个图片请求，并不意味着“浪费”，可能是预加载或备用路径
WebP / AVIF 图片要配 fallback，但别用 PNG/JPG 双写 type
想用现代格式又兼顾旧浏览器，不能这么写：
<source srcset="logo.avif" type="image/avif"> <source srcset="logo.webp" type="image/webp"> <source srcset="logo.png" type="image/png">
问题在于：Safari 14+ 支持 AVIF 但不支持 type="image/avif"（直到 Safari 16.4），会跳过前两行直奔 PNG；而部分 Android WebView 识别 type 却加载失败。更稳妥的做法是：
- 用
media区分设备能力（如media="(supports(type: image/avif))"）——但目前仅 Chrome/Edge 支持supports()函数 - 更通用的方案：用两个
<picture>嵌套，外层靠 JS 检测格式支持再插入内层结构 - 或者干脆放弃
type，全靠media+ 文件后缀区分，由服务器或构建工具确保路径正确
最常被忽略的是：CDN 或静态托管服务可能未配置 AVIF/WebP 的 MIME 类型，导致 type 匹配失败，但图片仍能显示——这种“看似正常”的情况反而最难排查。
