Image Optimization for the Web: Formats, Compression & Best Practices

Images account for roughly 50% of the average web page's total weight. Optimizing them is one of the highest-impact performance improvements you can make — reducing load times, saving bandwidth, and improving Core Web Vitals scores.

Why Image Optimization Matters

Unoptimized images cause real problems:

• Slower page loads — a 5MB hero image on a mobile connection takes forever
• Higher bounce rates — 53% of mobile users abandon pages that take over 3 seconds to load
• Worse SEO rankings — Google uses page speed as a ranking factor
• Increased hosting costs — more bandwidth means higher bills
• Poor user experience — especially on slower connections

Image Format Guide

Choosing the right format is the first and most impactful decision.

JPEG (JPG)

Best for: Photographs and complex images with many colors.

• Lossy compression — adjustable quality (typically 75-85% is ideal)
• No transparency support
• Universal browser support
• Small file sizes for photographic content

PNG

Best for: Graphics with transparency, screenshots, text-heavy images.

• Lossless compression (PNG-8 for simple graphics, PNG-24 for full color)
• Alpha transparency support
• Larger file sizes than JPEG for photographs
• Perfect for logos, icons, and UI elements

WebP

Best for: Almost everything — it's the modern default.

• 25-34% smaller than JPEG at equivalent quality
• Supports both lossy and lossless compression
• Alpha transparency support
• Supported by all modern browsers (Chrome, Firefox, Safari, Edge)

AVIF

Best for: Maximum compression when browser support isn't a concern.

• 50% smaller than JPEG at equivalent quality
• Best compression ratio of any format
• Growing browser support (Chrome, Firefox, Safari 16+)
• Slower to encode than WebP

SVG

Best for: Icons, logos, illustrations, and simple graphics.

• Vector format — scales infinitely without quality loss
• Text-based (XML) — can be styled with CSS and manipulated with JavaScript
• Tiny file sizes for simple shapes
• Not suitable for photographs

Quick Format Decision Guide

Is it a photograph?
  ├─ Yes → WebP (fallback: JPEG)
  └─ No
      ├─ Does it need transparency?
      │   ├─ Yes → WebP (fallback: PNG)
      │   └─ No → Is it a simple graphic/icon?
      │       ├─ Yes → SVG
      │       └─ No → WebP (fallback: JPEG)

Compression Strategies

Lossy Compression

Removes image data that's less perceptible to the human eye. For most web images, you can reduce file size by 60-80% with no visible quality difference.

• JPEG: quality setting of 75-85%
• WebP: quality setting of 75-80%
• AVIF: quality setting of 60-70%

Lossless Compression

Reduces file size without any quality loss by optimizing how data is stored. Typically achieves 10-30% size reduction.

• PNG optimization (removing metadata, optimizing encoding)
• WebP lossless mode
• SVG optimization (removing unnecessary attributes, whitespace)

The Right Approach

1. Start with the smallest reasonable dimensions
2. Choose the right format
3. Apply lossy compression at an acceptable quality level
4. Strip unnecessary metadata (EXIF data, color profiles)

Responsive Images

Serving a 2000px-wide image to a 375px-wide mobile screen wastes bandwidth. Use responsive images to serve the right size.

Using srcset

<img
  src="image-800.webp"
  srcset="
    image-400.webp 400w,
    image-800.webp 800w,
    image-1200.webp 1200w,
    image-1600.webp 1600w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="A descriptive alt text"
/>

Using <picture> for Format Fallbacks

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Fallback for older browsers" />
</picture>

The browser picks the first format it supports, giving you the best compression with universal compatibility.

Lazy Loading

Don't load images until the user scrolls near them. This is now trivially easy with native lazy loading:

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

When to Use Lazy Loading

• Do lazy load images below the fold (not visible on initial load)
• Don't lazy load the hero image or LCP (Largest Contentful Paint) element
• Don't lazy load images that are visible in the initial viewport

For the LCP Image

Mark your hero/LCP image for priority loading:

<img src="hero.webp" alt="Hero" fetchpriority="high" />

Additional Optimization Techniques

1. Serve from a CDN

A Content Delivery Network serves images from servers closest to the user, reducing latency. Most modern hosting platforms include CDN functionality.

2. Use CSS for Decorative Elements

Gradients, shadows, borders, and simple shapes should be CSS — not images. CSS renders instantly and scales perfectly.

/* Instead of a gradient image */
.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

3. Implement Image Dimensions

Always specify width and height attributes to prevent layout shift (CLS):

<img src="photo.webp" width="800" height="600" alt="Photo" />

4. Consider Low-Quality Image Placeholders (LQIP)

Show a tiny, blurred version of the image while the full image loads. This eliminates blank spaces during loading.

Image Optimization Checklist

• Choose the right format (WebP for most, SVG for icons)
• Compress images (75-85% quality for lossy)
• Generate multiple sizes for responsive images
• Implement lazy loading for below-fold images
• Set fetchpriority="high" on the LCP image
• Always include width, height, and descriptive alt attributes
• Strip unnecessary metadata
• Serve from a CDN
• Use CSS instead of images where possible

Measuring the Impact

After optimizing, measure the results:

• Lighthouse — run a performance audit in Chrome DevTools
• WebPageTest — detailed waterfall analysis showing image loading
• Core Web Vitals — check LCP and CLS improvements in Google Search Console

Wrapping Up

Image optimization is one of the most effective performance improvements you can make. Start with the right format (WebP for most use cases), compress aggressively, implement responsive images and lazy loading, and always measure the results.

Every kilobyte you save translates directly to faster page loads and happier users.