Is it possible to lazy load images

To be fair I’ve only just bought Elements yesterday so I’m still finding my way round it but I’m trying to work out whether it is possible to lazy load images that are beneath the fold to optimise performance, or is this something on a to do list?

2 Likes

You’re actually the first person to request this feature, so it’s not currently implemented or on the to-do list… yet.

It seems the modern way to do this is by adding a loading="lazy" tag to the image. Perhaps a checkbox in the Image Component could allow you to opt images into being lazy-loaded?

CC’ing @ben on this, as he’ll know more about the best way to implement this :blush:

3 Likes

I too would love if that’d be added. A simple checkbox like you suggested would be great.

2 Likes

Yap… that would be nice!

1 Like

Hi @MartWaring, @pumpkin, @Pegasus, I have good news!

Image lazy-loading will be in this weeks build of Elements :tada:

3 Likes

whats the difference between lazy load and putting it in a reveal component?

Lazy loading is all about when the browser loads the image, it tells the browser to wait until the image is nearly in view before downloading it. This saves bandwidth and speeds up your page load time.

The Reveal component, on the other hand, is a visual effect, it controls how the image appears (e.g. fades in or slides in) once it’s in view. It doesn’t affect when the image is downloaded, unless you’ve also combined it with lazy loading.

You can use them together. Let the browser delay loading the image, and then add a nice effect when it shows up using reveal :blush:

Thanks Dan

Lazy loading it looking good :grin: Available in the next build…

2 Likes