# Good JPEG use cases:
- Product photos
- Hero images
- Background images
- Photography portfolios
- Any image with complex color gradients

# Bad JPEG use cases:
- Logos (use PNG or SVG)
- Screenshots with text (use PNG)
- Images requiring transparency (use PNG or WebP)

# Good PNG use cases:
- Logos and branding
- Icons and UI elements
- Screenshots
- Images with text overlays
- Graphics with transparency
- Diagrams and illustrations with sharp lines

# Bad PNG use cases:
- Large photographs (JPEG is 50-80% smaller)
- Animations (use GIF, WebP, or APNG)

# WebP advantages over JPEG:
PNG photo (1.2 MB) → WebP lossless (800 KB) = 33% smaller
JPEG photo (200 KB) → WebP lossy (140 KB) = 30% smaller

# WebP advantages over PNG:
PNG logo with transparency (50 KB) → WebP (35 KB) = 30% smaller
Maintains full transparency support

# AVIF compression efficiency:
JPEG (200 KB, quality 85) → AVIF (100 KB, same perceived quality) = 50% smaller
WebP (140 KB) → AVIF (100 KB) = 28% smaller

# When to use AVIF:
- High-traffic websites (reduce bandwidth costs)
- Mobile-first applications (faster load on slow networks)
- Progressive enhancement (with JPEG/WebP fallbacks)

# When NOT to use AVIF:
- Need maximum browser compatibility (< 2022 devices)
- Real-time image processing (encoding is slow)

Does the image have transparency?
├─ Yes
│  ├─ Need maximum compatibility? → PNG-24
│  ├─ Modern browsers only? → WebP (transparency)
│  └─ Cutting-edge + smallest size? → AVIF
│
└─ No transparency
   ├─ Is it a photograph?
   │  ├─ Need maximum compatibility? → JPEG (quality 75-85)
   │  ├─ Modern browsers only? → WebP (lossy)
   │  └─ Smallest possible size? → AVIF
   │
   ├─ Is it a logo/icon?
   │  ├─ Simple vector shape? → SVG (always preferred)
   │  ├─ Complex raster logo? → PNG or WebP
   │  └─ Very small icon? → PNG-8 (256 colors)
   │
   └─ Is it a screenshot/diagram?
      ├─ Has text or sharp lines? → PNG or WebP (lossless)
      └─ Mostly photos? → JPEG or WebP (lossy)

Quality Level | Use Case                    | File Size | Visual Quality
--------------------------------------------------------------------------
90-100        | Printing, archival storage  | Large     | Perfect
80-89         | Hero images, portfolios     | Medium    | Excellent
70-79         | Standard web images         | Small     | Good
60-69         | Thumbnails, previews        | Very Small| Acceptable
Below 60      | Avoid (visible artifacts)   | Tiny      | Poor

# Recommended settings:
- Hero images: quality 85
- Product photos: quality 80
- Blog post images: quality 75
- Thumbnails: quality 65-70

# Technique 1: Color reduction (PNG-24 → PNG-8)
24-bit PNG with 1000 colors → 8-bit PNG with 256 colors
File size reduction: 60-75%
Use when: Image has limited color palette

# Technique 2: Remove metadata
PNG with EXIF data (120 KB) → Stripped PNG (115 KB)
Savings: 5-10%

# Technique 3: Optimize compression level
PNG default (100 KB) → PNG optimized (80 KB)
Savings: 15-25% (lossless)

# Baseline JPEG:
- Loads top-to-bottom
- Shows partial image as it loads
- Slightly smaller file size

# Progressive JPEG:
- Loads low-res full image first, then refines
- Better perceived performance (full image visible sooner)
- Slightly larger file size (1-2%)

Recommendation: Use progressive for images > 50 KB

# Example workflow:
1. Original: photo.png (2 MB)
2. Convert PNG to JPEG: photo.jpg (400 KB) - 80% reduction
3. Convert JPEG to WebP: photo.webp (280 KB) - 30% further reduction
4. Optional: Convert to AVIF: photo.avif (200 KB) - 28% further reduction

Final result: 90% total file size reduction (2 MB → 200 KB)

# JPEG compression example:
Original JPEG (500 KB, quality 95) → Compressed (200 KB, quality 80)
60% reduction, minimal visual difference

# PNG compression example:
Original PNG (800 KB) → Optimized PNG (600 KB)
25% reduction, identical visual quality (lossless)

# Example: Blog post thumbnail
Original: 4000×3000 photo (3 MB)
Displayed at: 400×300 pixels

Solution:
1. Resize to 800×600 (2× for retina) → 300 KB
2. Compress to quality 80 → 150 KB
3. Convert to WebP → 100 KB

Result: 97% reduction (3 MB → 100 KB) with perfect display quality

<!-- HTML responsive image example -->
<picture>
  <!-- AVIF for modern browsers -->
  <source
    type="image/avif"
    srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1600.avif 1600w"
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
  />
  
  <!-- WebP fallback -->
  <source
    type="image/webp"
    srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
  />
  
  <!-- JPEG fallback -->
  <img
    src="hero-800.jpg"
    srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
    alt="Hero image"
    loading="lazy"
  />
</picture>

<!-- Mobile device gets hero-400.avif (50 KB) -->
<!-- Desktop gets hero-1600.jpg (300 KB) only if browser lacks AVIF support -->

# Before optimization:
- 20 product photos (PNG, 400 KB each) = 8 MB total
- Page load time: 5.2 seconds (3G network)

# After optimization:
Step 1: Convert PNG → JPEG (product photos don't need transparency)
  Result: 400 KB → 120 KB per image

Step 2: Compress JPEG at quality 80
  Result: 120 KB → 80 KB per image

Step 3: Convert to WebP for modern browsers
  Result: 80 KB → 55 KB per image

Step 4: Create thumbnails (200×200 instead of 800×800)
  Result: 55 KB → 15 KB per thumbnail

# Final result:
- Thumbnails: 20 × 15 KB = 300 KB (96% reduction!)
- Full images: Lazy-loaded on click
- Page load time: 1.8 seconds (65% faster)

# Before:
- Header JPEG (1920×1080, quality 95): 800 KB
- Mobile users still download full 800 KB

# After:
Create three sizes:
- Mobile (640×360, quality 75, WebP): 40 KB
- Tablet (1280×720, quality 80, WebP): 120 KB  
- Desktop (1920×1080, quality 80, WebP): 250 KB

Mobile savings: 800 KB → 40 KB = 95% reduction
Tablet savings: 800 KB → 120 KB = 85% reduction
Desktop savings: 800 KB → 250 KB = 69% reduction

# Challenge: High-quality photography portfolio
- Need high visual quality
- 50 portfolio images

# Strategy:
1. Hero image: AVIF + WebP + JPEG fallback (quality 85)
   - Original JPEG: 500 KB
   - AVIF: 250 KB (50% smaller)
   - WebP fallback: 350 KB
   - JPEG fallback: 500 KB

2. Thumbnail grid: WebP thumbnails (300×300)
   - Each thumbnail: 20 KB
   - 50 thumbnails: 1 MB total (vs 25 MB if full-size)

3. Full-res images: Lazy-loaded on click
   - Only load when user views

Result: Initial page load 1.3 MB instead of 25 MB (95% reduction)

# Bad: Quality too low (JPEG quality 50)
Result: Visible compression artifacts, blurry edges

# Good: Find the sweet spot (quality 75-85)
Result: Minimal visual difference, significant file size savings

Tip: Always visually inspect compressed images before deploying

# Bad: Photo as PNG
photo.png: 2.5 MB (lossless compression wasted on photo)

# Good: Photo as JPEG or WebP
photo.jpg (quality 80): 400 KB (84% smaller)
photo.webp (quality 80): 280 KB (89% smaller)

Exception: Only use PNG for photos if you need to preserve transparency

# Bad: Serving 4K image for 400px display
<img src="photo-4000x3000.jpg" width="400" height="300" />
<!-- Browser downloads 3 MB, displays at 400×300 -->

# Good: Resize to display size (2× for retina)
<img src="photo-800x600.jpg" width="400" height="300" />
<!-- Browser downloads 150 KB, perfect display quality -->

# Bad: Only WebP (breaks in old browsers)
<img src="photo.webp" alt="Photo" />
<!-- Broken image in IE, old Safari -->

# Good: Progressive enhancement with fallbacks
<picture>
  <source type="image/avif" srcset="photo.avif" />
  <source type="image/webp" srcset="photo.webp" />
  <img src="photo.jpg" alt="Photo" />
</picture>
<!-- Works everywhere, modern browsers get smaller files -->

# Bad: Load all images immediately
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<!-- Downloads all images even if user never scrolls -->

# Good: Lazy load below-the-fold images
<img src="above-fold.jpg" />
<img src="image2.jpg" loading="lazy" />
<img src="image3.jpg" loading="lazy" />
<!-- Only loads images when user scrolls to them -->

# Convert to WebP
cwebp input.jpg -q 80 -o output.webp

# Convert to AVIF (requires libavif)
avifenc --min 20 --max 40 input.jpg output.avif

# Optimize PNG (lossless)
optipng -o7 image.png

# Compress JPEG
jpegoptim --max=80 --strip-all image.jpg

# Batch convert directory
find . -name "*.jpg" -exec cwebp {} -q 80 -o {}.webp \;