不是的替代品，而是为解决艺术指导、现代格式兼容和复杂条件组合等无法处理的场景而设计；它不渲染内容，仅通过规则供浏览器按序匹配并回退至。
为什么 <picture></picture> 不是 <img alt="用HTML中的picture做自适应图片" > 的替代品
<picture></picture> 的核心作用不是“让一张图变清晰”，而是“按条件选一张图”。它本身不渲染内容，只提供一组候选资源，最终由内部的 <source></source> 规则和浏览器决策决定加载哪张——如果所有 <source></source> 都不匹配，才回退到嵌套的 <img alt="用HTML中的picture做自适应图片" >。
常见误用是把 <picture></picture> 当成“高清图容器”，只塞一个 <source></source> 加一个 <img alt="用HTML中的picture做自适应图片" >，结果既没节省流量，又多了一层 DOM 开销。
- 必须至少有一个
<source></source>或直接使用<img alt="用HTML中的picture做自适应图片" >作为兜底，否则页面会空白 -
<source></source>的media、type、sizes属性互不影响，但匹配逻辑是「从上到下，第一个完全匹配的生效」 - 浏览器不会预加载
<source></source>指定的图片，只预加载最终选中的那个<img alt="用HTML中的picture做自适应图片" >的src或srcset
怎么写 <source></source> 才真正触发切换
关键在属性组合：用 media 控制设备断点，用 srcset + sizes 控制分辨率适配，两者可共存，但不能混用逻辑。
比如要实现「小屏用 WebP、大屏用 AVIF，且都适配 DPR」，得这样写：
立即学习“前端免费学习笔记（深入）”；
<picture> <source type="image/avif" media="(min-width: 768px)" srcset="hero-1x.avif 1x, hero-2x.avif 2x"> <source type="image/webp" srcset="hero-1x.webp 1x, hero-2x.webp 2x"> <img src="hero.jpg" alt="hero"> </picture>
-
media是媒体查询，只作用于当前<source></source>；不写就默认始终匹配（常用于兜底格式） -
type匹配失败时，浏览器直接跳过该<source></source>，不报错也不警告 -
srcset中的1x/2x是设备像素比标识，sizes（如sizes="(max-width: 768px) 100vw, 50vw"）才告诉浏览器“这张图在不同视口下占多宽”，影响资源选择
<picture></picture> 在实际项目中最容易漏掉的三件事
很多团队上线后才发现图片没切换、LCP 延迟、或者 Safari 显示空白，往往卡在这几个细节上：
- 忘记给
<img alt="用HTML中的picture做自适应图片" >写src或srcset：即使前面<source></source>全部匹配失败，没有src的<img alt="用HTML中的picture做自适应图片" >也不会加载，页面留空 - WebP/AVIF 图片未部署或路径错误：Chrome 能识别
type="image/webp"，但若返回 404，就静默跳过，不 fallback 到下一个<source></source> - 响应式图片尺寸没对齐设计稿：比如
sizes="50vw"但 CSS 把容器设为width: 300px，浏览器按视口算出的“应加载宽度”和实际渲染宽度偏差大，可能选错资源
要不要用 <picture></picture>？先看这几个信号
不是所有场景都需要它。如果只是想让图片在 Retina 屏更清楚，<img srcset="a.jpg 1x, a@2x.jpg 2x" alt="用HTML中的picture做自适应图片" > 就够了；<picture></picture> 真正值回成本的地方很具体：
- 需要按屏幕尺寸切换完全不同的构图（比如移动端裁剪人脸、桌面端展示全景）——用
media+ 不同srcset - 要优先用新格式（AVIF/WebP），但必须兼容老浏览器（IE、旧 Safari）——用
type分流 - 同一张图需同时适配 DPR 和视口宽度（比如 banner 在手机占满屏、在桌面只占半屏）——必须组合
sizes+srcset
复杂度藏在 sizes 计算和格式生成流程里，而不是标签本身。一旦用了，就得确保构建工具能批量产出多尺寸+多格式+正确命名的图，并同步更新 HTML 中的路径和 sizes 值。
