How to Enable Lazy-loading Images on the Blogger Website [New Updated]
How to Enable Lazy-loading Images on the Blogger Website
If you run a Blogger (Blogspot) website, you've probably experienced slow page loading issues, especially on image-heavy blog posts. An easy way to speed up your site and give your readers a better experience is to enable lazy loading for images.
In this blog post, I'll give you a step-by-step guide on how to enable lazy loading on your Blogger website—even if you're not very technically savvy. The best part? It only takes a few minutes!
What is Lazy-loading?
Lazy-loading is a performance technique that tells the browser not to load all images at once, but only when they’re about to be seen on the screen.
So instead of loading everything at the top (even images that are way down the page), your browser loads images as you scroll. This reduces the initial load time, especially useful for users on slow networks or mobile data.
Why Should You Enable Lazy-loading on Blogger?
Here are a few good reasons to do it:
- Faster page load time
- Better experience for mobile users
- Reduced bounce rate
- Improved SEO (Google loves fast-loading sites)
- Saves your visitor's bandwidth
Whether you’re writing tutorials, photo-heavy travel blogs, or fashion content with lots of images—lazy-loading is a must-have feature in 2025.
✅Download Viomagz 5.1.0 Premium Blogger Template
How to Enable Lazy-loading on Blogger (Step-by-step)
Follow the below steps to add a lazyload script for bloggers. It will apply the lazy load for all images automatically. There is no need to manually add the Inline <img> tags.
a) Go to the Blogger dashboard and click on the theme section.
b) Then click on Edit HTML from the drop-down menu.
c) On the HTML Editor click on ctrl + F and search for </body> or scroll down to the end you will find this </body> tag.
d) Paste the javascript code just above the </body> tag and save it.
HTML
<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/AVvXsEiR-3WNj1AKX1J1s_f9AMefJrbs9vhVS1Fo48JZkS2MdVCbAzUQAilMMGDyYG61bmHjZY8_nidIaTZ_29at62NGHKtWi62eutm0yNyseXmFna_5dbf-tUMM8N4pNPsGUUr60_ZBxAXeFPGA/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>
Now you have successfully implemented the lazy loading of images on the blogger website.
Download
Click Here To Download
Optional: Manually Add Lazy-loading to Specific Images
If you want to be even more precise, you can manually add the lazy-load attribute to individual image tags in your blog posts.
Here’s how it looks:
HTML
<img src="your-image.jpg" alt="description" loading="lazy">
You can switch to the HTML view in the Blogger post editor and insert loading="lazy" in your image tags. This is great for older posts or where the script doesn’t apply automatically.
Important Tips
a) Always resize and compress your images before uploading
b) Use modern formats like WebP to reduce file size
c) Add width and height attributes to avoid layout shifts
d) Regularly test with PageSpeed Insights or GTmetrix