Image Size: Definition, Web Optimization, Best Practices

What is image size?

"Image size" on the web means three different things: the dimensions in pixels (for example 1920 x 1080), the file size in KB or MB that travels over the network, and the display size, how large the image is drawn on the page in CSS pixels. Each one can be wrong on its own, and each one is fixed differently.

A 4000 x 3000 photo of 8 MB shown in a 200 x 150 thumbnail wastes bandwidth (the full file is downloaded) and CPU (the browser scales it down). Good image optimization gets all three right.

Why image size matters

An image is frequently the Largest Contentful Paint element, and web.dev counts an LCP of 2.5 seconds or less as good. Missing dimensions are a common cause of layout shift.

Choosing a format

web.dev says WebP and AVIF generally compress better than older formats and should be used where possible. Offer them with a JPEG fallback through <picture>. The trade-off between lossy and lossless compression is covered in its own entry.

Serving the right size

With srcset and sizes the browser picks the candidate that fits the display slot and the screen density, so a phone does not download the desktop file. Always set width and height: they let the browser reserve space before the image loads.

<picture>
  <source type="image/avif" srcset="hero-800.avif 800w, hero-1200.avif 1200w"
          sizes="(max-width: 600px) 100vw, 1200px">
  <source type="image/webp" srcset="hero-800.webp 800w, hero-1200.webp 1200w"
          sizes="(max-width: 600px) 100vw, 1200px">
  <img src="hero-1200.jpg" alt="Product dashboard"
       width="1200" height="675" decoding="async">
</picture>

Rules of thumb for file size

These are working budgets, not standards. Judge them against your measured LCP, not against the number.

Best practices

• Resize to the largest size the image is actually displayed at, and keep a 2x version only where screens need it.
• Compress: a lossy quality of roughly 75 to 85 is often hard to tell from the original, but check your own images.
• Use loading="lazy" for images below the fold, but not for the LCP image. Lazy loading defers the request.
• Give the LCP image fetchpriority="high", and preload it if the browser discovers it late.
• Strip metadata such as EXIF that the page does not need.
• Serve from a CDN, ideally one that converts and resizes on request.

Common image size mistakes

• Serving the full camera original to every device.
• No srcset, so phones get desktop files.
• PNG for photos, which gives very large files for no visible gain.
• JPEG for logos or anything needing transparency.
• Lazy-loading the hero image, which delays LCP.
• Leaving out width and height.

Measuring image weight

Lighthouse flags oversized images with its "Properly size images" audit, which fails an image when the rendered size is at least 4 KiB smaller than the actual size. LoadFocus page speed monitoring runs Lighthouse audits on a schedule from 25 cloud regions and tracks Core Web Vitals, so a heavy new hero image shows up as an LCP regression instead of a surprise. For real-user data try the free Core Web Vitals checker. More reading: why you should improve the images on your website and 10 steps to improve website speed.

FAQ: image size

What is the best image format for the web?

For photos, AVIF or WebP with a JPEG fallback. For logos and icons, SVG. Use PNG when you need lossless detail and can accept a larger file.

How big should a hero image be?

There is no fixed limit. Under about 200 KB is a common starting budget. Check it against your measured LCP and adjust.

Should I lazy-load every image?

No. Lazy-load images below the fold. Load the LCP image eagerly, and consider fetchpriority="high" for it.

What is the difference between intrinsic size and display size?

Intrinsic size is the image's real pixel dimensions. Display size is how big it is drawn in CSS pixels. The browser scales for you, but still downloads the full intrinsic image.

Why are PNG photos so large?

PNG is lossless and keeps every pixel. Photos have a lot of colour variation that lossless compression cannot shrink much, while JPEG, WebP and AVIF discard detail the eye barely notices.

How does srcset work?

You list the same image at several widths. The browser combines the display width from sizes with the screen density and downloads the best candidate.