If you’ve ever run your site through Google PageSpeed Insights and gotten a disappointing score, there’s a good chance images are the biggest single reason — even if your site otherwise looks fast to you when you click around it.
Here’s why image size matters so much to your score, and exactly what to fix first.
Table of Contents
Why Images Dominate Page Speed Scores
On a typical webpage, images make up 50-70% of total page weight — far more than your HTML, CSS, or JavaScript combined in most cases. That means even small inefficiencies in how images are sized and compressed have an outsized effect on load time compared to almost anything else you could optimize.
Google’s PageSpeed Insights specifically flags this under a few common audit warnings:
- “Properly size images” — you’re serving an image larger than it’s actually displayed at
- “Efficiently encode images” — the image isn’t compressed enough for its format
- “Serve images in next-gen formats” — you’re using JPG/PNG where WebP or AVIF would be smaller
- “Defer offscreen images” — images below the fold are loading immediately instead of when needed (lazy loading)
Image Size PageSpeed Score: How It Affects Your Ranking
The Core Web Vitals Connection
Google’s Core Web Vitals — the metrics that directly factor into search rankings — are heavily affected by image handling:
- Largest Contentful Paint (LCP): measures how long it takes for the largest visible element (very often a hero image or featured image) to load. An oversized, uncompressed image is one of the most common causes of a poor LCP score.
- Cumulative Layout Shift (CLS): measures visual stability. Images without defined width/height attributes cause the page to jump around as they load in — a frustrating experience that also hurts your score.
Fixing image size and format issues is often the single highest-leverage thing you can do to improve both of these metrics at once.
What “Properly Sized” Actually Means
A common mistake: uploading a 4000px-wide photo straight from a camera or phone, then letting CSS visually shrink it down to fit an 800px-wide content column. The browser still has to download the full 4000px file — the CSS resizing only changes how it looks, not how much data was transferred.
The fix: resize the actual image file to match (or slightly exceed, for retina screens) the maximum size it will ever be displayed at — not the size your camera or phone originally captured it at.
Practical Benchmarks to Aim For
- Hero/featured images: ideally under 200KB after compression
- In-content images: ideally under 100KB each
- Thumbnails/icons: under 20-30KB
These aren’t hard rules — a highly detailed photo may need slightly more data than a simple graphic — but they’re a solid target range for most website use cases.
Quick Checklist to Improve Your Score
- Resize every image to its actual maximum display width (see our guide on compressing images without losing quality for the full process)
- Convert to WebP where possible — see our JPG vs PNG vs WebP comparison if you’re unsure which format fits your situation
- Compress at 75-85% quality rather than 100%
- Add explicit
widthandheightattributes to your<img>tags so the browser reserves the correct space before the image loads (prevents layout shift) - Enable lazy loading for images below the fold (most modern themes and plugins support this natively)
Fix It Without Any Software
You don’t need design software or a paid plugin to properly resize and compress your images — you can do it directly in your browser, for free. Set your max width to match your content column, compress at 80% quality, and you’ll typically cut file size dramatically with no visible quality difference — directly addressing the most common PageSpeed warnings in one step.
Frequently Asked Questions
Do images really affect Google rankings?
Indirectly, yes. Image size is one of the biggest factors in Core Web Vitals metrics like Largest Contentful Paint, and Core Web Vitals are a confirmed ranking factor. A page loaded down with oversized images will generally score worse on these metrics, which can affect search visibility, especially in competitive niches where other ranking factors are similar.
What is a good PageSpeed score?
Google considers 90-100 “good,” 50-89 “needs improvement,” and below 50 “poor.” Image optimization alone is often enough to move a site from the “needs improvement” range into “good,” since images are typically the largest contributor to page weight.
How much can compressing images improve load time?
It varies by site, but it’s common to see total page weight drop by 40-70% just from properly resizing and compressing images — which often translates to a load time improvement of several seconds on image-heavy pages.