How to lazy load your images?
In the last article, we learnt about Image Optimisation techniques which could result in 50% faster webpage loads. Today, we’re going to take this a step further and see how we can improve on that by “lazy loading” our images.
Sounds exciting? Read on!
So, What is Lazy Loading anyway?
This is probably best explained with an example.
You land on a page, and begin to scroll as you go through the content. At some point, you see a placeholder or a blurry image which is magically replaced by a crisp HD image. Déjà vu? That, ladies and gentlemen, is lazy loading for you!
Now that you know what I’m talking about, let’s understand how to implement this magic in our own website!
How is Lazy Loading implemented? The basics!
Refer the above code which has both the src and data-src attributes in an inline <img> tag. Browser loads the content of “placeholder-image.jpg” into the <img> tag because it does not recognise the data-src or data-srcset attributes. The lazy loading tactic is now a 2 step process:
- Check if the image is in the viewport.
- If yes, replace the src (and sometimes srcset) attribute with the value in data-src (or data-srcset)
Cool, right? I was flabbergasted when I understood this too! 🤯
Multiple ways of Lazy Loading
There are various ways you can implement this into your website. Three are 3 ways that I know of. Please feel free to add more in the comments section and I’ll include them in the following list. I’ve referenced the sources of each method so you can start right away after deciding which one to go for. Alright, here are the 3 ways:
- Using event handlers such as scroll & resize- Most compatible across browsers.
- Using Intersection Observers - Compatible with most modern browsers.
- Lazy loading via attribute (loading=”lazy”) - Simplest of all but Incompatible with Safari. Check the compatibility here.
3rd Party Libraries
If you’re not up for churning out code that implements Lazy Loading from scratch all by yourself, don’t worry! There are quite a lot of options that you can choose from which provide the same experience as above with minimal overhead.
Enter lazysizes
lazysizes is a fast (jank-free), SEO-friendly and self-initialising lazyloader for images (including responsive images picture/srcset), iframes, scripts/widgets and much more. It also prioritises resources by differentiating between crucial in view and near view elements to make perceived performance even faster. lazySizes is written in VanillaJS and with high performance in mind.
How does it work?
Simply add the JS to your website and put the class “lazyload” to all img elements, which should be lazy loaded and voila! Here are the detailed steps to help you out:
- Download the lazysizes.min.js script and include lazysizes in your webpage (<script src=”lazysizes.min.js” async=””></script>)
- Add the class “lazyload” to your images along with a data-src and/or data-srcset attribute which hold the actual image. Optionally you can also add a src attribute with a low quality image which tells the user to expect something till the actual image loads.
Conclusion
Lazy loading images can dramatically lower the initial load time and network downloads on your site. Users won’t incur any processing costs of images they may never see, unless and until they really want to.
Awesome! So, you’ve learned what “Lazy loading” is, why it is required and how/ways to implement the same into your website. If you haven’t, please feel free to reach out to me in the comments section and hopefully I’ll be able to solve your queries.
With all these optimisations in place, your Angular app is now pretty fast and thus resulting in a Great User Experience! 😊
What next?
In the next articles, I’ll discuss about the following:
- How to serve images in next-gen formats and handle fallbacks for browsers that don’t support them?
- How to automate these in your Angular Build Flow using CLI tools?
Till then, keep learning and have fun while you’re at it.
Keep on Hacking!
PS: I’m not a subject matter expert in any of these areas but I am learning. So, if you find any mistakes or have any suggestions, please leave a comment.
Originally published at https://www.linkedin.com.
