Serve images near the size they appear on the screen. That is the fastest win for WordPress page speed. Do not make a phone download a giant 2400px photo just to show it as a tiny 360px card. That is like ordering a sofa to use as a footstool.
TLDR: Properly scaled images are images that match their display size. If your WordPress page shows an image at 600px wide, do not serve a 2500px file. One small business blog cut image weight from 5.2 MB to 1.6 MB by resizing hero and product images, then saw mobile load time drop from 4.9 seconds to 2.7 seconds. Use WebP, responsive image sizes, lazy loading, and a good image plugin to do most of the boring work.
What “properly scaled” means
A properly scaled image is not too big for its job.
If a blog thumbnail appears at 300 x 200 pixels, the browser should not download a 3000 x 2000 pixel file. That extra size adds weight. Weight adds waiting. Waiting makes people leave.
Google PageSpeed Insights often calls this issue “properly size images.” It means the browser is getting more pixels than it needs.
Honestly, it feels like WordPress enjoys hiding image sizes in five different places. The Media Library has one size. The theme has another. The page builder may add more. Then CSS squishes everything anyway. Cute. Annoying, but fixable.
Why big images slow WordPress down
Images are often the largest files on a page. Bigger files take longer to download. They also take longer to decode and paint on the screen.
This hurts key speed metrics, such as:
- LCP: Largest Contentful Paint. This is often your hero image.
- CLS: Cumulative Layout Shift. This happens when images load without set dimensions.
- Page weight: The total size of everything loaded by the page.
- Mobile speed: The place where bad image habits hurt most.
A desktop user on fiber may not notice. A mobile user on a weak signal will. They will stare at a blank space. Then they will leave. Rude? Maybe. Normal? Yes.
Step 1: Find the oversized images
Start with a speed test. Do not guess.
Use one or more of these tools:
- PageSpeed Insights: Great for Core Web Vitals tips.
- GTmetrix: Easy reports and waterfall charts.
- Chrome DevTools: Best for checking actual image dimensions.
In PageSpeed Insights, look for “Properly size images” or “Serve images in next-gen formats.” Click the warning. It will show file names and possible savings.
In Chrome, right click the page. Choose Inspect. Open the Network tab. Reload the page. Filter by Img. Now you can see every image and its file size.
Expect to waste time on file names like IMG_4827-final-final-real.jpg. We have all been there.
Step 2: Resize before upload
This is the cleanest fix.
If your blog content column is 760px wide, there is no need to upload a 4000px wide image. Resize it first.
Good starting sizes:
- Hero images: 1600px wide, sometimes 1920px for full-width designs.
- Blog images: 900px to 1200px wide.
- Thumbnails: 300px to 600px wide.
- Product images: 800px to 1200px wide, depending on zoom needs.
These are not magic numbers. They are sane numbers. Your layout decides the best size.
Use tools like Photoshop, Affinity Photo, Canva, Squoosh, or TinyPNG. Keep the image crisp. Do not crush it into a blurry potato.
Step 3: Set WordPress image sizes
WordPress creates extra sizes when you upload an image. These usually include thumbnail, medium, large, and full size.
Go to:
Settings > Media
Set sizes that match your theme. For example:
- Thumbnail: 300 x 300
- Medium: 768px wide
- Large: 1200px wide
After changing these settings, old uploads will not magically update. Of course they will not. That would be too nice.
Use a plugin such as Regenerate Thumbnails to rebuild image sizes for older media files.
Step 4: Use the right image in the editor
When you add an image in the WordPress block editor, check the image size setting. Do not always choose Full Size.
Pick a size close to the display area:
- Use Medium for small in-content images.
- Use Large for wide blog images.
- Use Full Size only when it truly makes sense.
This one habit can cut a lot of wasted bytes.
Step 5: Let responsive images do their thing
WordPress supports responsive images by default. It adds srcset and sizes attributes to image HTML.
That sounds fancy. The idea is simple.
The browser gets a menu of image sizes. Then it picks the best one for the screen. A phone gets a small image. A big monitor gets a larger one.
This works best when your theme uses normal WordPress image functions. Some themes and page builders mess this up. If PageSpeed keeps yelling about oversized images, your theme may be serving the wrong file.
Step 6: Convert to WebP or AVIF
JPEG and PNG still work. But WebP and AVIF are usually smaller.
WebP is widely supported. AVIF can be even smaller, but it may take more processing time.
Use an image optimization plugin such as:
- ShortPixel
- Imagify
- EWWW Image Optimizer
- Smush
- Optimole
Most of these can:
- Compress images.
- Create WebP versions.
- Resize large uploads.
- Serve smaller images on mobile.
Set a max upload width. Try 1600px or 1920px. This stops huge camera photos from sneaking in.
Step 7: Fix CSS background images
Background images are sneaky. WordPress responsive image tools do not always handle them.
If your theme uses a giant background image for a section, mobile users may still download the desktop version.
Use smaller background images with CSS media queries. For example, serve one image for desktop and another for phones.
You can also use an image CDN that resizes images based on screen size. This is helpful for stores, magazines, and sites with many images.
Step 8: Lazy load the right images
Lazy loading delays images until they are near the screen. WordPress adds lazy loading by default for many images.
This is great for images lower on the page.
But do not lazy load your main hero image. That can hurt LCP. The top image should load fast and early.
Simple rule:
- Above the fold: Load right away.
- Below the fold: Lazy load.
Step 9: Add width and height
Images need width and height attributes. This helps the browser reserve space before the image loads.
Without dimensions, the page can jump around. Buttons move. Text shifts. Users tap the wrong thing. Everyone gets cranky.
Most modern WordPress themes add these attributes. Still, check your pages. PageSpeed Insights will warn you about layout shifts.
Quick checklist
- Run PageSpeed Insights.
- Find oversized images.
- Resize images before upload.
- Set sane WordPress media sizes.
- Regenerate old thumbnails.
- Use WebP or AVIF.
- Pick the right image size in the editor.
- Fix large CSS background images.
- Lazy load only below-fold images.
- Keep width and height attributes.
The simple rule to remember
Do not make visitors download pixels they will never see.
If an image shows at 600px wide, serve something close to that. Compress it. Use WebP. Let WordPress offer responsive versions. Then test again.
Properly scaled images are not glamorous. They are not exciting. But they work. Your pages get lighter. Your visitors wait less. Google complains less. That is a pretty good deal for trimming a few oversized photos.