If PageSpeed Insights lists “Properly size images”, your page is downloading pictures that are bigger than they appear on screen. A 3000 px photo shown in a 600 px column still downloads all 3000 px, which slows Largest Contentful Paint and wastes mobile data.

Here is how to find the offending images and fix them, with plain-language steps for both site owners and developers.

Key Takeaway: Match image pixels to display size. Resize the file first, then add srcset so each screen can pick the smallest file that still looks sharp.

What the Warning Means

PageSpeed (Lighthouse) compares each image's real pixel size with the size it is rendered at. When the file is much larger than needed, it flags the wasted bytes. The warning is part of the opportunities that affect load speed, covered in our guide to images and PageSpeed.

Note that high-density (retina) screens do need more pixels than the CSS size, commonly up to about twice the displayed width. The goal is to avoid sending far more than that.

Step 1: Find the Oversized Images

  1. Run your URL in PageSpeed Insights and open the “Properly size images” item.
  2. Note each image listed and its estimated savings.
  3. For each one, compare the file's pixel width with the width it is displayed at on the page.

Step 2: Resize and Compress the Files

For each flagged image, set the width to roughly the largest size it is displayed at, or up to about double for high-density screens, using the Resize tool. Then compress it with the compressor, and consider WebP for extra savings (see how to convert PNG to WebP). Our guide on resizing without losing quality covers the details.

Pro Tip: Resize down from the original, never up from a small file. Enlarging adds pixels but not detail.

Step 3: Serve Responsive Images with srcset

One size rarely fits every screen. Provide several widths and let the browser choose:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="533"
  alt="Describe the image"
/>

srcset lists the files and their real widths. sizes tells the browser how wide the image will display, so it can pick the right one. Setting width and height also prevents layout shift. If you use WordPress, it adds srcset automatically for images in the media library, so upload a sensibly sized original (see optimize images for WordPress).

Step 4: Re-test

Run PageSpeed again after deploying. The warning should shrink or disappear, and your LCP and total page weight should improve. If a hero image is still slow, check that it is also compressed and not lazy-loaded above the fold.

Frequently Asked Questions

What does 'Properly size images' mean in PageSpeed Insights?

It means the page downloads images with more pixels than are displayed. The extra pixels waste bandwidth and slow loading, especially on mobile.

How do I fix 'Properly size images'?

Resize each flagged image to about the size it is displayed at (up to roughly double for high-density screens), compress it, and use srcset and sizes so smaller screens get smaller files.

What size should my images be?

About the largest width they are displayed at, up to around twice that for sharp results on high-density screens. Avoid uploading full camera-resolution photos for a small slot.

What is srcset?

An HTML attribute on img that lists several versions of an image with their widths, so the browser picks the best one for the device and layout.

Will resizing images improve my SEO?

Smaller images can improve load speed and Core Web Vitals such as LCP, which are part of page experience. They help the experience, but they are one factor among many.

Summary: Match pixel size to display size, compress, use srcset and sizes, then re-test. Start with the free Resize tool and compressor.