Image Compression for Web Performance: Speed Up Your Website

Largest Contentful Paint (LCP)

Target: < 2.5 seconds

LCP measures when the largest content element (often an image) becomes visible. Compressed images load faster, directly improving LCP scores. A 5MB image compressed to 500KB can improve LCP from 4+ seconds to under 1.5 seconds.

First Input Delay (FID) / Interaction to Next Paint (INP)

Target: < 100ms (FID) / < 200ms (INP)

Large images block the main thread during parsing and decoding. Compressed images reduce processing time, allowing the browser to respond to user interactions faster. This is especially important on mobile devices with limited processing power.

Cumulative Layout Shift (CLS)

Target: < 0.1

Uncompressed images without proper dimensions cause layout shifts as they load. Compressed images load faster, reducing the window for layout shifts. Always specify width and height attributes, and use responsive images with srcset.

1. Choose the Right Format

2. Optimize Quality Settings

The quality setting dramatically affects file size. For most web images:

• Hero images: 80-85% quality (visually identical to 100%, 40-50% smaller)
• Product images: 75-80% quality (perfect for e-commerce)
• Thumbnails: 60-70% quality (small size, acceptable quality)
• Background images: 70-75% quality (often out of focus anyway)

3. Resize Images to Actual Display Size

Never serve a 4000px wide image when it displays at 800px. Resize images to their maximum display size:

• Desktop hero: 1920px max width
• Mobile hero: 828px max width
• Product images: 1200px max width
• Thumbnails: 400px max width

This alone can reduce file sizes by 75-90% without any quality loss.

4. Use Responsive Images

Serve different image sizes for different devices using the srcset attribute:

<img
  srcset="
    image-400.webp 400w,
    image-800.webp 800w,
    image-1200.webp 1200w
  "
  sizes="(max-width: 600px) 400px,
         (max-width: 1200px) 800px,
         1200px"
  src="image-1200.webp"
  alt="Description"
/>

This ensures mobile users download smaller images, improving performance on slower connections.

5. Lazy Load Below-the-Fold Images

Use the native loading="lazy" attribute to defer loading images that aren't immediately visible:

<img
  src="image.webp"
  alt="Description"
  loading="lazy"
  width="800"
  height="600"
/>

This reduces initial page load time and improves Time to Interactive (TTI).

API-Based Compression

Use an image compression API like Squish to automatically compress images during upload or on-the-fly. This ensures all images are optimized without manual intervention.

Benefits: Consistent optimization, automatic format conversion, CDN delivery, and no manual work required.

Build-Time Optimization

Tools like Next.js Image Optimization, Sharp, or ImageMagick can compress images during the build process. This is ideal for static sites and ensures all images are optimized before deployment.

CDN-Level Optimization

Many CDNs (Cloudflare, Cloudinary, etc.) can automatically compress and convert images on-the-fly. However, pre-compressing images is still recommended for better control and consistency.