Resize Images for Website Speed: Right Sizes
· 5 min read
Serve the size you display, not the size you have. An image shown at 800 pixels but stored at 4000 makes the browser download twenty-five times more data than it renders. Double your display width to cover high-density screens, then stop — beyond 2x the returns vanish and the file size does not.
Images are usually the heaviest thing on a page, and most of that weight is pixels nobody sees. Serving the right dimensions is the largest performance win available to most sites.
On this page
Serve the size you display, not the size you have
An image shown at 800 pixels wide but stored at 4000 carries twenty-five times the pixel data it needs. The browser downloads all of it and then throws most of it away during rendering.
Fixing that is usually a bigger win than any compression setting. Compress after resizing, not instead of it.
Sizes that cover most layouts
Double your display width to cover high-density screens, then stop. Beyond 2× the returns vanish and the file size does not.
These are starting points rather than rules — measure your own layout and use its actual widths.
| Use | Display width | Export at |
|---|---|---|
| Full-width hero | 1200–1600px | 2400px |
| Content image | 700–800px | 1600px |
| Card or tile | 300–400px | 800px |
| Thumbnail | 100–150px | 300px |
| Logo | under 200px | 400px, or SVG |
Budgets worth holding to
Aim for under 200 KB for a hero image and under 50 KB for anything smaller. A page whose images total more than about 1 MB will feel slow on a phone regardless of how fast the server is.
Largest Contentful Paint is usually determined by the biggest image above the fold. That one image is worth more attention than all the others combined.
Responsive images and why one size is rarely enough
A phone and a desktop display the same image at very different widths. Serving one file sized for the desktop means phones download several times more data than they can use, on the connection least able to afford it.
Exporting two or three widths and letting the browser choose with a srcset is the standard fix, and it is usually the single biggest mobile performance improvement available.
How to find your real display widths
Every recommendation here is a starting point, and your layout's actual numbers beat all of them. Open the page, right-click an image and inspect it — the browser reports both the natural size of the file and the size it is being drawn at.
The ratio between those two numbers is your waste. A file 3200 pixels wide rendered into an 800-pixel slot is downloading sixteen times the data it draws, and that number is measured rather than guessed.
Chrome's Lighthouse audit reports the same thing across a whole page under 'properly size images', with the saving in kilobytes attached to each one. It is the fastest way to find the worst offenders on a site you did not build.
Why the hero image deserves separate attention
Largest Contentful Paint measures when the biggest visible element finishes rendering, and on most pages that is one image above the fold. Every other image on the page is downloaded after it and does not count towards the metric.
So a page with twenty images and one oversized hero has one problem, not twenty-one. Fix the hero first, and give it priority loading so the browser fetches it immediately rather than discovering it partway through parsing.
Formats matter as much as dimensions
Once the dimensions are right, converting to WebP typically removes another quarter to a third with no visible change. The two optimisations compound rather than overlapping.
Keep PNG only for logos, icons and screenshots containing text, where lossless output actually matters.
Common questions
What size should website images be?
It depends on use: hero images 1920px wide (max 200 KB), blog content images 1200px wide (max 150 KB), product thumbnails 600px wide (max 80 KB), avatars 200px (max 30 KB). Always pair resizing with compression for best results.
Does image size affect Google rankings?
Yes. Google uses Core Web Vitals including LCP (Largest Contentful Paint) as a ranking signal. Large, unoptimised images are the most common cause of poor LCP scores, which can directly hurt your search rankings.
What is the best image size for a blog post?
1200px wide is the practical maximum for blog post content images. Most blog layouts are narrower than this. Setting the width to 1200px and compressing to WebP at 80% quality typically gives files under 150 KB.
How do I resize images for a WordPress website?
Resize to your theme's content width before uploading, usually around 1200px, and convert to WebP. WordPress generates its own sizes from whatever you give it, so starting from a 5000-pixel original just fills the media library with variants nobody serves.
How do I know if my images are too big?
Right-click an image and inspect it — the browser shows both the file's natural size and the size it is drawn at. The gap between those two numbers is wasted bandwidth. Lighthouse reports the same across a whole page under 'properly size images'.
Do I need multiple sizes of each image?
For anything displayed at very different widths on phone and desktop, yes. Exporting two or three widths and letting the browser choose with srcset is usually the single largest mobile improvement available.
Which image should I optimise first?
The largest one above the fold. It almost always determines Largest Contentful Paint, and every image below it is downloaded afterwards and does not affect the score.