WebP Image Optimization and Blur Placeholders

Switching our portfolio to optimized WebP images was a game changer for performance. We wrote a Node script using Sharp to batch-convert more than 70 screenshots. The result? Average file size dropped from 229MB to just 18MB.

Automation Pipeline

• scripts/optimize-images.js converts PNGs and JPGs to WebP. Pass one or more directories as arguments.
• The script generates entries in image-optimization-map.json so components know which files are optimized.
• Low-quality placeholders are created with our blurPlaceholders.ts utility and injected into the OptimizedImage component.

Benefits

• File Size: 92% average compression saves bandwidth.
• Loading Speed: Blur placeholders render instantly while full images load in the background.
• User Experience: Smooth transitions boost perceived performance, especially on mobile.

The optimized images live in directories that mirror the originals, for example /public/portfolio-optimized/ or /public/about-optimized/. Our components automatically fall back to the original versions if needed. This workflow keeps our portfolio crisp and fast without manual effort.