Lazy loading images will be possible to achieve via native HTML pretty soon! The image tag will have a new “loading” attribute as a part of the HTML standard. Before we dive into this deeper, let’s see some facts about Lazy loading.
What is Lazy Loading image, and why we need this?
The browser’s default behavior is to load all images when we open a web page. That’s not so handy. Lazy loading is a well-known technique for loading images asynchronously. In reality, it means that an image will start loading when it appears in the browser’s viewport only. Otherwise, an image won’t load at all! This powerful feature cannot be ignored, because we are living in an era where a website speed optimization is essential. Let’s list the actual benefits of lazy loading images:
- Reduce the number of HTTP requests
- Reduces network data usage (super important for mobiles)
- Reduces memory usage
- Loaded after the above-the-fold content is fully loaded
Lazy loading in HTML only
<img src="apple.jpg" loading="lazy" alt="Apple will be lazy loaded"/>
<img src="browser-default.jpg" loading="auto" alt="I'll be loaded as browser wishes"/>
<img src="the-old-way.jpg" loading="eager" alt="I'm not interesting at all"/>
Since when can I use this feature?
It’s expected that Chrome will ship support for lazy loading since version 75. Although, it probably won’t be available for all browsers at once. So, as a developer, you always need to care about browser compatibility. In order to detect if a browser currently supports this feature, you can do something like:
Actually, you can see on this website how lazy loading is powerful and its huge impact on page load speed. Check my home page once again to see that. It’s lightning fast!
We are all excited about the pace of how the web is changing, and we’ll probably miss many cool libraries and plugins that are a must-have at the moment. However, I don’t think that we will stress about that so much, as our developer’s life will be way easier 👍. Looking forward to faster web and better user experience!