How to reduce image file size for web performance

Images account for 50-70% of a typical webpage's total bytes. Optimizing them is the single highest-impact performance improvement you can make.

The Core Web Vitals connection

Google's Core Web Vitals directly impact SEO rankings:

• LCP (Largest Contentful Paint): Often an image. Faster load = better score.
• CLS (Cumulative Layout Shift): Images without dimensions cause layout shifts.
• INP (Interaction to Next Paint): Large images block the main thread during decode.

Image optimization checklist

1. Choose the right format

• Photos: WebP (25-35% smaller than JPEG)
• Graphics with transparency: WebP or PNG
• Icons: SVG (vector, infinitely scalable)
• Animated: WebP animation (50-70% smaller than GIF)

2. Compress appropriately

• Hero images: Quality 80-85 (visually identical)
• Thumbnails: Quality 60-70 (acceptable at small sizes)
• Background images: Quality 50-60 (often blurred anyway)

3. Serve responsive images

Use <picture> or srcset to serve different sizes based on viewport:

• Mobile: 640px wide
• Tablet: 1024px wide
• Desktop: 1920px wide

4. Lazy load below-the-fold images

Add loading="lazy" to images that aren't immediately visible. Don't lazy load hero images.

5. Set explicit dimensions

Always include width and height attributes to prevent layout shifts.

Measuring impact

Use Lighthouse or PageSpeed Insights to measure:

• LCP target: < 2.5 seconds
• Image weight target: < 500 KB total per page
• Format target: WebP or AVIF for all photos

Common mistakes

• Serving 4K images to mobile. A 400px-wide phone doesn't need a 3840px image.
• Using PNG for photos. PNG is 5-10x larger than WebP for photographs.
• Not lazy loading. Loading 20 images at once blocks rendering.
• Missing dimensions. Causes layout shifts that hurt CLS scores.

How a hero image hurts LCP

The Largest Contentful Paint element on most pages is the hero image, so its download time is often your LCP score. The delay is a chain:

1. The browser must parse HTML to discover the image URL.
2. It opens a connection and requests the file.
3. It downloads every byte — a 1.5 MB hero on a 5 Mbps connection takes ~2.4 seconds by itself.
4. It decodes the image before painting.

Every step is proportional to file size. Cutting a hero from 1.5 MB to 200 KB with Image Compressor can shave over two seconds off LCP on mid-tier mobile. To help step 1, add fetchpriority="high" to the hero and preload it so the browser finds it sooner.

Responsive images with srcset and sizes

Serving one large image to every device wastes bandwidth on phones. srcset lets the browser pick the smallest file that fills the slot:

<img
  src="photo-1200.webp"
  srcset="photo-640.webp 640w, photo-1200.webp 1200w, photo-1920.webp 1920w"
  sizes="(max-width: 768px) 100vw, 1200px"
  width="1200" height="800" alt="..." loading="lazy" />

srcset lists each file with its real pixel width; sizes tells the browser how wide the image will render at each breakpoint. The browser combines that with the device pixel ratio to download the smallest sufficient file — often the 640px version on a phone instead of the 1920px desktop file. Generate the variants once with Photo Resizer.

Set a per-page image budget

Treat total image weight as a budget you spend deliberately:

Prefer modern formats to hit these numbers: AVIF or WebP for photos. For a full breakdown of which format wins where, see JPG vs PNG vs WebP vs AVIF. If your site runs on WordPress, compressing images for WordPress covers the platform-specific steps.

Frequently Asked Questions

What is the single biggest image performance win?

Serving a modern format (WebP or AVIF) at the correct display size. Together these often cut image weight by 70% or more, which directly improves LCP.

Should I lazy-load every image?

No. Lazy-load images below the fold, but never the LCP or hero image — lazy-loading it delays the very element the metric measures.

How big should a hero image be?

Aim for under 200-250 KB for a full-width hero, using WebP or AVIF. Resize to the maximum width it will ever display, usually 1920px.

Do image dimensions in HTML matter for performance?

Yes. Explicit width and height (or a CSS aspect-ratio) reserve space and prevent layout shift, protecting your CLS score while the image loads.

Related tools

• Image Compressor — compress for web delivery
• Photo Resizer — create responsive image sizes