Next.js Discord

Discord Forum

Blur Images

Unanswered
Somali posted this in #help-forum
Open in Discord
Avatar
SomaliOP
Is there a way to generate the base64 image needed for the blur effect on images on demand? I’m wondering how I could have blur images for the ones coming dynamically from a CMS for example.

https://nextjs.org/docs/app/api-reference/components/image#blurdataurl

3 Replies

Avatar
SupremeDeity
Image
Basically you need to generate the blurhash beforehand because you need a image to generate the blurhash. Its quite a small string so it can load very fast compared to big image
I dont know if nextjs natively provides a generator for this but generators are available online in many languages:
https://github.com/woltapp/blurhash