<picture>本身不降低带宽，需配合srcset、sizes、type和现代格式才能让浏览器精准请求所需图片。media限定适用场景，sizes告知渲染宽度，type声明MIME类型，三者缺一不可；冗余srcset、缺失sizes或服务器MIME配置错误均会导致无效请求。
直接结论：用 <picture> 本身不降低带宽，但配合 srcset、sizes、现代格式（webp/avif）和精准的 media 条件，能让浏览器只请求它真正需要的那张图——这才是压降带宽的核心。
为什么单纯写 <picture> 没用？
很多人把 <picture> 当成“自动优化开关”，写了就以为带宽下来了。其实它只是个调度容器，浏览器是否跳过某张图，取决于你给它的线索是否足够明确、是否冗余。常见错误包括：
- 所有
<source>都没写media或sizes，浏览器默认按100vw算，哪怕图片只占 300px 宽，也拉一张 1920w 的图 -
srcset里塞了 10 个宽度点（320w、400w、480w…），但 CSS 布局只在768px和1200px切换，多余选项照样触发预加载 - 没加
type属性，浏览器试错式请求多个<source>，遇到 406 错误才换下一个，白白浪费一次 TCP 连接
必须配齐的三个属性：media / sizes / type
这三个是让浏览器“少发请求”的铁三角，缺一不可：
-
media（在<source>上）：告诉浏览器“这张图只在满足这个媒体查询时才考虑”。例如media="(min-width: 1200px)"，小屏设备直接跳过该<source> -
sizes（在<img>上）：告诉浏览器“这张图在当前布局下实际会渲染多宽”。例如sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"，浏览器据此从srcset中选最接近的尺寸 -
type（在<source>上）：显式声明 MIME 类型，如type="image/webp"。浏览器看到不支持的格式，直接跳过，不发请求
示例：
立即学习“前端免费学习笔记（深入）”；
<picture> <source media="(min-width: 1200px)" srcset="hero-1920.webp" type="image/webp"> <source media="(min-width: 768px)" srcset="hero-768.webp" type="image/webp"> <source srcset="hero-320.webp" type="image/webp"> <img src="hero-320.jpg" alt="首页横幅" sizes="(max-width: 768px) 100vw, 50vw"> </picture>
现代格式 + 服务端 MIME 配置才是关键杠杆
WebP/AVIF 文件体积比 JPEG 小 30%–50%，但前提是浏览器真能拿到它们，而不是 fallback 到 JPG。这依赖两件事：
- 每个
<source>必须带type，且值与文件真实格式一致（image/avif不是image/avif+webp） - Web 服务器必须对
.webp返回Content-Type: image/webp，对.avif返回Content-Type: image/avif；返回application/octet-stream或空值，会导致 406 错误并降级 - 不要把 WebP 和 AVIF 混在同一个
<picture>里还共用srcset——浏览器不会“比较哪个更小”，只会按顺序取第一个匹配的
容易被忽略的带宽黑洞：未设 width/height 的 img
这不是网络请求问题，但会间接推高带宽压力。如果 <img> 没设 width 和 height，浏览器无法预留空间，导致 layout shift。用户感知“卡顿”后反复刷新，或因 LCP（最大内容绘制）超时被 Chrome 强制重取资源，反而增加请求数。正确做法：
- 用原始图宽高写内联属性：
<img width="1200" height="400" ...> - 或用 CSS
aspect-ratio: 3/1（注意 Safari 15.4+ 支持，旧版需 padding-top 技巧） - 绝对不要依赖
object-fit或max-width: 100%来“撑开容器”，它们不参与初始布局计算
带宽不是靠标签堆出来的，是靠浏览器真的不发那些请求才省下来的。重点永远在：删掉不用的 srcset 项、写准 sizes、配对 type 和服务器 MIME、堵住 layout shift 引发的重试链路。
