To serve properly sized images in WordPress, upload images no larger than the widest space they will fill, let WordPress generate its resized copies, and make sure your theme requests the right size so the browser can pick from the srcset list. The PageSpeed Insights audit called “Properly size images” flags any image whose file is much larger than the space it is shown in.
What “properly size images” means
An image is the wrong size when the browser downloads more pixels than it can show. If a photo is 3000 pixels wide and your content column is 800 pixels wide, the visitor downloads a file several times bigger than needed and the browser scales it down on screen. The picture looks fine, but you paid for the extra bytes in load time.
The Lighthouse audit behind PageSpeed Insights checks each image against the size it renders at. It reports the wasted bytes and lists the files to fix. Google documents this in its Lighthouse guidance on responsive images. Screens with a high pixel density, such as phones, need more pixels than the CSS size suggests, so the target is not simply the display width. It is roughly the display width times the device pixel ratio, capped at a sensible maximum.
Fixing this helps your visitors and your search results, since page speed is part of the page experience signals Google looks at. Images are also usually the heaviest part of a page, so the gain is real. Our broader guide to speeding up a WordPress website covers the other levers.
How WordPress handles image sizes by default
When you upload an image, WordPress saves the original and creates several smaller copies. The standard set is thumbnail, medium, medium large and large, and themes and plugins can register more. WordPress also scales very large uploads down to a big maximum and keeps the original file as a backup. A modern WordPress install also adds a srcset attribute to the images it outputs in content, which lists the available copies and their widths.
The srcset attribute and its companion sizes attribute let the browser choose. The browser knows the screen width and pixel density. It reads the list, looks at how wide the image will display, and downloads the smallest file that still looks sharp. This is the core idea of responsive images, and the MDN page on responsive images explains the syntax well.
WordPress also adds loading=”lazy” to images by default, so images far down the page load only when the visitor scrolls near them. It skips lazy loading for the image most likely to be the main visible one, because lazy loading that image would slow the first paint. Core handles this logic for you in current releases.
Why you can still get the warning
The defaults help, but you can still see the audit fail. These are the usual causes:
- The theme asks for the wrong size. A theme template may request the full-size image where a medium one would do.
- Huge originals. A 6000 pixel photo straight from a camera creates a large file even when WordPress offers smaller copies.
- Images added by page builders or CSS. Background images set in CSS do not get a srcset, so the browser downloads one file for every screen.
- Hard-coded sizes. Images pasted as raw HTML or pulled in from a plugin may not carry srcset at all.
- Sizes that do not match the layout. The sizes attribute that WordPress writes assumes the image fills the content width, which can be wrong inside a narrow column or a grid.
- Old uploads. If you changed theme, the new theme’s image sizes do not exist for images uploaded earlier until you regenerate them.
Step by step: how to fix it
1. Find the offending images
Run your page through PageSpeed Insights and open the “Properly size images” audit. It lists each image, its current size and the potential saving. Fix the largest items first, because a few big images usually account for most of the waste.
2. Resize before you upload
Do not upload more pixels than you need. For a full-width hero on a wide layout, 2000 pixels is usually plenty. For a blog column, check the widest your content area gets, then double it for high-density screens. Any image editor can do this, and many export tools let you set a maximum width in one step.
3. Review the sizes your theme registers
Check the Media settings screen for the thumbnail, medium and large dimensions, and set them to match your layout. Remember that these values only affect new uploads. Your theme’s documentation lists any extra sizes it registers, and these matter more than the three defaults on most modern themes.
4. Regenerate thumbnails after changes
If you change a size or switch themes, old images will not have the new copies. A thumbnail regeneration tool, or the WP-CLI command wp media regenerate, rebuilds the copies for the existing library. Run it on a staging copy first for a large library, because it can take a while and uses a lot of disk space.
5. Use the right image in templates
If you write theme code, ask WordPress for an image by size name and let it output the srcset for you. This is example code:
<?php
// Example: output a featured image at the "large" size with srcset.
the_post_thumbnail( 'large' );
// Example: get an image tag for an attachment ID at a named size.
echo wp_get_attachment_image( $attachment_id, 'medium_large' );
?>Both functions add the srcset and sizes attributes. If your layout is unusual, you can filter the sizes attribute with the wp_calculate_image_sizes filter so the browser gets the real display width.
6. Be careful with CSS backgrounds
Background images do not get a srcset. If a large CSS background shows up in the audit, serve a smaller file at narrow widths with a media query, or switch to a real image element where the design allows it.
Choose the right format: JPEG, PNG, WebP, AVIF
Size in pixels is half the job. File format is the other half.
- JPEG suits photos and is supported everywhere.
- PNG suits logos, screenshots and graphics that need sharp edges or transparency, but it is large for photos.
- WebP is a modern format with good compression and wide browser support. WordPress accepts WebP uploads, and optimization plugins can convert your existing JPEGs.
- AVIF compresses even better in many cases and has broad browser support now. WordPress has added support for AVIF uploads and some image processing libraries on the server handle it for you. Support depends on your host’s image library, so test it.
Google’s web.dev has a short article on serving images in WebP if you want the reasoning. In practice, either let a plugin convert and serve the modern formats with a fallback for old browsers, or use a host or CDN that does it for you.
Image optimization plugins
A plugin automates compression, format conversion and often lazy loading. These are widely used options that are still actively maintained in the WordPress.org directory:
| Plugin | What it does |
|---|---|
| Smush | Compresses images, lazy loads, converts to WebP and offers a CDN |
| Imagify | Compresses and converts images to WebP and AVIF |
| EWWW Image Optimizer | Compresses and converts images, with optional resizing and lazy loading |
| ShortPixel Image Optimizer | Compresses images and converts them to WebP and AVIF |
| Optimole | Serves resized images from a cloud service, sized to each visitor’s screen |
| Performance Lab | The WordPress performance team’s plugin that tests upcoming core image and speed features |
Most have a free version, with paid plans for higher volumes or extra features, so check each plugin’s page for its current terms. Run only one image optimizer at a time. Two plugins that both rewrite images will fight each other. Our post on the best image optimization plugins for WordPress compares them in more depth, and the best plugins for website speed covers wider options.
Plugins that resize on the fly, such as Optimole, are the closest thing to a one-step fix for the audit, because they send each visitor an image matched to the screen. The trade-off is that you rely on an outside service to deliver your images.
Check your work
- Rerun PageSpeed Insights on the same URL, on the mobile tab as well as desktop.
- Open your browser’s developer tools, look at the Network tab filtered to images, and compare the file size with the on-screen size.
- View the page source for one image and confirm srcset and sizes are present.
- Check a few pages on a real phone over a normal connection.
- Clear your cache plugin’s cache before testing so you are not looking at an old copy. A good cache plugin helps most when images are already small.
Common mistakes
- Uploading camera originals without resizing them first.
- Using PNG for photographs.
- Running two optimization plugins at once.
- Changing themes without regenerating image sizes.
- Lazy loading the main image at the top of the page, which slows the first view.
- Judging results from a desktop test only, when most visitors are on phones.
Frequently asked questions
What does “properly size images” mean in PageSpeed Insights?
It means an image file is larger than it needs to be for the space it fills on the page. The audit lists each such image and the bytes you could save by serving a smaller version.
What size should my WordPress images be?
Match the widest space the image will fill, then allow for high-density screens, which means up to about twice the display width. For most content columns that lands well under 2000 pixels wide.
Does WordPress resize images automatically?
Yes. It creates several smaller copies of every upload and adds srcset so browsers can choose between them. It cannot fix an oversized original or a theme that requests the wrong size.
Do I need a plugin to fix this?
No. Resizing before upload and using the right theme sizes solves most cases. A plugin helps by compressing, converting to WebP or AVIF and handling the existing library in bulk.
Is WebP better than JPEG for WordPress?
WebP files are usually smaller for the same visual quality, and all current browsers support them. WordPress accepts WebP uploads, so it is a safe default for photos.
Does lazy loading fix oversized images?
No. Lazy loading delays when an image loads but does not make the file smaller. You still need correct dimensions and compression.
Why do my old images still fail after I changed the sizes?
Size changes only apply to new uploads. Regenerate the copies for your existing library with a regeneration tool or WP-CLI so old images get the new sizes.
Next steps
Start with the three heaviest images that PageSpeed Insights lists, fix those and test again. Then work down the list. For the rest of the performance picture, read our guide on what size image to use on WordPress and the roundup of WordPress image plugins.