Best Image Size for Websites: Speed Up Your Pages
By kizura · Updated July 2026
Why image size matters for websites
Photos are usually the heaviest part of a web page, and heavy pages load slowly. Slow loading frustrates visitors, increases bounce rates, and hurts search ranking, since Google uses page speed as a signal. The goal is to serve images that look sharp at the size they are displayed, without making the browser download far more data than necessary. Getting this right is one of the easiest and highest-impact speed improvements you can make.
Right-size your dimensions
A common mistake is uploading a 4000-pixel-wide camera photo to display in a 600-pixel-wide column. The browser downloads the full file and shrinks it, wasting bandwidth. Instead, resize images to roughly the size they will actually display, with a little extra for high-resolution screens. As a rule: full-width hero images up to about 2000 pixels wide, in-content images 1200 to 1600 pixels, thumbnails 300 to 600 pixels.
Compress and choose the right format
Once resized, compress it. WEBP is the best default for the web, usually 25 to 35 percent smaller than JPG at the same quality, with PNG-like support for transparency. Use JPG when you need maximum compatibility, and PNG only for graphics that need lossless edges or transparency. Aim to keep most content images under a few hundred kilobytes; hero images can be larger but should still be optimized.
A simple optimization workflow
For each image: first resize it to the maximum width it will display at, then convert to WEBP, then compress to the smallest size that still looks clean in the preview. If you have many images, batch them. This three-step pass typically cuts image weight by more than half with no visible quality loss, noticeably speeding up your pages.
When to upscale instead
Occasionally the opposite problem occurs: the only image you have is too small and looks soft when displayed at the needed size. In that case, upscale it with AI first to reach the right dimensions sharply, then compress for the web. Starting from a crisp, correctly sized image always produces the best web result.
Questions people ask
What size should website images be? Match the display size: most content images should be 1200-2000 pixels wide at most, saved as WEBP under a few hundred KB. Hero images can be larger; thumbnails much smaller.
Do image sizes affect SEO? Yes. Large, unoptimized images slow page loading, and page speed is a ranking factor. Optimized images help both speed and search ranking.
What format is best for web images? WEBP for most images, as it is smaller than JPG and PNG at similar quality and supported by all modern browsers.
Related: All guides · AI Upscaler · Enlarge image · Compress image
Recommended pixel sizes, slot by slot
“Best size” has no single answer — it depends on the widest each image will ever be displayed, doubled for high-density (retina) screens. These targets cover the common slots on a 2026 website:
| Where the image goes | Displayed width (typical) | Export at | Notes |
|---|---|---|---|
| Full-bleed hero | up to ~1,920 px | 1,920–2,400 px | the one place big files are justified |
| Content-column photo | 680–760 px | 1,400–1,600 px | 2× the column for retina |
| Half-column / card image | 300–400 px | 700–800 px | |
| Thumbnail / avatar | 48–200 px | 2× displayed size | dimensions matter more than quality here |
| Logo | 120–240 px | SVG if possible | vector scales for free |
| Open Graph share image | — | 1,200×630 px | the social-preview standard |
The doubling rule is what most people miss. A MacBook or flagship phone packs two device pixels into every CSS pixel, so an image exported at exactly its display width looks subtly soft there. Export at 2× and let the browser scale down — sharp everywhere, and thanks to compression the 2× file is nowhere near 4× the weight.
What oversizing actually costs (measured)
We exported one detailed test photo at four widths, same JPG quality 82: 2,400 px → 1,851 KB · 1,600 px → 834 KB · 1,200 px → 482 KB · 800 px → 221 KB. Shipping the 2,400 px original into an 800 px card slot makes every visitor download 8× the necessary bytes for zero visible benefit — multiplied across a grid of cards, that is the difference between a page that snaps and one that crawls. Resize to the slot with the resize tool (it batches), then compress; the optimisation guide covers the srcset ladder if you want to serve several sizes responsively.
CMS quirks worth knowing
WordPress, Shopify, Squarespace and friends generate their own resized variants on upload — helpful, but they resize whatever you give them, so uploading a 6,000 px camera original still wastes storage, slows the upload, and on some plans burns bandwidth quota. A good habit: pre-size uploads to ~2,400 px on the long edge (big enough for any variant the CMS will cut) unless the image is specifically a downloadable print file. And keep your true originals archived elsewhere: a CMS media library is a publishing surface, not a backup. If you only have a too-small image for a slot — a 600 px file needed at 1,600 — enlarge it with the AI upscaler rather than letting the browser stretch it; stretched pixels are exactly the blur that this guide exists to fix.