In this article, we’ll look at how we can blur images while loading in version 11 next.js, the most recent version of Vercel’s framework. Next.js 11 was recently released by the Next.js team. For developers and end-users, the new version aims to increase actual and perceived performance (start-up time, third-party scripts loading, image and placeholder blur Image).

The addition of placeholder functionality with optimised and smooth animation is the picture component. Blur Image or placeholders have been added to next/image in version 11 to make the transition from blank space to picture easier and reduce apparent loading time, especially for people with poor internet connections.
This animation may be seen below:

First, you need to upgrade nextJs to the latest version but before that upgrade your reactJS by running the first command below and then run the second command to upgrade nextJS

npm install [email protected] [email protected]
npm install [email protected]

Or if you’re using yarn:

yarn add [email protected] [email protected]
yarn add [email protected]

Add Placeholder Image in NextJs

The Next.js provide us <Image> component to load our images faster and optimized with different screen sizes. Lets take a look how we can add images with NextJs Image Component.

The first step is to import the Next.js image library:

import Image from 'next/image'

And then you can use it anywhere in your JSX code. Example:

<Image
    src="/images/bacground-1.jpg"
    alt="NextJs Image"
    width={800}
    height={600}
 />

There is another optional property name quality of the optimized image. You can pass an integer value between 1 – 100 where 100 will show the best quality. If you do not add this property the defaults to 75.

<Image
    src="/images/bacground-1.jpg"
    alt="NextJs Image"
    width={800}
    height={600}
    quality={90}
 />

By default, all Images added with Next.js Image component will have lazy loading enabled you can disable it by setting the loading property to “eager”.

Now let’s add the placeholder and blur image while the original image is loading.

A placeholder has two properties empty and blur by default it is empty.

Let’s take a look at an example with blur image.

<Image
  src="/images/bacground-1.jpg"
  alt="image with blur support"
  layout="fill"
  placeholder="blur"
/>

We have added placeholder=”blur” and it will automatically add a blur placeholder to our image. However, the above code will only work for static images (images from the project directory). For dynamic images (i.e coming from an API or external cloud storage) Next.js has provided a custom blurDATAURL property, blurDATAURL takes a blur version of your image as an input. For example, you can generate a blurha.sh on the server or you can add a reduced size image of your original image.

<Image
  src="https://nextjs.org/static/images/learn.png"
  alt="Picture of the author"
  placeholder="blur"
  blurDataURL="/images/blur.jpg"
/>

In the above example, the learn.png image will be loaded from nextJs assets and while it will be loading it will show a blur image like below from the project directory. You can also add a gif image as a placeholder to show the loading.

Conclusion

We looked at how to load low-quality blur image technique in NextJs. This feature is now available with the stable release of version 11. Thank you for taking the time to read this! Has this article been of assistance to you? Please share it with your friends on social media.