Image Optimization Guide: Reduce Size Without Losing Quality

Why Image Optimization Matters

Pull up any website's network tab in DevTools and look at the transfer sizes. More often than not, images are eating up the majority of the bandwidth. I've seen e-commerce sites where a single product page loads 8MB of unoptimized photos.

Optimizing images is probably the single highest-impact performance improvement you can make, and it's not even that hard. Here's my approach.

Modern Image Formats

WebP

• 25-35% smaller than JPEG
• Supports transparency (like PNG)
• Supported by all modern browsers

AVIF

• 50% smaller than JPEG
• Better compression than WebP
• Growing browser support

SVG

• Perfect for icons and logos
• Infinitely scalable
• Tiny file size

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

Compression Techniques

Lossy Compression

• Reduces file size by removing some data
• Best for photos
• JPEG quality 80-85% is usually sufficient

Lossless Compression

• Reduces file size without quality loss
• Best for graphics, icons, screenshots
• Tools: OptiPNG, Zopfli

Responsive Images

srcset for Different Sizes

<img srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     src="medium.jpg" alt="Description">

Art Direction

<picture>
  <source media="(min-width: 800px)" srcset="wide.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Description">
</picture>

Lazy Loading

Native Lazy Loading

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

Intersection Observer

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});

Image CDNs

Services that optimize images on-the-fly:

• Cloudinary
• Imgix
• Cloudflare Images
• AWS CloudFront

CSS Image Techniques

CSS Sprites

Combine multiple images into one:

.icon {
  background-image: url('sprites.png');
  background-position: -100px -50px;
  width: 32px;
  height: 32px;
}

CSS Gradients

Replace simple images with CSS:

.gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Tools for Image Optimization

• Squoosh: Google's image compression tool
• ImageOptim: Desktop app for Mac
• TinyPNG: Online compression
• Sharp: Node.js image processing library

Image Optimization at Scale

Managing images for a site with 100+ tools was a challenge. Here's my approach:

1. AVIF where possible: We serve AVIF to supporting browsers, with WebP and JPEG fallbacks. This reduced image payload by 50% for modern browsers.
2. Automated pipeline: All images go through an automated optimization pipeline during build. We use Sharp (Node.js) to generate multiple sizes and formats.
3. SVG for UI elements: All icons and UI illustrations are SVGs. They're tiny, scalable, and look crisp at any resolution.
4. Lazy loading everywhere: Every image below the fold uses native lazy loading. Simple but effective.

The total image payload for T-Tools is under 500KB — for a site with over 100 pages and rich visual content.