使用2x DPR图片导致Lighthouse评分下降的技术问题

我正在尝试在不影响性能的前提下优化图片加载，用了一个React组件，能根据设备DPR（设备像素比）和图片宽度自动匹配合适的图片尺寸。
图片分电脑端、平板端、移动端三种规格，我已经手动确定了每张图片的最佳宽高比。比如，要是图片渲染尺寸是400x1000，1x DPR版本就是400x1000，2x DPR版本则是800x2000，会根据设备DPR和页面宽度选择对应图片。

虽然2x DPR图片是匹配设备的正确尺寸，但用它们会导致Lighthouse评分下降；如果只用1x DPR图片，Lighthouse评分不受影响，但图片画质会明显变差。

当前组件代码 #

<picture style={{ display: "contents" }}>
  // COMPUTER (shown if width > 800px)
  <source
    srcSet={`${name}-computer-1x.${ext} 1x, ${name}-computer-2x.${ext} 2x`}
    media="(min-width: 800px)"
  />
  // TABLET (shown if width > 400px and < 800px)
  <source
    srcSet={`${name}-tablet-1x.${ext} 1x, ${name}-tablet-2x.${ext} 2x`}
    media="(min-width: 400px)"
  />
  // MOBILE (shown if width < 400px)
  <source
    srcSet={`${name}-mobile-1x.${ext} 1x, ${name}-mobile-2x.${ext} 2x`}
  />
  // FALLBACK (Older browsers)
  <img
    src={src}
    alt={alt}
    fetchpriority={priority ? "high" : "auto"}
    {...otherProps}
    ref={ref}
  />
</picture>

1. 给图片明确渲染尺寸 #

Lighthouse扣分的核心是浏览器没法提前确定图片的渲染尺寸，可能加载了远超实际需求的大图。必须给<img>标签加上width和height属性，再配合CSS的max-width: 100%; height: auto;保证响应式缩放，让浏览器能精准计算所需图片尺寸，选对DPR版本。

修改后的<img>：

<img
  src={src}
  alt={alt}
  fetchpriority={priority ? "high" : "auto"}
  width={baseWidth} // 对应设备下的基础渲染宽度，比如电脑端设1200、平板600、移动端375
  height={baseHeight} // 按你确定的宽高比算出的高度
  style={{ maxWidth: "100%", height: "auto" }}
  {...otherProps}
  ref={ref}
/>

如果各设备宽高比一致，也可以用动态计算或者CSS变量来设置宽高。

2. 用宽度描述符替代DPR描述符 #

原来的x描述符只看设备DPR，结合media查询时，用**w宽度描述符**配合sizes属性，能让浏览器根据实际渲染宽度选图，更精准。比如电脑端基础宽度1200px，1x版本标1200w，2x标2400w，再用sizes告诉浏览器当前媒体查询下图片的渲染宽度：

修改<source>示例：

// 电脑端
<source
  srcSet={`${name}-computer-1x.${ext} 1200w, ${name}-computer-2x.${ext} 2400w`}
  media="(min-width: 800px)"
  sizes="100vw" // 表示该场景下图片占满视口宽度
/>

这样浏览器会结合视口宽度和设备DPR，自动挑最匹配的图片，不会加载过大资源。

3. 优化图片格式与压缩 #

尺寸对了但体积太大也会拖垮评分，建议：

• 优先用WebP/AVIF格式，相同画质下体积比JPG/PNG小很多
• 用工具批量压缩图片，保证画质的前提下压到最小体积
• 给<source>加type属性，让浏览器优先加载高效格式，再留JPG/PNG做降级：

// 优先加载WebP
<source
  type="image/webp"
  srcSet={`${name}-computer-1x.webp 1200w, ${name}-computer-2x.webp 2400w`}
  media="(min-width: 800px)"
  sizes="100vw"
/>
// 降级用原格式
<source
  srcSet={`${name}-computer-1x.${ext} 1200w, ${name}-computer-2x.${ext} 2400w`}
  media="(min-width: 800px)"
  sizes="100vw"
/>

4. 合理使用fetchpriority #

只有首屏关键图才设fetchpriority="high"，非关键图保持auto，别抢占其他资源的加载优先级，影响整体性能。

内容的提问来源于stack exchange，提问作者Tidris