Next.js: Add placeholder="blur" to Image component
Today, Next.js shows an empty placeholder when using loading="lazy" (the default behavior).
We would like to add a placeholder="blur" option that shows a low res, blurred image until the actual image has been loaded.
The blurred placeholder must work with any loader value and ideally the image would be inlined as a Data URL instead of incurring an additional HTTP request.
We should also consider other placeholder options such as placeholder="skeleton" or a user-defined class.
Prior Art
styfle
All 2 comments
This will do: https://github.com/joe-bell/next-placeholder
They are using blurhash and Base64.
larbisahli
on 6 Nov 2020
Hey friends, thanks for the mention of next-placeholder
Just a heads up that I'm working on a new strategy which, from early testing, has shown to be faster than any existing "blur" placeholder option out there. It's pretty much done but I need to do some more testing and documentation before I release
More than happy to collaborate with the Next.js core team to discuss further if this is urgent
joe-bell
on 6 Nov 2020
Related issues
YarivGilad
路
3Comments
renatorib
路
3Comments
havefive
路
3Comments
sospedra
路
3Comments
DvirSh
路
3Comments
Most helpful comment
Hey friends, thanks for the mention of
next-placeholderJust a heads up that I'm working on a new strategy which, from early testing, has shown to be faster than any existing "blur" placeholder option out there. It's pretty much done but I need to do some more testing and documentation before I release
More than happy to collaborate with the Next.js core team to discuss further if this is urgent