How to LAZY LOAD Images. The Easy Way

HTML img loading lazy

I still see many so called SEO experts confusing the website owner community showing you complex methods such as JavaScript Coding or Intersection Observer API to trigger image to load when in viewport.

But you really do not need to go to all that trouble in todays internet world, because most modern browsers have built in functions to lazy load images.

That means, all you have to do is add loading=”lazy” to HTML image tag, and let the internet browser take care of it using Browser-level image lazy-loading for the web. That’s it.

Here’s How Your HTML Image Tag Should Look Like

<img src="yourwebsiteimagesource.png" loading="lazy" alt="important accessibility element" width="610" height="300">

Video Tutorial Showing How to Lazy Load HTML Images

You Should NOT Lazy Loading ALL HTML Images

Just because you may have heard that lazy loading HTML images are good for web page load times does NOT mean you should add lazy loading to ALL website images. Because incorrect usage will actually slow down page load times. Make sure that you ONLY lazy load images that are below the fold and NOT above the fold. webpage above the fold area and below the fold area That means, most websites will render differently depending on the devices website visitors use (Mobile Phone, Tablet, Apple iPad, Laptop, Desktop). Therefore, the location of HTML images on your website will change accordingly. Although there are many different ways to optimize websites, its only in your best interest to identify what devices are used the most.

Then, only use lazy loading on images that are NOT above the fold.

For example: WordPress CMS blog posts featured images are almost always above the fold. That means, you should NOT lazy load featured images on WordPress built site. But you can lazy load other images within the content area.

Another example: let’s imagine you are operating a Shopify Store and that your Products include an image gallery. Should you lazy load them? NO if the products images are shown in the first eyeful. YES if the product images are shown below the fold.

Yet another example: let’s imagine your website showcases an image gallery. Should you lazy load all images in the gallery? YES if above the fold area, only lazy load the first image in the gallery, and you can lazy load other images that are only visible when the website visitor presses on NEXT SLIDE. However, if the image gallery is shown below the fold, then, you can lazy load all of the images in your image gallery.

As you can see, using loading=lazy on HTML images requires bit more knowledge instead of just using it on all web page images.

By RankYa

RankYa is a digital services provider dedicated to growing your sales and business website's results. Highly experienced technical problem solver, Google products expert with proven 'Social Media Marketing' skills, RankYa (100% Australian Owned and Operated) is dedicated to helping small businesses to grow.

We're looking forward to contributing towards your online success. Contact Us.

Questions? Leave a Comment!

Your email address will not be published. Required fields are marked *