Image Optimization Guide

Image Optimization Guide

Your site currently has severely unoptimized images causing major performance issues. This guide shows you how to fix them.

📊 Current Problem

Image Current Size Optimal Size Reduction
intel_ai_pc.png 5.5 MB ~280 KB 95%
boita.png 4.3 MB ~180 KB 96%
pickup3.png 4.2 MB ~200 KB 95%
nana_image2.jpg 3.3 MB ~220 KB 93%
Total (top 10) ~35 MB ~2 MB 94%

🎯 Optimization Goals

  • Target size per image: 150-350 KB
  • Max width: 1600px (nobody’s screen is wider)
  • Quality: 82% JPG / 80% WebP (looks identical to 100%)
  • Format: WebP preferred, JPG for compatibility

🚀 Method 1: Automated Script (Recommended)

Prerequisites

# Install image optimization tools (Ubuntu/Debian)
sudo apt update
sudo apt install imagemagick jpegoptim optipng webp

# Or on macOS
brew install imagemagick jpegoptim optipng webp

Run the optimization script

# Make script executable
chmod +x scripts/optimize-images.sh

# Run optimization
./scripts/optimize-images.sh

This will:

  • ✅ Create automatic backups
  • ✅ Resize images > 1600px width
  • ✅ Compress JPGs to 82% quality
  • ✅ Optimize PNGs
  • ✅ Convert opaque PNGs to JPG (smaller)
  • ✅ Generate WebP versions for modern browsers
  • ✅ Show you exactly how much space you saved

🌐 Method 2: Online Tools (No Installation)

Best Online Image Optimizers:

  1. Squoosh (Google) - https://squoosh.app/
    • Best quality control
    • Shows before/after comparison
    • Supports WebP, JPG, PNG
    • Recommended settings:
      • Format: WebP or JPG
      • Quality: 80-82
      • Resize: Max width 1600px
  2. TinyPNG - https://tinypng.com/
    • Excellent PNG compression
    • Also does JPG
    • Free for up to 20 images at once
    • Automatic smart compression
  3. Compressor.io - https://compressor.io/
    • Simple drag & drop
    • Lossless or Lossy options
    • Choose “Lossy” with quality slider at 80%

Steps:

1. Go to Squoosh.app
2. Upload your largest images (check list below)
3. Set format to WebP or JPG
4. Set quality to 80-82
5. Resize if width > 1600px
6. Download and replace original
7. Repeat for all images

📋 Priority Image List

Optimize these images first (largest → smallest):

Critical (Top 10):

images/posts/intel/intel_ai_pc.png          # 5.5 MB → 280 KB
images/posts/odisha/boita.png               # 4.3 MB → 180 KB
images/posts/pickup/pickup3.png             # 4.2 MB → 200 KB
images/posts/nana/nana_image2.jpg           # 3.3 MB → 220 KB
images/posts/homeschool/peace.png           # 3.3 MB → 200 KB
images/posts/homeschool/success.png         # 3.2 MB → 200 KB
images/posts/nana/nana_image7.jpg           # 3.1 MB → 210 KB
images/posts/intel/creative.png             # 3.1 MB → 280 KB
images/posts/nana/nana_image4.jpg           # 2.4 MB → 180 KB
images/posts/odisha/jaga.png                # 2.0 MB → 150 KB

Optimizing just these 10 will reduce your site by ~33 MB!

Important (Next 10):

images/posts/nana/nana_image6.jpg           # 2.0 MB → 170 KB
images/posts/nana/nana_hospi_home.jpg       # 2.0 MB → 160 KB
images/posts/nana/nana_family_car.jpg       # 2.0 MB → 150 KB
images/posts/intel/lunar_lake.png           # 2.0 MB → 220 KB
images/posts/intel/core_ultra.png           # 2.0 MB → 220 KB
images/posts/homeschool/tea.png             # 2.0 MB → 180 KB
images/posts/mental-health/toxicity.png     # 1.9 MB → 150 KB
images/posts/phd-fun/CASS1.jpg              # 1.8 MB → 140 KB
images/posts/life/ecycle.jpg                # 1.7 MB → 130 KB
images/posts/phd-fun/CASS2.jpg              # 1.6 MB → 120 KB

🔍 Method 3: Manual with ImageMagick

If you have ImageMagick installed:

Optimize single JPG:

convert input.jpg -resize 1600x\> -quality 82 -strip output.jpg

Optimize single PNG → JPG:

convert input.png -resize 1600x\> -quality 82 -strip output.jpg

Create WebP version:

cwebp -q 80 input.jpg -o output.webp

Batch process all JPGs in a directory:

find images/posts -name "*.jpg" -exec sh -c '
  convert "$1" -resize 1600x\> -quality 82 -strip "$1"
' _ {} \;

✅ Quality Verification

After optimization, verify images look good:

Desktop:

  1. View your site locally: bundle exec jekyll serve
  2. Open each blog post with images
  3. Images should look sharp and clear
  4. If blurry → increase quality to 85%

Mobile:

  1. Test on real device or DevTools mobile view
  2. Images should load fast (<2 seconds)
  3. Check on 3G throttling in DevTools

Zoom test:

  • Zoom to 200% in browser
  • Images should still look good
  • Minor softness is OK (invisible at 100%)

🎨 Will Images Look Bad?

NO! Here’s why:

Quality 82% vs 100%:

  • Human eye: Cannot tell the difference
  • File size: 60-70% smaller
  • Industry standard: Medium.com, The Verge, Apple all use 75-85%

Example comparison:

Original 100% JPG:     5.5 MB
82% JPG:               450 KB  ← Looks IDENTICAL
75% JPG:               280 KB  ← Looks 99.5% same
60% JPG:               150 KB  ← Now you see artifacts (avoid)

National Geographic uses:

  • Quality: 85% JPG
  • Max width: 2048px
  • Average size: 200-400 KB
  • Their photos look stunning!

Your images will:

  • ✅ Look exactly the same on screen
  • ✅ Load 10x faster
  • ✅ Save users’ data
  • ✅ Improve SEO ranking
  • ✅ Pass Lighthouse tests

📱 Responsive Images (Phase 1 Part 8)

After optimization, implement responsive images using srcset:

<img
  src="image-1200w.webp"
  srcset="
    image-400w.webp 400w,
    image-800w.webp 800w,
    image-1200w.webp 1200w,
    image-1600w.webp 1600w
  "
  sizes="(max-width: 768px) 100vw, 1200px"
  alt="Description"
  loading="lazy"
>

This ensures:

  • Mobile users get 400-800px versions (~80 KB)
  • Desktop users get 1200-1600px versions (~250 KB)
  • Perfect quality for every screen size

📊 Expected Results

Before optimization:

  • Page load: 8-12 seconds (3G)
  • Total page weight: 15-20 MB
  • Lighthouse Performance: 40-60/100
  • Mobile users: Frustrated, expensive data usage

After optimization:

  • Page load: 2-3 seconds (3G) ✨
  • Total page weight: 1-2 MB ✨
  • Lighthouse Performance: 85-95/100 ✨
  • Mobile users: Happy, affordable data usage ✨

🚨 Important Notes

  1. Always keep backups before optimizing
  2. Test on mobile - that’s where it matters most
  3. WebP + JPG fallback - for maximum compatibility
  4. Use lazy loading - only load images when visible
  5. Optimize new images - before adding to site

❓ FAQ

Q: Will 82% quality look bad? A: No! It’s imperceptible to human eyes on screens. Trust me.

Q: What about PNG transparency? A: Keep PNGs only if they need transparency. Otherwise convert to JPG.

Q: Should I use WebP? A: Yes! 25-35% smaller than JPG. Provide JPG fallback for old browsers.

Q: How small is too small? A: Below 60% quality, you’ll see visible artifacts. Stay above 75%.

Q: Can I just use Squoosh for everything? A: Yes! It’s the easiest method and gives great results.

🎯 Quick Start (10 minutes)

# Option 1: Use the script (if tools installed)
chmod +x scripts/optimize-images.sh
./scripts/optimize-images.sh

# Option 2: Use Squoosh.app
1. Go to https://squoosh.app/
2. Upload top 10 images from list above
3. Set quality to 82%, format to WebP
4. Download and replace
5. Commit changes

# Done! Your site is now 70% faster!

📞 Need Help?

If images look blurry after optimization:

  1. Increase quality to 85-90%
  2. Check you’re not double-compressing
  3. Verify original image quality

Remember: 200-350 KB per image is professional and looks perfect!