Image Optimization for Web Performance: A Developer's Guide

Introduction

Images typically account for 40-60% of a webpage's total size. Optimizing them is one of the most effective ways to improve Core Web Vitals and overall performance.

Why Image Optimization Matters

Impact on Core Web Vitals

• LCP (Largest Contentful Paint): Often caused by large hero images
• CLS (Cumulative Layout Shift): Caused by images without dimensions
• Page Load Time: Directly affected by image file sizes

Business Impact

• 1 second delay = 7% reduction in conversions
• Mobile users are especially sensitive to load times
• Google uses page speed as a ranking factor

Optimization Techniques

1. Use Modern Formats

WebP should be your default format:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Description">
</picture>

2. Responsive Images

Serve appropriately sized images:

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

3. Lazy Loading

Defer off-screen images:

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

4. Set Dimensions

Prevent layout shift:

<img src="image.jpg" width="800" height="600" alt="Description">

Or use CSS aspect-ratio:

img {
  aspect-ratio: 4/3;
  width: 100%;
  height: auto;
}

5. Compression

Compress all images before deployment:

• Use Metamorfiles for manual compression
• Add compression to your build pipeline

Recommended Compression Settings

Image Type	Format	Quality	Max Width
Hero/Banner	WebP	80-85%	1920px
Content	WebP	75-80%	1200px
Thumbnails	WebP	70-75%	400px
Icons	SVG/PNG	Lossless	As needed

Tools and Workflow

Build-Time Optimization

For Next.js, Nuxt, or similar frameworks:

// next.config.js
module.exports = {
  images: {
    formats: ['image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048],
  },
}

Manual Optimization

For one-time or occasional use:

1. Resize images to maximum display size
2. Compress with Metamorfiles
3. Export in WebP format

Measuring Results

Use these tools to verify improvements:

• Lighthouse (Chrome DevTools)
• PageSpeed Insights
• WebPageTest

Conclusion

Image optimization is not optional for modern web development. By using modern formats, proper sizing, lazy loading, and compression, you can dramatically improve your site's performance.

Start by compressing your existing images - you might be surprised by the savings.