Image Optimization: The Complete Guide to Faster Websites

According to HTTP Archive, images account for 50% of the average webpage's total weight. On mobile, a 3-second delay in page load increases bounce rate by 32%. Image optimization isn't just about saving bandwidth—it directly impacts your bottom line.

The business case: Amazon found that every 100ms of latency cost them 1% in sales. For a $100B company, that's $1B per year. Your site may be smaller, but the percentage impact is the same.

The Image Optimization Checklist

Here's the complete checklist for optimized images. We'll go deep on each point below.

Choose the right format (WebP/AVIF for web, JPEG for photos, PNG for graphics)
Serve appropriately sized images (not larger than display size)
Compress with optimal quality settings (75-85% for most images)
Use responsive images with srcset
Lazy load below-the-fold images
Use a CDN for global delivery
Implement proper caching headers

1. Choose the Right Format

Format choice has the biggest impact on file size. Here's a decision tree:

Is it a photo or complex image?

→ Yes: Use WebP (or JPEG as fallback)

→ No: Continue...

Does it need transparency?

→ Yes: Use WebP or PNG

→ No: Continue...

Is it simple (few colors, sharp edges)?

→ Yes: Use PNG or SVG

→ No: Use WebP

2. Size Images Correctly

Never serve images larger than their display size. A 4000px image displayed at 800px wastes 96% of the pixels. Use CSS to find actual display sizes, then resize images accordingly.

Quick tip: In Chrome DevTools, hover over an image to see both natural size and rendered size. If natural is much larger, you're wasting bandwidth.

3. Compression Settings

Quality settings are not linear. Going from 100% to 80% quality might reduce file size by 80% while being visually identical. Going from 80% to 60% saves less space but introduces visible artifacts.

The sweet spot for most web images is 75-85% quality. Test with your specific images to find the lowest quality where artifacts aren't visible at display size.

4. Responsive Images

Use the srcset attribute to serve different sizes for different devices:

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

5. Lazy Loading

Don't load images that aren't visible. Modern browsers support native lazy loading:

<img src="image.jpg" loading="lazy" alt="Description">

Important: Don't lazy load above-the-fold images (the hero image, logo, etc.). These should load immediately. Only lazy load images below the initial viewport.

Core Web Vitals Impact

Image optimization directly affects Google's Core Web Vitals:

Largest Contentful Paint (LCP): If your largest element is an image, optimization directly improves LCP. Target: under 2.5 seconds.
Cumulative Layout Shift (CLS): Images without dimensions cause layout shift. Always specify width and height.
First Input Delay (FID): Large images can block the main thread during decode. Use proper sizing to minimize this.

Tools for Image Optimization

For manual optimization:

Our Image Compressor for quick compression
Our Image Workflow for batch resize + compress + convert
Squoosh for advanced AVIF encoding

For automated optimization in your build process:

Next.js Image component (automatic optimization)
sharp for Node.js image processing
Cloudinary/imgix for on-the-fly optimization

Conclusion

Image optimization is the highest-impact performance improvement for most websites. The basics—right format, right size, proper compression—can often cut page weight by 50% or more.

Start with the biggest images first. Run your site through PageSpeed Insights to identify the worst offenders, then work through the checklist above. The performance gains are immediate and measurable.