29 Blur-up / LQIP. 29 of 95.
29/PERCEIVED PERFORMANCE/29 of 95
Blur-up / LQIP
A blurry hint beats an empty box.
The problem
Images that pop in after loading cause layout jank and a blank gap while you wait.
The solution
A blurred low-quality preview shows immediately, then sharpens.
Experiment
Play with the values
1600ms
16px
How it works
- The image's aspect ratio is reserved so the layout does not shift when pixels arrive.
- A tiny blurred preview shows immediately in that box.
- The full image loads behind or beside that preview.
- A cross-fade hands off from the blur to the sharp image.
- The placeholder is removed once the full image is visible.
Seen in
Photo galleries
Thumbnails resolve from a blur, avoiding blank tiles.
Article heroes
Cover images preview instantly, then sharpen in place.
Product images
Store listings show a hint of each image before full load.
Avatars
Profile pictures fade in from a colour or blur placeholder.