Best image size for a website
A practical guide · Updated June 2026
Two numbers decide whether an image helps or hurts a web page: its dimensions in pixels, and its file size in kilobytes. They are related but not the same, and getting either wrong is the most common reason a site feels slow.
Dimensions versus file size
Dimensions are how wide and tall the picture is. File size is how many bytes it takes to store. A 4000-pixel-wide photo displayed in a 800-pixel-wide column looks no better than an 800-pixel one — the browser throws the extra detail away — but it still costs the visitor every byte of the download. That is pure waste, and on a phone connection it is waste the visitor feels.
Recommended sizes by element
These are practical targets, not laws. Aim for the width, then compress until you are under the size budget:
| Where it appears | Width (px) | Target file size | Format |
|---|---|---|---|
| Full-width hero / banner | 1920 | under 200 KB | WebP |
| Blog post image (in-column) | 1200 | under 150 KB | WebP |
| Half-width / card image | 800 | under 100 KB | WebP |
| Thumbnail | 400 | under 50 KB | WebP |
| Product photo (with zoom) | 1500 | under 200 KB | WebP |
| Logo | native size | under 20 KB | SVG, or PNG |
| Icon | 48–96 | under 10 KB | SVG |
| Open Graph / social preview | 1200 × 630 | under 150 KB | JPG or WebP |
If you remember one row, make it the blog image: 1200 pixels wide and under 150 KB covers the overwhelming majority of pages on the web.
Why 2× for high-density screens
Phones and modern laptops pack two or three physical pixels into each CSS pixel. An image displayed in a 600-pixel-wide slot therefore looks sharper if the file itself is about 1200 pixels wide. That is where the recommendations above come from — they already assume a roughly 2× buffer for a typical column width. Going beyond 2× is wasted bytes; nobody can see 3× on a photograph.
Never upload the camera original
A modern phone photo is commonly 4000 pixels wide and 3–6 MB. Dropped straight into a page it is roughly thirty times heavier than it needs to be. The fix is two steps in this order:
- Resize to the width from the table. This does most of the work — file size falls roughly with the square of the width, so halving the width cuts about three quarters of the bytes.
- Compress to hit the KB budget. Quality 75–85% is visually identical for photographs.
Doing it in the other order wastes effort, because you carefully compress detail you are about to throw away.
Choosing the format
- WebP — the default for photographs and most graphics on a modern site. Typically 25–35% smaller than JPG at the same visual quality, supported by every current browser.
- JPG — a safe fallback for photos where maximum compatibility matters, and still fine for email or older systems.
- PNG — only when you need lossless quality or transparency, such as screenshots with sharp text. Never for large photographs.
- SVG — logos, icons and line art. It is code, not pixels, so it stays sharp at any size and is usually tiny.
If you are unsure which applies, our format comparison covers the trade-offs in more depth.
Serving different sizes to different screens
Ideally a phone downloads a small file and a desktop downloads a larger one. HTML does this with srcset: you export the same picture at two or three widths and let the browser pick. In plain terms, you provide 400, 800 and 1200 pixel versions, tell the browser how wide the slot is, and it downloads exactly one of them. Most site builders and CMS platforms generate these variants automatically — if yours does, the main thing you control is the size of the file you upload in the first place.
Why this affects search rankings
Google measures Largest Contentful Paint — how long until the biggest visible element finishes loading. On a typical page that element is an image, so image weight directly drives the score. The practical target is under 2.5 seconds. An oversized hero image is the single most common reason a page misses it, and it is also the easiest to fix: nothing about the design has to change.
A worked example
You are publishing a blog post with one header image and three inline photos, straight from a phone. The originals are about 4.5 MB each — 18 MB in total, which on a mid-range mobile connection is roughly a twenty-second wait before the page settles.
Resize the header to 1200 pixels wide and the three inline photos to 1000, then export everything as WebP at 80% quality. The header lands near 140 KB and the inline photos near 90 KB each. Total: about 410 KB — a 97% reduction, with no visible difference on screen. That single pass will usually move a page from failing its LCP target to passing it.
Frequently asked questions
What is the best image size for a website?
For a full-width hero image use 1920 pixels wide and keep it under 200 KB. For images inside a blog post or content column, 1200 pixels wide and under 150 KB is the practical sweet spot. Thumbnails can be 400 pixels wide and under 50 KB. Export as WebP where you can, since it is typically 25–35% smaller than JPG at the same quality.
Should I resize or compress an image first?
Resize first, then compress. Resizing removes pixels you were never going to display, and file size falls roughly with the square of the width, so it does most of the work. Compressing afterwards fine-tunes the file down to your kilobyte budget. Doing it the other way round means carefully compressing detail you are about to discard.
Do large images hurt SEO?
Indirectly but measurably. Google tracks Largest Contentful Paint, which is how long the biggest visible element takes to load, and on most pages that element is an image. Oversized images push that time past the 2.5-second target, which affects both the page experience signal and real visitor behaviour, since slow pages get abandoned.
Get your images to size — free, in your browser
No uploads, no account. Resize first, then compress:
- Image Resizer — set the exact pixel width from the table above.
- Image Compressor — hit your KB budget with a quality slider.
- Image Converter — export to WebP for the smallest files.