25 / Image

Blur-up (LQIP)

A small blurred stand-in appears at once and the real picture fades in over it — in a box that was already the right size, so nothing jumps.

also called low-quality image placeholder · progressive loading

Two jobs at once: something to look at immediately, and a reserved box so nothing shifts when the real file lands. Layout shift is a ranked Core Web Vital, so the aspect-ratio is not decoration.

How it is built

figure { aspect-ratio: 3 / 2 } /* the box is reserved before the file lands */ .placeholder { filter: blur(18px); transform: scale(1.1) } .full { opacity: 0; transition: opacity .9s } /* → 1 once loaded */