Best Image Size for Websites: Speed & Quality Guide

Images are the heaviest assets on most web pages, accounting for 50% or more of total page weight. Getting the best image size for websites right means balancing visual quality against load speed — and in 2026, speed directly affects your search rankings, bounce rates, and conversion rates.

Google's Core Web Vitals make image performance a measurable ranking factor. The Largest Contentful Paint (LCP) metric specifically tracks how quickly the largest visible element loads, and for most pages, that element is an image. If your hero image is too large, your LCP suffers, and your SEO suffers with it.

This guide covers the exact dimensions, file sizes, and formats to use for every type of web image.

Core Web Vitals and Image Performance

Core Web Vitals measure three aspects of user experience:

Largest Contentful Paint (LCP): How fast the largest above-the-fold element renders. Target: under 2.5 seconds. Images are the most common LCP element.
Cumulative Layout Shift (CLS): How much the page layout shifts as it loads. Unsized images cause layout shift. Always specify width and height attributes.
Interaction to Next Paint (INP): Responsiveness to user input. Large images consume bandwidth and memory that slow down interaction.

Images affect LCP most directly. A 2 MB hero image on a mobile connection can take 5+ seconds to load, blowing past the 2.5-second target. The fix is right-sizing: serving images at the dimensions they'll actually be displayed, not larger.

Hero / LCP image

1600–2400px wide
File size target: under 200 KB (WebP)

Content image (article)

800–1200px wide
File size target: under 100 KB (WebP)

Thumbnail / card image

400–600px wide
File size target: under 50 KB (WebP)

Full-width background

1920–3840px
File size target: under 300 KB (WebP)

Dimensions shown are display sizes — serve at 1x for modern displays

Optimal Image Dimensions by Type

Hero Images and Above-the-Fold Banners

Hero images are typically the LCP element. They need to be large enough to look sharp on high-resolution displays but not so large that they slow the initial page load.

Desktop: 1600–2400px wide, height depends on design (typically 600–900px)
Mobile: 800–1200px wide (serve a smaller version via srcset)
File size: Under 200 KB after compression
Format: WebP or AVIF

Content Images (Blog Posts, Articles)

Images within article body text don't need to be as large as heroes. They're constrained by the content column width, which is usually 700–900px.

Desktop: 800–1200px wide
Mobile: 600–800px wide
File size: Under 100 KB
Format: WebP preferred, JPG acceptable

Thumbnails and Card Images

Product cards, blog post thumbnails, and gallery previews are small on screen and should be served at correspondingly small dimensions.

Dimensions: 400–600px wide
File size: Under 50 KB
Format: WebP or JPG

Full-Width Background Images

Background images span the entire viewport and need to cover large screens without visible pixelation. However, they don't need to be as sharp as foreground content.

Dimensions: 1920–3840px wide
File size: Under 300 KB (use heavier compression — backgrounds tolerate it)
Format: WebP

Responsive Images with srcset

Serving one image size for all devices is wasteful. A mobile user on a 400px-wide screen doesn't need a 2400px hero image. The srcset attribute lets you specify multiple sizes and let the browser choose:

<img 
  src="hero-1200.webp" 
  srcset="hero-600.webp 600w, hero-1200.webp 1200w, hero-2400.webp 2400w"
  sizes="(max-width: 600px) 100vw, 1200px"
  width="1200" height="600"
  alt="Hero image"
  fetchpriority="high"
/>

The browser downloads only the size it needs. On mobile, that's the 600px version — potentially 70% smaller in file size than the 2400px version.

Key attributes:

width and height: Always include these to prevent layout shift (CLS)
fetchpriority="high": Use on the LCP image to prioritize its download
loading="lazy": Use on below-the-fold images to defer loading

Format Recommendations

The best image size for websites is meaningless without the right format. In 2026:

WebP: The default for all web images. 25–35% smaller than JPG at equivalent quality. Supported by all modern browsers.
AVIF: 50% smaller than JPG. Supported in Chrome, Firefox, and Safari 16+. Use as a progressive enhancement with WebP fallback.
JPG: Fallback only. Use when you need universal compatibility or for print workflows.
PNG: Use for small graphics requiring transparency. Convert larger PNGs to WebP for delivery.

To convert existing PNGs to WebP, use the PNG to WebP converter. For a full format comparison, see our JPG vs PNG vs WebP guide.

Compression Targets

After choosing the right dimensions and format, compression is the final layer. Target these file sizes after compression:

Image Type	Target Size	Max Size
Hero image	100–200 KB	300 KB
Content image	50–100 KB	150 KB
Thumbnail	20–50 KB	80 KB
Background	150–300 KB	500 KB

Use the image compressor to hit these targets. Start with quality 80 for WebP and adjust based on visual inspection.

Resizing Images for the Web

Getting dimensions right before uploading is critical. If you upload a 4000px photo and let the browser scale it down to 800px, you're transferring 10× more data than needed.

The image resizer lets you set exact pixel dimensions while maintaining aspect ratio. For batch processing, resize all images in a folder to the same width — for example, 1200px for content images — before uploading.

Common Image Size Mistakes

Oversized hero images: A 5000px, 5 MB hero image is the most common cause of poor LCP. Resize to 2400px max and compress to under 200 KB.

Missing width/height attributes: Without these, the browser doesn't reserve space for the image, causing layout shift when it loads. Always specify dimensions.

No responsive images: Serving the same 2400px image to mobile and desktop wastes bandwidth and slows mobile load times. Use srcset.

Using PNG for photos: Photographic PNGs are 5–10× larger than necessary. Convert to WebP or JPG for web delivery.

Forgetting to compress: Even correctly sized images benefit from compression. A 1200px WebP at quality 90 might be 180 KB; at quality 75, it's 90 KB with barely visible difference.

External Resources

web.dev image optimization guide — Google's official recommendations
Core Web Vitals technical documentation — detailed metrics and thresholds

Summary

The best image size for websites is the smallest size that looks sharp at the display dimensions it's actually shown at. Resize images to their display width (plus a small buffer for high-DPI), serve them as WebP, compress to the target file sizes above, and use srcset to serve appropriate sizes to different devices. Pair this with proper width/height attributes and fetchpriority on your LCP image, and your Core Web Vitals will reflect the effort.

Blog