🖼️ Image Optimization Tips — The Complete Guide

Goal: Reduce image file sizes as much as possible without sacrificing visual quality — to improve load speed, user experience, and SEO rankings.

📌 Why Does Image Optimization Matter?

Images typically account for 50–80% of a webpage’s total byte weight. A single unoptimized image can push your LCP past 4 seconds, failing Core Web Vitals entirely — regardless of how fast the rest of your code is.

Typical Page Weight Breakdown:

  ┌─────────────────────────────────────────┐
  │  Images        ████████████████  60%   │
  │  JavaScript    ██████            20%   │
  │  CSS           ████              12%   │
  │  Other         ██                 8%   │
  └─────────────────────────────────────────┘

🗂️ Step 1 — Choose the Right Format

💡 Golden Rule: Start with AVIF, provide WebP as a fallback, then JPEG/PNG for legacy browsers.

📐 Step 2 — Dimensions & Resizing

Common Mistake: Sending a 1920×1200px image to a 360×225px mobile screen.
That image is 28× larger than necessary! ↓

Solution: Responsive images with srcset
┌──────────────────────────────────────────────────────────┐
│  Mobile   → 400px  → hero-400.webp   (~30 KB)           │
│  Tablet   → 800px  → hero-800.webp   (~80 KB)           │
│  Desktop  → 1200px → hero-1200.webp  (~150 KB)          │
└──────────────────────────────────────────────────────────┘

HTML implementation:

<img
  src="hero-800.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 480px) 400px, (max-width: 900px) 800px, 1200px"
  alt="Describe the image"
  width="1200"
  height="630"
  loading="eager"
  fetchpriority="high"
/>

⚙️ Step 3 — Optimal Compression Levels

Recommended quality settings by image type:

  Hero images         ──────────►  80–85%
  Product images      ──────────►  75–80%
  Content images      ──────────►  70–75%
  Thumbnails          ──────────►  60–70%

  ⚠️  Below 60% = visibly poor quality
  ✅  80% = no perceptible difference for most images

Recommended compression tools:

🚀 Step 4 — Lazy Loading

<!-- ✅ Below-the-fold images — load on demand -->
<img src="product.webp" loading="lazy" alt="Product" width="400" height="400" />

<!-- ✅ Hero image — load immediately -->
<img src="hero.webp" loading="eager" fetchpriority="high" alt="Hero" />

<!-- ❌ Never use lazy on your hero image! -->

🏗️ Step 5 — The <picture> Element for Full Compatibility

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

Browser selection flow:
  Supports AVIF?  → loads image.avif  (best compression)
       ↓ no
  Supports WebP?  → loads image.webp  (great compression)
       ↓ no
  Fallback        → loads image.jpg   (legacy support)

📊 Image Size Targets

🔍 Format Comparison — File Size Reduction

Switching from JPEG/PNG to modern formats:

  PNG  → WebP (lossless)   ██████████████████░░  ~26% smaller
  PNG  → WebP (lossy)      ████████████████████  ~45% smaller
  JPEG → WebP              █████████████░░░░░░░  ~25–35% smaller
  JPEG → AVIF              ████████████████████  ~50–65% smaller
  GIF  → WebP (animated)   ████████████████████  ~64% smaller

  ░░ = bytes saved

✅ Full Optimization Checklist

• [ ] Convert all images to WebP or AVIF
• [ ] Compress images to 75–85% quality
• [ ] Add width and height to every <img> tag to prevent CLS
• [ ] Use srcset for responsive images
• [ ] Add loading="lazy" to all below-the-fold images
• [ ] Add fetchpriority="high" to your hero image
• [ ] Strip unnecessary EXIF metadata
• [ ] Serve images through a CDN

🔗 Related Articles:

• WebP Guide ← Best format for your images
• Compression Guide ← Reduce file size further
• Core Web Vitals Guide ← How image optimization affects your Google ranking