Progressive Image

Problem

Users stare at blank white rectangles while high-resolution images load, creating a jarring experience. Layout shifts occur when images suddenly pop in after several seconds. Slow connections leave pages feeling broken with missing content. Users can’t tell if images are loading or failed to load entirely.

Solution

Show low-quality placeholders immediately while high-resolution images load in the background. This provides instant feedback and prevents layout shifts as images arrive.

Example

This example demonstrates progressive image loading by showing a blurred placeholder immediately, then swapping in the high-quality image once it loads.

function ProgressiveImage({ src, placeholder }) {
  // Start with placeholder, swap to full image when loaded
  const [imgSrc, setImgSrc] = useState(placeholder);

  useEffect(() => {
    // Preload full-quality image in background
    const img = new Image();
    img.src = src;
    // Swap to full image once it's loaded
    img.onload = () => setImgSrc(src);
  }, [src]);

  // Show blurred placeholder until full image loads
  return <img src={imgSrc} alt="" style={{ filter: imgSrc === placeholder ? 'blur(5px)' : 'none' }} />;
}

Benefits

• Provides instant visual feedback instead of blank rectangles.
• Prevents layout shifts by showing content at the correct size immediately.
• Improves perceived performance by showing something immediately.
• Creates a smoother, more polished loading experience.

Tradeoffs

• Requires generating and serving multiple versions of each image.
• Adds complexity with placeholder loading logic and transitions.
• Increases total bytes transferred since both placeholder and full image load.
• May show blurry images longer on slow connections, hurting quality perception.