How to Fix Lighthouse Warnings About Oversized Images in Shopify

While using Shopify, Lighthouse flagged a warning: “images not optimized” followed by a suggestion that reducing dimensions could significantly improve page performance. 

Should users compromise image size/quality for page performance?

Let’s get to the bottom of this.

A Real Product Example

Lighthouse claimed that reducing this image could save around 90 KB. At first glance, that sounds like a lot, but let’s look at the actual numbers.

What We Found:

• Viewport width: 375 px
  

• DPR: 2
  

• Required image width: 375 × 2 = 750 px
  

• Actual image width served: 780 px
  

So, the image is only 30 px wider than necessary. Can such a minor adjustment result in a 90 KB saving? Obviously, no.

Lighthouse likely calculates potential savings not just based on dimensions but also factoring in the compression level that Shopify applies automatically.

The Real Issue

We don’t have full control over how Shopify compresses images into WebP. This process happens on the fly, and the compression level isn’t always optimal. The only leverage we have is to upload already optimized images, so Shopify has a better starting point to compress them further.

What We Did

1. Found the product in the Shopify backend.
   

2. Downloaded the original image from ( Product metafields > Brand Summary Graphic).
   

3. Compressed it using Squoosh, choosing WebP as the format.
   

4. Re-uploaded the compressed version to Shopify.
   

Result:

• Before: 137 KB
  

• After: 83 KB
  

• Savings: ~77%
  

Results in Lighthouse

After optimization, the page performance improved from 32 to 37 points, and that’s from just one image! Lighthouse still suggested further reduction, but that would come at the cost of quality, and that’s not acceptable.

Key Takeaways

• Lighthouse sometimes overestimates potential savings, especially for images.
  

• The problem isn’t always dimensions – compression is often the bigger factor.
  

• The best strategy is to upload already optimized WebP images before Shopify processes them.
  

This way, we preserve quality, reduce file size, and achieve real, not theoretical, performance improvements.