When I started using NextJs for the first time, I had such a hard time with the Next Image component. However, over time, I came to appreciate the sheer power and convenience it brings to the table. The Next Image component enforces a specific pattern that addresses a significant issue: "the layout shift". It also provides Size Optimization, Responsive Images, Automatic WebP support, Lazy Loading, automatic caching, etc. out of the box. But the most underrated feature of it is 'placeholders', and I think this is the best way to load images for most of the cases.
In this blog, we are going to explore what are some techniques we can use on image placeholders to make our site more snappy and different use cases of placeholders.
Why Use Image Placeholders?
Image placeholder solves the website layout shift problem. Here is an example of how images can shift the layout of the website
Here you can see that the image shifted the layout of the page. However, if we use placeholders it can hold the spot for the images, keeping the layout steady while the actual image loads.
How to use placeholders inside Next <Image />
Static Images
For static images it is pretty state forward,
As you can see just by adding placeholder="blur" we can achieve the blur effect. Here NextJs / Vercel does all the heavy lifting for turning the static image into a blurred image and uses this blurred image as a placeholder. Here placeholder="blur" in action.
This can be used in both server-side rendered and client-side rendered components
But there is a catch. For Next/Image to do its magic, we need to deploy our app in Vercel. Because under the hood it is using Vercel's edge function to turn the image into its base64 blur form.
Dynamic Images
As you can probably tell using placeholders for dynamic images can be tricky because we don't have an existing image to convert to its blur form. So alongside with placeholder, we need to provide a blurDataURL, which should be a base64 form of the image.
To address this we can generate the blur base64 image of the fetched image using a library called plaiceholder. Plaiceholder is a server-side function for creating low-quality image placeholders. To use plaiceholder we need to install sharp and plaiceholder. Some frameworks include sharp by default so check before installing the library. Here is the straightforward code to turn the actual image into its base64 version
First we need to fetch the image as an arrayBuffer . Then we pass the data to the getPlaiceholder function from the plaiceholder library and we get the base64 version of the image.
Then we pass the blur image to blurDataURL here passing the base64 version is necessary.
This code works because we are using server component of NextJs. If the component was client side rendered then it would not work. Because Plaiceholder uses sharp under the hood which is a server side library.
Making own custom Blur Image
We can turn any image to its base64 form and store it locally and use it as our blur image data. For example take any image and turn it into base64 version then use it in blurDataURL This will also work.
Here I am storing my blur image's base64 form in a json and loading it from there. Making a generic blur base64 which can be used throughout the application can be useful if you don't want to generate any blur images.
Lazy 💤
And If you just don't care use a solid background as a placeholder. You can use any gradient also.