Back to Resources

Image Optimization Guide

Master web image optimization for performance and SEO

Why Image Optimization Matters

Images typically account for 50-70% of total page weight. Optimizing images can dramatically improve:

Image Format Comparison

📸
JPEG / JPG
Best for photographs and complex images with many colors.

Pros:

  • Excellent compression for photos
  • Widely supported everywhere
  • Small file sizes

Cons:

  • Lossy compression
  • No transparency support
  • Quality degrades with re-saves
🎨
PNG
Best for graphics, logos, and images needing transparency.

Pros:

  • Lossless compression
  • Transparency support
  • Great for text and sharp edges

Cons:

  • Larger file sizes than JPEG
  • Not ideal for photos
  • No animation support
🚀
WebP
Modern format offering superior compression for both photos and graphics.

Pros:

  • 25-35% smaller than JPEG/PNG
  • Transparency support
  • Animation support

Cons:

  • Limited older browser support
  • Requires fallback images
⚡
AVIF
Newest format with best compression ratios.

Pros:

  • 50% smaller than JPEG
  • Excellent quality
  • HDR support

Cons:

  • Very limited browser support
  • Slow encoding
  • Requires multiple fallbacks
🎯
SVG
Vector format perfect for icons, logos, and simple graphics.

Pros:

  • Infinitely scalable
  • Very small file size
  • Editable with CSS/JS

Cons:

  • Not for photographs
  • Complex images can be large
📽️
GIF
Legacy format, now mostly for simple animations.

Pros:

  • Universal support
  • Animation support
  • Transparency (1-bit)

Cons:

  • Limited to 256 colors
  • Large file sizes
  • Better alternatives exist

Responsive Images

Using <picture> Element (Recommended)

Serve different image formats with automatic fallback:

Picture Element Example

<picture>
  <!-- Modern formats for supported browsers -->
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  
  <!-- Fallback for older browsers -->
  <img src="image.jpg" alt="Description" 
       loading="lazy" 
       width="800" 
       height="600">
</picture>

Using srcset for Responsive Sizes

Serve different image sizes based on screen resolution:

Srcset Example

<img srcset="image-320w.jpg 320w,
            image-640w.jpg 640w,
            image-1280w.jpg 1280w"
     sizes="(max-width: 640px) 100vw,
            (max-width: 1280px) 50vw,
            33vw"
     src="image-640w.jpg"
     alt="Description"
     loading="lazy">

Best Practices

Compress Images

Use tools like TinyPNG, ImageOptim, or Squoosh to reduce file size by 50-80% without visible quality loss.

Proper Dimensions

Never use CSS to resize images. Always serve images at the exact size they'll be displayed.

Lazy Loading

Use loading="lazy" to defer loading off-screen images until users scroll to them.

Use CDN

Serve images from a CDN for faster delivery worldwide and automatic optimization.

Set Dimensions

Always specify width and height attributes to prevent layout shifts (CLS).

Optimize Alt Text

Write descriptive alt text for accessibility and SEO. Be specific and concise.

Image Optimization Checklist

Recommended Tools

TinyPNG

Smart PNG and JPEG compression

Squoosh

Google's image compression tool

ImageOptim

Mac app for lossless optimization

iLoveIMG

Batch image tools and compression