How to Add a Placeholder Image in NextJs

When designing NextJs applications, we frequently use image elements to load images. The images load quickly on faster networks and in simple apps, therefore we don’t need to use placeholder or blur images in NextJs. However, on slower connections and in apps like blog, media, and shopping that have long image grids or several image containers in scroll views, image placeholders must be added until the picture is loaded in the application from the url.

The new Version 11 is launched Read the updated post here.

How to Add Placeholder Image in NextJs v11

After a lot of Nextjs developers around the globe requested placeholder or blur images in Nextjs. Finally, NextJs has provided a image blur property for NextJs Image cpmponent.

Its available with NextJs v10.2.4.

How Placeholder Image Works in NextJs ?

To add placeholder or blur images in Nextjs all you need to do is pass 2 additional props in NextJs Image component. First placeholder and second blurDataURL.

Use blur placeholder image in NextJs in your app as follows:

<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"
/>

Before using these props, Upgrade your NextJs App to the latest version, Version > 10.2.4. To update your nextJs App to a specific/Latest version run yarn add [email protected] and select canary 13 or if you’re using npm run npm install [email protected]. I have implemented this blur image approach in my mobile pricing app.

Conclusion

We looked at how to load low quality blur image technique in NextJs. This feature is not added in Nextjs stable build right now. But you can still use it. 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.


Author Images
Syed
From Islamabad

A software developer with a keen interest in writing about technology, finance, and entrepreneurship. I've written for businesses in a variety of fields, including new technology, healthcare, programming, consumer applications, corporate computing, UI/UX, outsourcing, and education.

Post a comment

Your email address will not be published. Required fields are marked *

    Press x to close