lighthouse不因使用picture标签直接加分，仅当media括号完整、sizes匹配布局、type与content-type严格一致时才认可响应式图片生效。
Picture 标签本身不直接提升 Lighthouse 性能评分，但它能显著降低实际图像加载带宽和请求数——前提是写对了条件；写错一个 media 括号或 sizes 单位，Lighthouse 会照常显示“未使用响应式图片”警告，而你页面其实只在加载兜底图。
为什么 Lighthouse 不买账？常见误配导致“假响应式”
Lighthouse 的“Properly size images”和“Serve images in next-gen formats”两项检查，依赖真实网络请求行为，而非 HTML 结构是否含 <picture></picture>。它看的是：最终加载了哪张图、多大、什么格式、是否超宽。
- 所有
<source></source>都因media="(max-width: 768px)"缺括号而被跳过 → 只加载<img src="hero-3200.jpg">→ Lighthouse 报“图像过大”，即使你写了 6 个srcset -
sizes="(max-width: 768px) 100vw"写成sizes="100%"→ 浏览器按默认100vw计算 → 在 375px 宽手机上仍拉hero-1920w.jpg→ “未正确设置尺寸”警告必现 -
type="image/webp"但 Nginx 返回Content-Type: image/jpeg→ Chrome 标为blocked:mime-type→ Network 面板里该<source></source>请求灰掉 → Lighthouse 无法检测到 WebP 加载成功
真正起效的三个硬性条件
只有同时满足这三点，Lighthouse 才可能给你加分：
-
<source></source>的media值必须完整带括号：media="(min-width: 768px)"✅，不是media="min-width: 768px"❌ -
sizes必须是媒体条件 + 宽度单位组合，且与 CSS 实际布局一致：sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"✅；若你用grid-template-columns: 1fr 1fr，那33vw就是错的，应是50vw -
type属性值必须与服务器返回的Content-Type完全一致（大小写、拼写、空格）：type="image/avif"对应Content-Type: image/avif，type="image/webp"不能写成type="image/WebP"
Network 面板才是你的真实评分仪表盘
Lighthouse 是快照工具，而 Network 面板反映实时决策。验证是否生效，直接做三件事：
- 在 Chrome DevTools 的 Network 标签页中，筛选
Img，刷新页面，看加载的是哪张图、宽度后缀（如-400w.jpg）、格式（.webp还是.jpg） - 把设备模拟调到 375px 宽，确认请求的是
hero-400w.webp而非hero-1920w.jpg；再切到桌面 1920px，确认加载的是hero-1920w.webp而非兜底hero.jpg - 右键查看某张图的响应头，确认
Content-Type与对应<source type="..."></source>完全匹配；不匹配 = 该源被静默丢弃
最常被忽略的一点：Lighthouse 的“响应式图片”建议只针对 <img> 单标签场景；一旦用了 <picture></picture>，它就转而检查你是否真让浏览器选到了更小、更现代的资源——而不是看你有没有写这个标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
