How to present a blurred version of an image in NextJS as it's being downloaded?

Question

I'm looking for a similar effect as this one below:

I have done something similar with Gatsby, but I'm wondering if this is possible to do with NextJS?

Answer 1

For version above 10.2 Nextjs is providing built in blur image in Image component. After spending hours I found this article

First you need to update your nextJs app to 10.2.4 or above version.

yarn add [email protected]

Then implement your nextJs Image component with two addtional props blurDataURL and placeholder. Check the code example below.

<Image
   className="image-container"
   src="/images/high-quality-image.jpg"
   width={250}
   height={240}
   quality={75}
   blurDataURL="/images/path-to-blur-image.jpg"
   placeholder="blur"
/>

Next.js Update:

Next.js now support placeholder="blur" you can use it in the image component:

<Image src={author} alt="Picture of the author" placeholder="blur" />

Answer 2

You can do it without using an external library with not much code.

https://codepen.io/darajava/pen/GRZzpbB?editors=0110

I added animations in there too on load. The image will fit to the width of its parent container. Usage is simple:

<LoadImage largeImageSrc={url} smallImageSrc={url} />