Blurred placeholder for dynamic images
Unanswered
fedex delivery driver posted this in #help-forum
Hello. I'm relatively new to web development. I'm working on a mosaic (masonry) image gallery web component.
As part of that, I'd like to introduce blurred placeholders.
I've looked online, particularly youtube, and there seems to be an abundance of methods- I really don't know which methods are best, which methods are terrible, or if they all work fine. Some recommend using Plaiceholder.
Since this function is purely aesthetics, I do not wish to negatively impact performance. Thus, does anyone have recommendations on how I may proceed?
Apologies if this is a relatively simple question.
As part of that, I'd like to introduce blurred placeholders.
I've looked online, particularly youtube, and there seems to be an abundance of methods- I really don't know which methods are best, which methods are terrible, or if they all work fine. Some recommend using Plaiceholder.
Since this function is purely aesthetics, I do not wish to negatively impact performance. Thus, does anyone have recommendations on how I may proceed?
Apologies if this is a relatively simple question.
25 Replies
@fedex delivery driver Hello. I'm relatively new to web development. I'm working on a mosaic (masonry) image gallery web component.
As part of that, I'd like to introduce blurred placeholders.
I've looked online, particularly youtube, and there seems to be an abundance of methods- I really don't know which methods are best, which methods are terrible, or if they all work fine. Some recommend using Plaiceholder.
Since this function is purely aesthetics, I do not wish to negatively impact performance. Thus, does anyone have recommendations on how I may proceed?
Apologies if this is a relatively simple question.
This is purely for aesthetics? Not for enhancing the user experience through progressive loading?
If it’s pure aesthetics you can simply use CSS. Blur the image by setting a Blur on it, or make the image container Relative and add an Absolute div on top of it to apply the backdrop blur filter.
None will impact performance at all, it’s pretty simple
None will impact performance at all, it’s pretty simple
@LuisLl If it’s pure aesthetics you can simply use CSS. Blur the image by setting a Blur on it, or make the image container Relative and add an Absolute div on top of it to apply the backdrop blur filter.
None will impact performance at all, it’s pretty simple
Sure, but that’s not entirely what I meant.
With slower connection, images would usually take a few seconds to load.
Thus, introducing a blurred, low-res place holder might look better for the end user. But I’m not sure on how I could do that, or if it’s even really a good idea at this point.
I wasn’t asking how to blur the actual image, as that’s pretty easy.
With slower connection, images would usually take a few seconds to load.
Thus, introducing a blurred, low-res place holder might look better for the end user. But I’m not sure on how I could do that, or if it’s even really a good idea at this point.
I wasn’t asking how to blur the actual image, as that’s pretty easy.
Then it’s not purely aesthetics, that confused us
@Plague This is purely for aesthetics? Not for enhancing the user experience through progressive loading?
Improving user experience through aesthetic here is kinda the idea.
@LuisLl Then it’s not purely aesthetics, that confused us
Apologies, I thought that improving aesthetics would be indirectly inferred to as improving UX
That’s a common pattern, I’ve seen people getting the compressed image in base64 they make multiple requests, and after the real image loads asynchronously it gets swapped.
Yeah, that’s what I wanna do. I just don’t know how to achieve it in the best possible way without sacrificing too much loading time (extra calls do mean slightly longer, I understand)
Some forums have discredited use of certain methods to the point idk where to go off on.
Oh okay, so you just want to do the standard progressive loading of showing a low-quality fast-loading blurred version of the original image, then when the original image is done loading swap in the original?
@Plague Oh okay, so you just want to do the standard progressive loading of showing a low-quality fast-loading blurred version of the original image, then when the original image is done loading swap in the original?
Progressive loading is good, though I’m content with having one blurred image as a placeholder (it doesn’t have to be a progressively higher res)
Check this out, here’s Lee Rob implementing it
I’ll see how I can modify the code for the loading part. I’ve already made the image gallery.
Thank you.
Sure, must be pretty straight forward.
I will get back if I’ve got any more questions.
@LuisLl Sure, must be pretty straight forward.
I’m new, so not much is straightforward atm, but the learning curve is not extensive.
Don’t worry, the video is pretty beginner friendly as well. That was Lee Rob’s job
Btw, since the video is old, it’s outdated on the optimizations the Next.js Image component makes by default. The <Image /> component now has some properties where you can show a Blur Placeholder while the image is loading.
https://youtu.be/6zDb1kh52nM?si=sJ5N6JywtU5Ts7by
https://youtu.be/6zDb1kh52nM?si=sJ5N6JywtU5Ts7by
If you want you can read the docs but honestly seeing it visually really helps getting it.
@LuisLl Btw, since the video is old, it’s outdated on the optimizations the Next.js Image component makes by default. The <Image /> component now has some properties where you can show a Blur Placeholder while the image is loading.
https://youtu.be/6zDb1kh52nM?si=sJ5N6JywtU5Ts7by
Yes, I figured out how the blur placeholder works for static images but not dynamic.
@LuisLl Btw, since the video is old, it’s outdated on the optimizations the Next.js Image component makes by default. The <Image /> component now has some properties where you can show a Blur Placeholder while the image is loading.
https://youtu.be/6zDb1kh52nM?si=sJ5N6JywtU5Ts7by
Yes for static images is simple, it’s done automatically, but for dynamic you need to do a little more
You need to manually provide fallback image in the
blurDataURL. This is done automatically for static images that’s why you don’t need to.@LuisLl Btw, since the video is old, it’s outdated on the optimizations the Next.js Image component makes by default. The <Image /> component now has some properties where you can show a Blur Placeholder while the image is loading.
https://youtu.be/6zDb1kh52nM?si=sJ5N6JywtU5Ts7by
The [Docs](https://nextjs.org/docs/app/api-reference/components/image#blurdataurl) mention a library that’s used on this video.