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.

Get your business website ready for 2022. Increase Google rankings and website conversions. Check out the latest

Master Class Course (Guaranteed Results)

By RankYa

RankYa is a passionate digital marketer, website optimizer, content creator, and a fully qualified web developer helping businesses of all sizes (big or small) to achieve better results online. We are a reputable and registered Australian business serving valued clients worldwide since 2008, built on hard work, honesty and providing exceptional personalized service

We love sharing our passion through freely available how to videos and courses related to business website marketing and optimization, Google (Search Console, Ads, Analytics, YouTube), SEO, HTML5, Structured Data and WordPress. Thank you for visiting our website. Rest assured that it will serve you well as well.

Leave a comment

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