<picture>不是<img>的简单替代，因其本身不渲染图片，仅作容器；必须嵌套含src的<img>作为兜底，否则空白且无alt；<source>按顺序匹配media和type，sizes须与srcset的w描述符配合，AVIF/WebP等格式需按支持度降序排列。
为什么 <picture> 不是 <img> 的简单替代
因为 <picture> 本身不渲染图片，它只是个容器；真正加载和显示靠里面的 <source> 和最终的 <img>。浏览器按顺序检查 <source>，一旦匹配就跳过后续，直接用该 <source> 的 srcset 或 src 配合外层 <img> 的 src 渲染——所以外层 <img> 的 src 是必填兜底项，漏掉会导致无图显示。
- 没有
<img>标签，<picture>完全无效（连 alt 都不生效） -
<source>的media属性只接受媒体查询字符串，不支持 JS 表达式或 class 判断 - 多个
<source>的顺序很重要：宽屏规则放前面，窄屏放后面，否则高分辨率设备可能被低配规则“截胡”
<source> 的 srcset + sizes 怎么配才不白写
单独写 srcset 没用，浏览器不知道当前视口下该选哪个尺寸；必须配合 sizes 告诉它“在不同断点下，这张图将占多宽”。比如 sizes="(max-width: 768px) 100vw, 50vw" 的意思是：屏幕 ≤768px 时图宽为整个视口，否则为视口一半——浏览器据此从 srcset 中挑最接近的源。
-
sizes值必须是有效媒体查询 + 长度组合，不能写成"100%"或"auto" -
srcset里的每个地址后要跟x（像素密度）或w（宽度描述符），混用会出错；例如"small.jpg 480w, large.jpg 1200w"对应sizes才有效 - 如果只用
x描述符（如"logo@2x.png 2x"），sizes可省略，但无法响应视口变化
响应式 + WebP + 视网膜屏，三者怎么叠不翻车
常见错误是把所有逻辑塞进一个 <source>：WebP 支持判断靠 type，视网膜靠 srcset + 2x，响应式靠 media + sizes——这三者得拆到不同 <source> 层级里，否则浏览器无法同时满足。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<picture>
<source type="image/webp"
srcset="hero-webp-small.webp 480w,
hero-webp-large.webp 1200w"
sizes="(max-width: 768px) 100vw, 50vw">
<source media="(min-resolution: 2dppx)"
srcset="hero-2x.jpg 2x">
<img src="hero-1x.jpg" alt="hero">
</picture>
- 第一个
<source>优先尝试 WebP（现代浏览器支持），按视口选尺寸 - 第二个
<source>仅在高 DPI 设备上启用，忽略视口，直接走 2x 替换 - 最后的
<img>同时承担：旧浏览器兜底、非 WebP 环境降级、无 JS 时的默认加载
实际项目中容易被忽略的兼容与调试点
<picture> 在 IE 完全不支持，哪怕加了 polyfill，srcset 和 sizes 在 Safari 10–13.1 也有解析 bug（比如 sizes 里空格多一个就失效）。调试时别只看 Network 面板——要打开 DevTools 的 Rendering 标签页，勾选 “Emulate CSS media features”，手动切 resolution 和 width 看是否命中预期 <source>。
立即学习“前端免费学习笔记（深入）”；
- 使用
loading="lazy"时，它只作用于最终的<img>，对<source>无效 - 服务端生成 HTML 时，动态拼
srcset字符串要注意 URL 编码，空格、括号、逗号都可能破坏语法 - Vue/React 中用 JSX 写
<picture>，注意<source>是自闭合标签，写成<source />没问题，但不要写<source></source>
最麻烦的从来不是语法写对没，而是你写的 media 查询和设计稿的断点对不上，或者 sizes 估算的图宽和真实 CSS 布局有偏差——这时候图照样加载，但加载的永远不是最优那张。
