Skip to content
Disassembled utility knife arranged on a gridded cutting mat

A custom low-quality image placeholder (LQIP) engine so I can prioritize faster site loading over high-res image viewing.

The site loads the viewport-visible, low-res thumbnails first, then paints the high-res images in their place with a gradient alpha-mask transition to swap them in place.

You can use the demo above to see the swap in action.

Hopefully, you'd have noticed that it can actually be a little difficult to spot. I preferred this approach over a stylized heavy blur so that if the high-res images don't load or take a long time to do so, then the low-res image would have enough detail in it to actually serve as a useful placeholder.