Best Image Size for a Website - What You Actually Need

Why image size matters for websites

Images are typically the largest assets on any web page, often accounting for 50-70% of the total page weight. Large images slow down the initial load, which affects:

• Google Core Web Vitals - specifically the LCP (Largest Contentful Paint) metric, which directly affects search rankings.
• Bounce rate - users on mobile connections leave slow pages.
• Hosting and bandwidth costs - especially on platforms that charge for data transfer.

The good news is that most of the gain comes from one simple fix: resize images to the dimensions they will actually be displayed at, then compress them. You do not need complex tooling to get most of the benefit.

Recommended sizes by image type

These are practical starting points. Your actual display size depends on your layout, so use your browser DevTools to check the rendered size of each image on your site if you want to be precise.

The file size targets matter more than the pixel dimensions

Pixel dimensions tell you how sharp the image is. File size tells you how long it takes to download. Both matter, but for site performance, file size has the more direct impact.

A 1200 x 800 px hero image should not weigh more than 150-200 KB. If yours is over 500 KB, you are paying a real performance penalty. Camera photos shot at this resolution often come out at 2-5 MB before any compression.

The file size targets in the table above are achievable with:

• JPEG quality around 80-85% for photographs.
• WebP format instead of JPEG (same quality, 25-34% smaller files).
• PNG for anything with text, sharp edges, or transparency.

Format guide for web images

• WebPBest choice for photos on the web. All modern browsers support it. Typically 25-34% smaller than JPEG at the same quality. Use lossy WebP for photographs, lossless WebP for graphics.
• JPEGSafe fallback for photos. Good compatibility including older email clients. Use quality 80-85% for the best size-to-quality ratio.
• PNGFor anything that needs transparency, or graphics with text, logos, and sharp edges. Lossless - every pixel is preserved exactly.
• SVGFor icons, logos, and illustrations created as vector art. Infinitely scalable with very small file sizes. Cannot be used for photographs.
• AVIFNewer format, smaller than WebP but browser support is still catching up. Good to use if your platform supports it, but have a JPEG fallback.

A practical workflow

For each image you add to your website:

1. Check the actual rendered size of the image on your page in DevTools (right-click the image, Inspect, look at the computed size).
2. Resize the source image to 2x that display size - this gives retina screens a sharp result without unnecessary pixels. For multiple images, bulk resize processes them all at once.
3. Convert to WebP for photographs, or keep as PNG for graphics with transparency.
4. Compress to hit the file size targets in the table above.

The 2x rule (serving an image at twice the display size) accounts for high-DPI screens. On a retina display, a 600 px wide column renders at 1200 physical pixels. Serving a 1200 px image makes it look sharp; a 600 px image looks soft.

What to do with existing images

If you have an existing site with unoptimised images, you do not need to do them all at once. Start with the images that appear above the fold on your most visited pages - these have the biggest impact on LCP scores and first impressions.

Running your homepage through Google PageSpeed Insights will tell you exactly which images are oversized and by how much. It is a free tool that gives specific recommendations.

For a deeper look at how compression works and which quality settings give the best results, see the guide on compressing images without losing quality.