How to create an image with blurry loading effect in NextJS

NextJS has provided a built-in image component that has many useful features, we can leverage them with some custom styles to create a beautiful image with a blurry loading effect.

Blurred image

The simple idea here is to make the image blurry at first (with blur-xl class), and then fade it in by removing the blur effect (with blur-0) when the image is loaded.

I'm using Tailwind blur filters utility to create the blur effect. You can create your own variation by mixing the blur utility with others like grayscale, scale, etc. (Remember to update the transition property as well).

Adjusting the size

The component is auto-sized following the child image, you can pass className to customize its size. For example:

MDX support

If you want to use the component to render images in MDX files, you will need to update tailwind typography config to make the images responsive.

Avoid blurring on every render

The blur effect is happening every time the Image component is rendered (even if the image is already loaded). If you want to avoid this, you will need to control the loaded state manually:

Now the image will be blurred when it is loaded for the first time on each page.

My blog is using this component to render images, you can navigate around the site and see the beautiful loading effect in action.

Happy blurring!