21 / PERCEIVED PERFORMANCE
Blur-up / LQIP
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
Task: Reload the image and watch it resolve.
NAIVE
stateloading
placeholderblank
THOUGHTFUL
stateloading
placeholderblur-up
Play with the values
1600ms
16px
How it works
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.