Image sizes for the web
How wide and tall your website images should be, in plain English, with common sizes for each image type.
"How big should this image be?" is one of the most common questions clients ask. The answer depends on where the image will be used. This guide gives you practical sizes for every common use case.
Quick summary
Bigger is not always better — oversized images slow your site down. Match the image size to its role on the page. As a general rule: hero images around 1920 × 1080 px, blog thumbnails around 1200 × 630 px, and profile photos around 400 × 400 px.
Understanding pixels
Images are measured in pixels (px). A pixel (short for "picture element") is one tiny dot of color. More pixels = more detail. The dimensions are written as width × height.
A 1920 × 1080 px image is 1,920 pixels wide and 1,080 pixels tall. That's the standard "full HD" size.
BeginnerCommon image sizes by use
| Image type | Recommended size | Notes |
|---|---|---|
| Hero / banner (full-width) | 1920 × 1080 px | Wider if the design uses very large displays |
| Blog post featured image | 1200 × 630 px | This size also works perfectly for social sharing |
| Team member / profile photo | 400 × 400 px or 600 × 400 px | Square usually works best |
| Product image | 800 × 800 px minimum | Square is standard for most stores |
| Logo | SVG (any size) or 400 × 200 px PNG | Always prefer SVG — see image formats |
| Background image | 1920 × 1080 px minimum | Needs to look good when stretched |
| Gallery thumbnail | 600 × 450 px | Landscape usually works best |
| Favicon | 32 × 32 px (or 512 × 512 SVG) | Tiny icon in the browser tab |
Retina screens and 2× images
Modern screens — especially on laptops, phones, and tablets — are "retina" or "HiDPI" displays. They have twice as many pixels per inch as older screens. If you supply a 400 × 400 px image, it may look slightly soft on a retina screen.
A simple rule: supply images at roughly 2× the size they'll appear. If a team photo displays at 300 × 300 px on screen, upload it at 600 × 600 px.
Your website platform handles the display size — you just need to supply enough resolution.
The two numbers that matter: dimensions and file size
There are two different measures:
- Dimensions (px) — how many pixels wide and tall
- File size (KB or MB) — how much storage space the file takes
A large image can have a small file size if it's well-compressed. Compression is the process of making the file smaller while keeping the image looking good. See How to compress images for the practical steps.
Target file sizes for web images:
| Image type | Target file size |
|---|---|
| Hero image | Under 300 KB |
| Blog / article image | Under 150 KB |
| Profile photo | Under 80 KB |
| Product image | Under 200 KB |
These are guidelines, not strict rules. Small differences don't matter much. But a hero image that's 5 MB will noticeably slow your page.
What happens with wrong-sized images
- Too small: The image stretches to fill the space and looks blurry or pixelated.
- Too large: The file takes longer to download, slowing your page.
- Wrong shape: The image gets cropped in unexpected places by the theme.
If you're unsure what size your theme expects in a specific location, ask us and we'll tell you exactly.
Common questions
Related guides
- Image basics for your website
- Image formats explained
- How to compress images
- Images & page speed
- How to add images to a WordPress page or post
Need a hand?