Blur-up image loading effects with Blogody

Although my excitement for Gatsby has faded over the past years, one of the features I really liked was the blur-up image effect used in Gatsby Images. The eye-catching feature was introduced in Gatsby to showcase what a static site builder can do for you during page generation: Producing a highly compressed thumbnail image from the original that can be shown on the web page as a placeholder while the full image is still loading.

Why use blurry images on websites?

The purpose of the effect is to create the illusion of faster loading speeds and it avoids showing an empty space where an image will load. The pattern is not new and has been applied by Medium and Facebook before.

Interestingly, I could not find a single study that confirms the alleged benefits for perceived performance are real. Some people even report they feel irritated by seeing a garbage image. I suspect this has something to do with expectations: If you know the blurry image is a fuzzy prelude to the final image, you may just as well enjoy the smoother transition effects.

The page speed metrics introduced by Google honors visual completeness and shows that I am not alone with my excitement about loading speed illusions. A blurry placeholder can increase visual completeness earlier and can have a positive…