🖼️ Image Optimization Test Page

Test 1: BlurImage with Hero (should have blur-up effect)

Image: pexels-pixabay-277593.jpg

Expected: Low-quality placeholder → smooth fade to full image

Test 2: BlurImage with Founder Photo

Image: jeremie-poutrin.jpg

Expected: Blur-up effect on profile photo

Test 3: OptimizedImage (no blur, just format optimization)

Image: okrs.png

Expected: No blur effect, but AVIF/WebP optimization

Debug Information

Open browser DevTools (F12) and check:

• Console: Look for any JavaScript errors
• Elements: Inspect BlurImage containers for:
  • Class blur-image-container
  • Placeholder image with blur-placeholder class
  • Base64 data URL in placeholder src
  • Main image with blur-image-main class
• Network: Check which format loaded (AVIF, WebP, or JPEG)