What Size Should Images Be for a Website?
Oversized images are the most common cause of slow web pages, and page speed is a ranking factor. Here are concrete targets for dimensions, file size and format.
Target dimensions
These are the widths to export at. The rule underneath them is simple: never serve an image substantially wider than the largest box it will ever be displayed in.
- Full-width hero or banner: 1920 px wide
- Content-width feature image: 1200–1600 px
- Image inside an article: 800–1200 px
- Card or preview thumbnail: 400–600 px
- Avatar or icon: 100–200 px
- Open Graph social preview: exactly 1200 × 630 px
Target file sizes
These are comfortably achievable with correct dimensions plus quality around 75. If you are far above them, the cause is almost always dimensions rather than the quality setting.
- Hero image: under 200 KB
- Article image: under 100 KB
- Thumbnail: under 30 KB
- Whole page, all images combined: under 1 MB
Why this affects your search rankings
Google measures Largest Contentful Paint — how long until the biggest visible element finishes rendering — and uses it as a ranking signal. On most pages that largest element is an image.
The effect compounds on mobile. A 4 MB hero image that loads instantly on office broadband can take many seconds on a phone with a weak signal, and visitors leave before it appears. You lose the visit and the ranking signal together.
Retina screens, without overdoing it
High-density displays pack two or more physical pixels into each CSS pixel, so an image displayed at 800 px can look soft unless you supply more data. The standard advice is to export at twice the display size.
In practice, 2× at quality 60 usually beats 1× at quality 90 for both sharpness and file size — because compression artefacts become invisible once the pixels are that small. Use srcset to let the browser choose, rather than serving your largest image to everyone.
Which format
WebP is supported by every browser in current use and typically saves 25 to 35 percent over JPEG at matching quality. For a media-heavy page that is often the single largest speed improvement available.
- Photographs: WebP, with JPEG as a fallback if you support very old browsers.
- Logos, icons, diagrams: SVG where possible, PNG otherwise.
- Screenshots: PNG, or WebP which handles them well.
- Anything needing transparency: PNG or WebP, never JPEG.
A workflow that takes two minutes
- Decide the largest width the image will be displayed at.
- Resize to that width — or double it for high-density screens.
- Convert to WebP at quality 75.
- Check the file size against the targets above.
- If it is still too large, drop to quality 60 before reducing dimensions further.