How to Lazy Load Images in Blogger Website

Hi to all, in this article I am going to tell you al about how to lazy load images in blogger website easily in just few minutes by using a simple script.

Basically lazy load is an optimization technique for the websites that delays the loading resources until they are actually needed and it will reduce the initial loading time.

Here website speed is one of the main factor for ranking of pages in your bogger website and you will not get any image optimization plugins in blogger, so in this article I will tell you the best technique to optimize your website images.

To rank a webpage, images are also plays a key role, so due to the adding images it consumes more resources and decrease your webpage loading speed and after adding the code check the speed of the page, it will definitely improves the loading time and also check your analytics.

Basically for a good user experience, website should load within three to five seconds, as per google research the average loading time for websites is 22 seconds and to improve this we need to optimize your website images.

In WordPress you will get so many types of plugins available for image optimizations like short pixel, smush and more, and for blogger you need to optimize images manually by adding simple scripts.

We can optimize images by following some basic and simple techniques to improve your webpage loading time, the first is image format and as per google the best format is .webp, JPG 2000 and also you can add lazy load to your blogger website to improve the optimization.

Before going further we need to know:

what is lazy load

Lazy loading is one of the technique used for the optimization of images and to reduce the usage of the resources actually needed and to reduce the initial loading time of the webpage.

Example: If your page have multiple images at the middle of the page and the user need to scroll down to see those images and when you apply this lazy load to the page then when user scroll downs and arrives near to the images then only the images is visible.

There are so many advantages by lazy loading the images, it reduces the initial loading time by decreasing the page weight and save bother client and server resources.

Read the below provided steps carefully and completely to get clear understanding about lazy loading images for blogger.

Steps to Lazy Load Images in Blogger

Step-1: First of all, you need to login to your blogger website dashboard, by using login credentials.

Step-2: Bogger website dashboard -> Click on theme section -> Click on arrow icon -> Choose Backup -> Download theme.

Step-3: Follow the below path:

Blogger website dashboard -> Click on theme section -> Arrow icon -> Click on Edit HTML -> Blogger theme editor section.

Step-4: You need to copy below provided JavaScript Code.

<script> //<;b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLEsLo1VwOq-b_U0sdgfGJ6-IDohB6TjSb0iL9Q7sDkRRZR5PDGUCzjEil5F3-PTyCj6CCb3gBw_b9ydXKKr8A1_6JvUrVgeQuPHatM94Si-wWg38eg4gdLBxwNpOs073ZXm1lFQ2Ax66i/s1600/sun.gif",effect:"fadeIn",threshold:"-50"})}); //]]> </script> <script defer src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
Copy

Step-5: Now paste the copied JavaScript code just above closing body tag or </body> tag.

Step-6: After adding the code, Click on save button.

Step-7: It will take few seconds to save your entire theme code.

Step-8: You have successfully lazy loaded images in your blogger website without any issue by just adding a simple script.

Lazy Load without using any script

If you are not interested to add the script into your blogger theme editor section then you can also lazy load your webpage images without adding the script.

Now I will tell you how to lazy load images without using script, in this method you don't need to add any script, you just need to add a small code to your image code i.e. loading="lazy".

<img src="abc.jpg" alt="image tag" title="abc" loading="lazy"/>

By just adding the loading="lazy" code in your image tag helps the browser to find this image is lazy loaded and after this browser will only load image when  users scroll down below the webpage and reach the image location.

• Read More: Lazy Load YouTube Videos in Blogger

Note

If you get any error while saving the code then you need to restore you backup theme code and need to repeat the same process as mentioned in above steps.

Paste the code carefully just above closing body tag, if you add any other place then this lazy load code will not work properly.

Here you can lazy load images by adding the script or by manually adding the code in image tag, you can use any one method based on your choice.

If you use script in your theme then it automatically lazy loads all your blogger webpage images, but in manual method you need to add code in all the image tags, it is bit difficult, if you have already written so many posts then go for script.

Conclusion

I hope that you have understood about how to lazy load images in blogger website easily in just few minutes by using a simple scripts.