Vanilla-lazyload: Blur Up Image Placeholder

[jgarite]

I'm trying to take your lazyload plugin and apply a blur up technique when I noticed you used to have a placeholder option in the config. Will this be coming back to allow for placeholders while the image is loading?

[verlok]

Hi @jgarite,

I removed the placeholder option to allow the images to show _while_ they are loading, improving the perceived performance.

In fact, if you use a placeholder image while loading, the lazy image will show only when fully loaded, whereas a baseline jpeg or a progressive jpeg are showed while they load.

Can I suggest to convert your images to progressive jpeg? I think it would achieve a similar effect, but improving the perceived performance a lot.

If you really want to use a placeholder image, you can put the placeholder in the img tag using the src attribute. This will show that image until the lazy one is fully loaded.

What do you think?

[jgarite]

I understand the benefits of progressive jpeg, but it's not always possible to re-compile images as different types. For example, a site may have thousands of images and no way to change their format in an automated fashion. I've used the background style to place an image on the img container but will try using the srctag and see how that compares. That may be exactly what I need, thanks for pointing that out.

[jgarite]

@verlok Using the src attribute works, but I lose the ability to have the images fade in. It would be nice to have that. Thanks again for the help.

[verlok]

I understand the benefits of progressive jpeg, but it's not always possible to re-compile images as different types.

Have you ever considered a cloud based image converter like Cloudinary? It works in different ways, with auto-uploading, with API, with fetch, etc. It rocks!

Using the src attribute works, but I lose the ability to have the images fade in. It would be nice to have that.

Sorry I just realized there's no recipe and no link to the demos folder in the README file. Will add that.
Here you go: https://github.com/verlok/lazyload/blob/master/demos/fade_in.html

[verlok]

I've created a LazyLoad with Fade-in effect demo on Codepen so you can take inspiration from that. If you need a placeholder image, you can put it in the background of the .image div.

I didn't put the placeholder image in the src as advised here in order to have best perceived performance.

[verlok]

@jgarite what do you think?

[jgarite]

Thanks @verlok . What I ended up doing was apply fade to .lazyload.loaded. it's not as perfect as i'd like because the moment the image is loaded, the blurred image is removed so the image fades from white (background color) to opacity:1 which makes it more obvious that something is happening. It'll do for now, but it would be great if in the future there was a way to keep the blur up image, fade in the fullsize image and fadeout the blurred image. this would make it less obvious to the user that something is happening. or, maybe its better that the user see something so they know its not blurry anymore...not sure. either way, thank you for your help, the src attribute was the solution for me.

[verlok]

Hard to tell which would be better for the user experience without seeing it, I can tell you that for the SpeedIndex KPI, the one that Google uses to measure your page speed, the lesser changes there are in the viewport the better.

For this reason I also suggest you (all) to lazy load not all the images, but only from the first one that you estimate will be out of the viewport with a good probability.

For example, in an commerce category page you fa out the first 6-8 images in the src/srcset directly, and from the 7th/9th on use the data- attributes to lazy load the images.

This will result in much better performance because the first images will be loaded even before javascript is downloaded and executed, so as soon as the browser finds them in the HTML markup.

[jgarite]

@verlok Excellent point about the images in the viewport on load, I hadn't considered that. When I get a chance, I'll put my code in a pen and share it with you.

[chelssi]

@verlok one question please,

When you say not to put any value in the src nor srcset attributes for better perceived performance, what do you mean? include src="" or not include src?

Thank you,
Carlos

[verlok]

I mean to not include src.

If you include any src, the lazy image will be shown only when it’s completely downloaded.

If you include an empty src or a placeholder image, the lazy image will be shown while it’s downloading.

This is especially effective if your images are saved in the progressive jpeg image format, but also if they aren’t. See the difference.

Let me know if you need more information.

[nishanttotla]

@jgarite did you ever get a chance to share your code? I'd love to understand your solution also.

[jgarite]

@nishanttotla I didn't and this fell off my radar. I'll try to share it today or tomorrow.

[nishanttotla]

@jgarite thanks! I went ahead and set the src attribute to put in a stock blurry image as background for every image. This in itself improves the experience a lot. Thanks a lot to @verlok for writing this library and making it so easy!

[verlok]

You’re welcome, guys!