为何Lighthouse要求我的图片尺寸为显示尺寸的4倍？——移动端低分辨率图片问题问询

Hey there, let's dig into why you're seeing this Lighthouse warning on mobile even though your image setup seems spot-on. I've run into similar issues with Next.js 12's image component, so here's what's going on and how to fix it:

Key Context: Device Pixel Ratio (DPR) #

First, let's clarify the core issue here. Lighthouse's mobile audit simulates high-DPR devices (think flagship phones with 3x or 4x pixel density). For these devices, a "display size" of, say, 200x200px actually translates to 800x800 physical pixels (200 * 4). If your source image is only 200x200px (matching the display size), it will be stretched to fit the physical pixels, causing blurriness—and that's why Lighthouse flags it. Desktop devices typically have lower DPR (1x or 2x), so the same 200x200px image works fine there.

Why This Happens with next/image in Your Setup #

Even though you've set width/height on the component and matched the container CSS, a couple of common Next.js-specific quirks might be causing this:

• Your source image isn't high-enough resolution: next/image generates different size variants based on your source image. If your source is only 1x the display size, Next.js can't magically create a 4x version—it will just serve the 1x image, which fails Lighthouse's high-DPR check.
• Missing sizes attribute: Without explicitly setting the sizes prop, Next.js defaults to 100vw for responsive images. Even though your container is fixed-size, Lighthouse might misinterpret the image's intended display size, leading it to expect a larger 4x variant.
• Restrictive deviceSizes configuration: If you've customized Next.js's deviceSizes array in next.config.js, make sure it includes values large enough to cover 4x DPR (e.g., if your display size is 200px, 800px should be in the deviceSizes list). Next.js won't generate image variants larger than the maximum value in this array.

Step-by-Step Fixes #

Let's walk through the solutions tailored to your setup:

1. Use a source image with 4x the display resolution
   If your image is displayed at 200x200px, make sure your source image is at least 800x800px. next/image will automatically generate 1x, 2x, 3x, and 4x variants from this source, serving the appropriate one based on the user's device DPR.

2. Add the sizes prop to your next/image component
   Since your layout uses fixed, predictable dimensions, set sizes to match the exact display size of the image. For example:

   <Image
     src="/your-image.jpg"
     alt="Description"
     width={200}
     height={200}
     sizes="200px" // Matches your container's fixed width
   />
   

   This tells Next.js exactly how the image will be displayed, ensuring it generates the correct high-DPR variants.

3. Verify your deviceSizes configuration
   Check your next.config.js to ensure the deviceSizes array includes sizes that cover 4x your display dimensions. The default array in Next.js 12 is:

   module.exports = {
     images: {
       deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
     },
   };
   

   If you've modified this, make sure the maximum value is at least 4x your largest display image size.

4. Validate the generated srcset
   Inspect your page's HTML to confirm next/image is outputting a srcset with multiple resolution variants. You should see something like:

   <img srcset="/_next/image?url=%2Fyour-image.jpg&w=200&q=75 1x,
                /_next/image?url=%2Fyour-image.jpg&w=400&q=75 2x,
                /_next/image?url=%2Fyour-image.jpg&w=800&q=75 4x"
        src="/_next/image?url=%2Fyour-image.jpg&w=800&q=75"
        alt="Description"
        width="200"
        height="200">
   

   If you don't see the 4x variant, double-check your source image size and deviceSizes config.

Final Check #

After implementing these changes, run the Lighthouse mobile audit again. The warning should disappear once Next.js is serving the appropriate high-DPR image variants for mobile devices.

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