A placeholder is what shows in an image's spot before the real file loads. Done well, the page feels faster and doesn't jump around.

The techniques

  • Dominant color — a single solid color block. Simplest and tiny.
  • LQIP (Low-Quality Image Placeholder) — a heavily blurred, tiny version of the real image.
  • BlurHash — a compact string that decodes into a blurry gradient resembling the image.

Why bother

Reserving the space stops layout shift (good for Core Web Vitals), and a blurry preview feels nicer than a blank box.

Pair it with the basics

Placeholders complement, not replace, the fundamentals: lazy loading, correct dimensions and compressed files.