标签不会自动响应，必须配合 srcset 和 media 或 type 才生效； 是必需的 fallback，其 src 不参与响应逻辑；sizes 需与 CSS 实际宽度一致，服务器须正确配置 MIME 类型，否则新格式被忽略。
picture 标签不自动响应，必须配 srcset 和 media
浏览器不会因为写了 <picture></picture> 就自动选图——它只按你写的规则机械匹配。没写 media 或 srcset，就退化成普通 <img alt="html怎么用picture标签优化_HTML如何通过Picture实现响应式图片" >，白套一层标签。
常见错误现象：<picture><source src="small.jpg"><img src="large.jpg" alt="html怎么用picture标签优化_HTML如何通过Picture实现响应式图片" ></source></picture>，结果所有设备都加载 large.jpg。
- 每个
<source></source>必须带media（如(max-width: 768px)）或type（如image/webp），否则被忽略 -
<img alt="html怎么用picture标签优化_HTML如何通过Picture实现响应式图片" >是 fallback，必须存在，且它的src不参与响应逻辑，只在所有<source></source>不匹配时加载 -
srcset要配合sizes才能正确计算 DPR 和视口宽度，光写srcset="a.jpg 1x, b.jpg 2x"只解决像素密度，不解决尺寸切换
webp / avif 图片 fallback 必须用 type 属性，不能靠文件名判断
浏览器根据 <source type="image/avif"></source> 的 MIME 类型决定是否使用该源，和后缀名无关。写成 photo.avif 但 type="image/webp"，照样跳过。
使用场景：想优先用 avif，降级到 webp，最后兜底 jpeg。
- 顺序很重要：浏览器从上到下匹配第一个支持的
type，所以把最新格式放最前 - 服务器必须正确返回
Content-Type，比如 Nginx 要配置types { image/avif avif; }，否则即使写了type也会因响应头不匹配而跳过 - 不要省略
<img alt="html怎么用picture标签优化_HTML如何通过Picture实现响应式图片" >的src，否则 Safari 16.4 之前版本会直接空白（不支持type的老浏览器依赖它）
responsive images 在 CSS 背景图里无效，<picture></picture> 只作用于内容图
<picture></picture> 是 HTML 内容层机制，对 background-image 完全无感。想让背景图响应式，得用 CSS 的 @supports + image-set()，或 JS 动态换 class。
立即学习“前端免费学习笔记（深入）”；
性能影响：误用 <picture></picture> 包裹仅用于背景的 <img alt="html怎么用picture标签优化_HTML如何通过Picture实现响应式图片" >，会导致多加载一张图（<img alt="html怎么用picture标签优化_HTML如何通过Picture实现响应式图片" > 本身 + 后续 CSS 覆盖），且无法懒加载（loading="lazy" 对背景图无效）。
- 如果图只是装饰性背景，别用
<img alt="html怎么用picture标签优化_HTML如何通过Picture实现响应式图片" >+<picture></picture>，直接 CSS 处理更轻量 - 如果图有语义（比如 banner 主图），必须用
<picture></picture>+<img alt="html怎么用picture标签优化_HTML如何通过Picture实现响应式图片" >，再用 CSS 控制尺寸，别试图用 background 实现 - 注意：CSS
image-set()兼容性仍有限（Chrome 89+、Safari 15.4+、Firefox 110+），旧版需 JS 补充
viewport width 计算以 layout viewport 为准，不是 device-width
浏览器用页面布局视口宽度（layout viewport）匹配 media="(min-width: 400px)"，不是设备物理宽度，也不是缩放后的视觉宽度。这导致在桌面端缩放页面时，media 查询可能意外触发。
容易踩的坑：sizes="(max-width: 600px) 100vw, 50vw" 中的 600px 指 CSS 像素，不是设备独立像素（DIP），在 DPR=2 的手机上，600px 对应 300 物理像素，但匹配逻辑不变。
- 不要用
device-width写 media，它已被废弃，且行为不一致（iOS Safari 有特殊处理） -
sizes值必须和实际 CSS 占位宽度一致，否则srcset选图会偏差——比如 CSS 设了width: 300px，但sizes="100vw"，浏览器就按全屏宽选图，浪费带宽 - 调试技巧：Chrome DevTools → Elements → 选中
<img alt="html怎么用picture标签优化_HTML如何通过Picture实现响应式图片" >→ 右侧 “Properties” 查看 “Current source” 和 “Computed sizes”，比猜靠谱
复杂点在于 sizes 和 CSS 的耦合是隐式的，改一个地方，另一处可能就失效；最容易被忽略的是服务器没配对 MIME 类型，或者 <source></source> 顺序写反了，导致新格式永远不生效。
