SiteCheck

Guides · Speed

How to make your images smaller

Images are often the largest files on a page. A photo straight from a camera or phone can be far wider than the space it fills on screen, and visitors download the whole file anyway. On a phone connection, that wait is easy to notice.

What your report means

Google's speed test raises these findings and estimates a saving for each.

Photo width against the space it fillsA bar chart at one scale. A photo fills 400 pixels on a phone. The uploaded file is 4000 pixels wide, and a resized copy is 800 pixels wide. Width of one photo, in pixels (example) Space it fills on a phone: 400 px Too big: uploaded at 4000 px Good: resized to 800 px The phone downloads the whole file, then shrinks it.
Bars are drawn to one scale. The 800 px copy leaves room for sharp phone screens.

How to fix it

  1. Find the images. Run the page at pagespeed.web.dev, Google's free test, which names the files. Your browser's developer tools show the width each one is displayed at.
  2. Resize the image to about twice that width. Sharp screens use the extra pixels.
  3. Compress it with an image plugin or an online compressor, and compare it with the original.
  4. Save it as WebP or AVIF if your platform accepts them. AVIF files are often smaller. WebP is a safe default for most sites.
  5. Lazy-load images further down the page. Do not lazy-load the main image at the top, because that delays it.

What to do on your platform

WordPress makes smaller copies of each upload and lets browsers choose between them. Recent versions also lazy-load many images on their own and accept WebP and AVIF, if your server's image software supports them. An image plugin can compress files you uploaded earlier. Image compression is not part of Yoast or Rank Math.

Shopify serves images from its own CDN and can resize and convert them. How well this works often depends on the theme. Lazy loading usually depends on the theme too. You can upload sensibly sized images and ask a developer to review the theme's image code.

Wix says it resizes and compresses uploads, converts them to WebP and lazy-loads them. Squarespace may also produce several image sizes and lazy-load them. On both, your main control is the file you upload. If an image is still flagged, replace it with a smaller one, and check images added through embeds or custom code.

What to ask a developer

Ask them to serve a set of sizes with srcset, set the width and height, and lazy-load images further down the page. Setting width and height stops the page from jumping as images arrive.

<img src="photo-800.webp"
     srcset="photo-800.webp 800w, photo-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 600px"
     width="800" height="600" alt="Describe the photo"
     loading="lazy">

How to check

In your browser's developer tools, open the Network tab, choose Img and reload the page. The Size column shows how much each image downloads. Replaced images may stay in a cache for a while, so give the change time to reach visitors. Then press Rescan on your report.

Check a page

More speed guides