Skip to content
pixvertoPixverto

Ideal Image Sizes for Websites: Hero, Blog, Thumbnails and Retina

There is no single perfect image size, but there are sensible ranges. Too large and your page is slow. Too small and pictures look soft. This guide explains the logic, gives practical numbers for common uses, and shows how to choose for your own site.

Why image size matters

Two things determine how heavy an image is: how many pixels it has and how hard it is compressed. Pixels matter most. A 4000 × 3000 photo has 12 million pixels, while a 1200 × 900 version has about one million, so it is roughly twelve times lighter before any compression.

If a picture is displayed in an 800-pixel column, the extra pixels above that give you almost nothing you can see, but visitors still pay to download them. At the other extreme, a picture that is too small is stretched by the browser and looks blurry. Choosing the right size is the first and biggest saving.

The rule: match the display size

An image should be about as wide as it is shown. For screens with a high pixel density, which show content with twice as many physical pixels, up to roughly twice the displayed width is enough. Beyond that you add weight without adding visible detail.

To find the displayed size, open your browser's developer tools, inspect an image and compare its rendered size with its intrinsic size. If the file is far larger than what appears on screen, you can safely shrink it.

Choosing between larger and smaller

Larger images

  • Pros: sharper on large and high-density screens, and room for zoom on product pages.
  • Cons: slower pages, more bandwidth and storage, and a worse experience on phones.

Smaller images

  • Pros: fast loading, lower costs and better page speed scores.
  • Cons: soft or blurry results if the picture is displayed larger than its size.

A good compromise is to size for about the largest display the image will realistically have, and to offer several sizes for different screens with responsive images.

Step by step: choose and create the right size

  1. 1Find where the image appears and note its largest displayed width.
  2. 2Pick the target width, between one and two times that width, using the table above as a guide.
  3. 3Resize from the original with Resize Image, keeping the aspect ratio. If the shape needs to change, cut it first with Crop Image.
  4. 4Compress with Compress Image at quality 75 to 85. If you need a hard limit, Compress to 100 KB finds the best quality that fits.
  5. 5Check the file size against the targets. If it is still heavy, reduce the dimensions further rather than lowering quality too much.
  6. 6Use a modern format where you can. See the format guide.
  7. 7Set width and height in your HTML to the final dimensions.

Aspect ratios and consistency

Pick a few aspect ratios and stick to them: 16:9 for banners, 3:2 or 4:3 for photos, 1:1 for avatars and product grids. Consistent ratios make layouts tidy and help prevent layout shifts. If you want the background on resolution and DPI, see image resolution, DPI and PPI explained.

Common mistakes

  • Uploading camera originals and relying on the browser to shrink them.
  • Enlarging small pictures to fill a bigger slot, which only makes them blurry.
  • Using one huge size everywhere, including for thumbnails.
  • Fixing weight only by lowering quality, instead of reducing the pixel dimensions first.
  • Forgetting that mobile is the main audience for most sites.

Frequently asked questions

What size should a website hero image be?

Between 1600 and 2000 pixels wide is enough for most layouts, and up to about 2560 for very large screens. Aim for a file under 200 to 300 KB by compressing it.

What size should blog images be?

800 to 1200 pixels wide suits most blog layouts. Check how wide your theme displays inline images and keep to about that width, or up to twice that for sharp screens.

Do I need 2x images for retina screens?

Up to about twice the displayed width gives sharp results on high-density screens. Beyond that you add weight with little visible benefit. Responsive images let each device download the right size.

How many KB should a web image be?

As a guide, under 200 to 300 KB for a hero, under 100 to 150 KB for a content image, and under 50 KB for a thumbnail. Detailed photos may need more, and simple graphics less.

Is it better to reduce quality or reduce dimensions?

Reduce the dimensions first. Fewer pixels shrink the file much more than lowering quality, and with less visible damage. Then adjust quality only if you still need to cut weight.

Try the tools