是 的补充而非替代，仅在需按设备特性切换资源时使用；它将选择权交予浏览器，依赖 media、srcset、sizes 等条件匹配 ，最终由内部 渲染，且必须提供兜底 src。
picture 标签不是 img 的替代品，而是补充方案
直接用 <img alt="HTML怎么创建响应式图片_HTML picture标签使用教程【适配】" > 仍是最简单可靠的方案；<picture></picture> 只在需要「按设备特性切换不同图片资源」时才值得引入。它本身不提供响应式能力，只是把决策权交给浏览器——由浏览器根据 media、srcset、sizes 等条件选一张最合适的 <source></source>，再交给 <img alt="HTML怎么创建响应式图片_HTML picture标签使用教程【适配】" > 渲染。
常见错误现象：
- 把 <picture></picture> 当成“自动适配神器”，结果所有设备都加载了最大图
- 忘记在 <picture></picture> 内部保留一个兜底的 <img alt="HTML怎么创建响应式图片_HTML picture标签使用教程【适配】" >，导致某些 <source></source> 不匹配时页面空白
- 在 <source></source> 里混用 media 和 srcset 却没配 sizes，造成宽度计算错误
-
<source></source>按从上到下的顺序匹配，第一个满足条件的生效，后续忽略 - 没有匹配成功的
<source></source>时，浏览器会回退到内部<img alt="HTML怎么创建响应式图片_HTML picture标签使用教程【适配】" >的src（必须有） -
media是媒体查询字符串，比如(max-width: 768px)，不支持 JS 表达式 -
sizes必须和srcset配合使用，告诉浏览器“这张图在当前布局下大概占多宽”
什么时候该用 picture？看这三种典型场景
别为了用而用。真正需要 <picture></picture> 的情况其实就三类：
-
艺术方向调整（art direction）：小屏裁剪人脸特写，大屏展示全景。此时用
media+ 不同构图的图片 -
格式降级（format fallback）：给支持 WebP 的浏览器发
image/webp，不支持的回退到image/jpeg。用type属性区分 -
高 DPR 设备适配：配合
srcset和x描述符（如logo@2x.png 2x），但注意：这种场景用<img srcset alt="HTML怎么创建响应式图片_HTML picture标签使用教程【适配】" >就够了，不一定非要套<picture></picture>
示例（WebP 降级）：
<picture><br> <source type="image/webp" srcset="photo.webp"><br> <source type="image/jpeg" srcset="photo.jpg"><br> @@##@@<br></picture>
注意：type 值必须是 MIME 类型，不能写成 .webp 或 webp；浏览器只检查 type 是否支持，不校验文件内容
立即学习“前端免费学习笔记（深入）”；
srcset + sizes 组合最容易出错的三个点
srcset 和 sizes 是让浏览器预估「该加载哪张图」的关键，但它们的协作机制很反直觉。
-
srcset里的宽度描述符（如400w）指的是图片**原始像素宽度**，不是显示宽度 -
sizes的值是 CSS 长度（如100vw、50%），告诉浏览器“这张图在页面中会占据多宽的 CSS 像素” - 浏览器用
sizes算出目标显示宽度，再结合设备 DPR，反推需要多少原始像素，最后从srcset中挑最接近的一张
错误示范：<img src="photo.jpg" alt="描述">
→ 在 DPR=2 的手机上，视口宽度 375px，但需要渲染 750 物理像素宽的图，于是浏览器可能跳过 400w、选 800w —— 即使 400w 其实已足够清晰
更稳妥的做法是提供更细粒度的 srcset，比如：srcset="a-400w.jpg 400w, a-600w.jpg 600w, a-800w.jpg 800w"
兼容性与实际加载行为比你想象的更保守
所有现代浏览器都支持 <picture></picture>，但行为细节仍有差异：
- Safari 以前不支持
type="image/avif"，现在支持了，但旧版本仍会跳过整条<source></source>并回退到<img srcset="a-400w.jpg 400w, a-800w.jpg 800w" sizes="100vw" alt="HTML怎么创建响应式图片_HTML picture标签使用教程【适配】" > - Chrome 和 Firefox 对
sizes解析更严格；如果sizes语法错误（比如漏了单位），部分浏览器会忽略整个属性，按100vw处理 - 图片是否真正被加载，取决于是否进入视口（懒加载默认开启）、是否匹配条件、是否被缓存——光看 HTML 结构无法判断最终加载哪张
调试建议：
- 在 Chrome DevTools 的 Network 面板过滤 Img，看实际请求的 URL
- 用 matchMedia() 手动测试媒体查询是否命中：matchMedia('(max-width: 768px)').matches
- 不要依赖 <picture></picture> 实现「图片尺寸随窗口缩放实时切换」——它只在元素插入 DOM 或媒体查询变化时重新评估一次
最常被忽略的一点：<picture></picture> 不改变图片的 CSS 盒模型行为。它依然受 max-width: 100%、height: auto 等样式控制，响应式布局还得靠 CSS 配合
