How to incrementally load transparent images with NextJS

2 min readNov 17, 2021

on the left is using plaiceholder lib and on the right is a custom hook + custom component. You can see the second takes into account the transparent pixels.

With NextJS 11 things started to get easier to add image placeholders to have the nice incremental loading effect on images. With that, came some third-party libs to make it easier to generate the small base64 string necessary to add the blurDataURL Image’s property on the Image component. One of these libs is plaiceholder however, these libs don’t play nicely with transparent png images because they don’t take into account the transparent pixels to generate the small base64 string.

gif representing the issue. You can see the image has a transparent bg but with plaiceholder it doesn’t take it into account

The solution

The solution I came up with was to manually resize the png image to something like 50x50. Then pass the small and original images to a custom hook which returns the small image’s src while the large one has not yet loaded.

The custom hook: