A few years ago, browsers implemented a standard way of lazy loading images. The standard was a huge boon because it was straightforward to use and less code than JavaScript solutions. Unfortunately, when it was released, it didn’t support a couple of common use cases. Now it does.
To lazy load an image, all you have to do is add loading="lazy" to an image element and the browser knows not to load it until the image is about to be visible in the viewport.
When it was released, loading="lazy" worked great for images further down on the page that a user might scroll to, but it didn’t support hidden images in the initial viewport. Many websites will have images in their menus or in a carousel high on the page that you likely don’t want to download ahead of images that are visible. You probably want those images to lazy load.
Because of this limitation, we often recommended implementing a lazy loading JavaScript library for images in menus or in carousels while using loading="lazy" for all of the images further down on the page.
A few days ago, I learned browsers upgraded the lazy loading standard to support these hidden image use cases. If you have images in menus or carousels or some other interface that is technically above the fold, but not visible, all you need to do is add loading="lazy" and the browser will defer downloading the image. You no longer need a JavaScript solution for those use cases.
Apparently, the change happened a couple of years ago, and I missed the good news. So I thought I’d share it in cases others missed the change as well.
We’re Cloud Four
We solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations.