LQIP/LCP Comparison Demo

This project demonstrates and compares several Low-Quality Image Placeholder (LQIP) techniques for a hero image, with the goal of evaluating their impact on Largest Contentful Paint (LCP) and perceived load experience. Each test page implements a different approach:

• Baseline Lazy
  JPG hero image with loading="lazy".
• Baseline Eager
  JPG hero image with loading="eager".
• Baseline Eager Fade-in
  JPG hero image with loading="eager" and a fade-in transition effect.
• LQIP BMP
  A simple LQIP technique: a tiny 8x8 BMP bitmap as a background-image, then the full-res image.
• LQIP PNG
  A simple LQIP technique: a tiny 8x8 PNG bitmap as a background-image, then the full-res image.
• LQIP WEBP
  A simple LQIP technique: a tiny 8x8 WEBP bitmap as a background-image, then the full-res image.
• LQIP WebP (smooth)
  A simple LQIP technique: a tiny 8x8 inline WebP as a background-image on the wrapper, then fade-in to the full-res image.
• Ultimate LQIP
  The “Ultimate LCP Technique” from Harry Roberts: a two-level LQIP technique: a tiny base64 placeholder, then a display-size LQIP-LCP image at 0.055 BPP, then the full-res image.
• BlurHash
  BlurHash LQIP: a BlurHash string is rendered to a canvas, then the hero image fades in on top of it.
• SQIP
  SVG placeholder generated by SQIP, swaps to full-res hero image. Attempt a padding technique to reduce LCP (doesn't work).
• CSS-only LQIP
  Pure CSS LQIP: dominant color or gradient as background, hero image fades in on top of a blurry CSS placeholder. Inspired by leanrada.com.
• Results
  Lighthouse results for all pages.
• Credits
  Credits and references.

Points of Comparison

• Payload size: Inline WebP base64 vs. inline SVG vs. CSS (+ JS) size.
• Placeholder render quality: Visual fidelity and smoothness of transition.
• Load experience: Jank, visual shift, and need for fade-in effects.
• LCP score: How each technique affects Lighthouse LCP measurement.
• Processing requirements: Simplicity and efficiency of each approach.

Open each test page and use Lighthouse or WebPageTest to compare LCP and user experience.