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?
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
I too would love if that’d be added. A simple checkbox like you suggested would be great.
Yap… that would be nice!
Hi @MartWaring, @pumpkin, @Pegasus, I have good news!
Image lazy-loading will be in this weeks build of Elements
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
Thanks Dan