The pandemic of 2019-2020 made us all lazy. With no option but to sit at home, 35.82% of us gained weight in that phase, thanks to our laziness. Fortunately, that phase gives us an excellent chance to understand a somewhat similar concept in web development. So, how do you define the term “lazy”? While Google says, “Unwilling to work”, I can rephrase it to “not willing to work until necessary”. Until it is extremely necessary for a lazy person to move to another place than that lousy couch, they will stick to it.
Similarly, in CSS we call lazy images those images that are not willing to be fetched from the server to the client (from couch to the place X in our analogy) until it’s extremely necessary. Lazy images will serve as the center point of this blog. The post will revolve around encouraging the developers to make more and more images lazy in contrast to real life. The main attractions that will throw a bit of light on what these lazy load images are, how to lazy load images as well as the ways in which a developer can convert an image to lazy.
TABLE OF CONTENT
What Are Lazy Load Images?
Lazy Load Images with Intersection Observer API – The Mediocre Way
Lazy Load Images with the Loading Attribute- The Easy Way
Which Option is your Favorite?
Lazy loading in “images” or Computer Science as a general concept avoids the fetch request of that element until extremely necessary. For example, in Scala, we use lazy variables to avoid their initialization and calculation until necessary. This executes the program faster and consumes lesser memory.
In CSS, the same concept is used to load the images only when it is necessary. Images are something that loads the page heavily with their size. On average, Google analyzes that the images account for more than 60% of bytes of the web page. If you own a website, you can also check your page speed insights and know-how images overload your web page.
Apart from lazy loading, there are a lot of ways that the developers can try to optimize the web page performance. These may include understanding the images’ responsiveness, making their size smaller and using the correct file format. But still, whatever we do, images contribute to the majority of a web page, and the web page is incomplete today without appropriate images. Therefore, something is needed that can help us improve performance without omitting any images.
Images contribute so much to the web page today because they are important!
A study shows how [65% of people learn through visual imagery_](https://papers.ssrn.com/sol3/papers.cfm?abstract_id=587201), and another one by Brandwatch highlights that [3.2 billion image shares are executed every day_](https://www.brandwatch.com/blog/what-visual-listening/).
We cannot skip the images on our web page, which raises a new technique to load them and still save on the bandwidth. This is where lazy load images come to the rescue. The concept behind lazy load images is that not all the users arriving at a webpage read it entirely till the end. Some people come wandering off the internet to find out that the page is irrelevant to them. Some close the page at a point where they no longer need it.
Loading the page altogether for every user is wasting bandwidth and a potential user when we know that most users do not wait more than 2 seconds to load. So, why not skip the image loading and wait for our user to reach the point where the image is placed? This way, we are sure that if we are making a heavy request to the user, it would be worth it! For the people abandoning the page before the image is placed, the web page becomes faster, and the server requests become fewer. It is a win-win.
From the next section onwards, we shall discuss three methods for ‘how to lazy load images?’- the hard one, the mediocre one, and the easy one!!
With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...
You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...
Web development company in India & USA offers different types of web application development services with the best result oriented, clients all specifications, different technologies, etc with a cost-effective rate. Get a free quote.
We are the best offshore web development company in India providing web applications on Blockchain, AI & Chatbots. 15+ Yrs Exp., Save upto 60% on development.