How to Lazy load images in blogger - No Script [New Method]

Media files such as images are important to any article. They make contents more engaging and interesting. Also, an article with multiple images performs better on image search results. 

However, adding different images increase your page size resulting in slow loading. Search engines do not like slow loading pages.😔 So, what is the solution?

Answer - Lazy Loading Images or Deferring Offscreen Images. 😀

What is lazy loading?

Lazy loading of images is a simple technique to delay downloading of off-screen images. What exactly are offscreen images? Those images which do not lie in the screen when a page loads. 

Since users can't see offscreen images when they load a page, a good technqiue to boost pagespeed can be to load those blogger images once they are visible in users viewport. That is what lazy loading does.

Here is a video guide explaining what lazy load is.

 

Pros of lazy loading images in blogger

• Since images are only downloaded and loaded when they fall in users viewport, it improves page loading time.
• Helps in better search results.
• Enables readers to save data and bandwidth 🙏 .
  

Cons of deferring Offscreen images

• Since off screen images are not downloaded when a page loads, it might cause bad user experience 😨 .
  
• It also needs active internet connection throughout reading process.

When to use lazy loading?

If your website contains a lot of media files, it is advisable to implement loading of images on scroll.

Lazy loading is one of the method to improve page loading time. Find out more ways to do so.

In this article, I will share 2 methods to achieve lazy loading of images in blogger. One without script and other with script.

 

How to lazy Load images in blogger - New method

Recently, blogger provided a feature to auto lazy load images without any scripts. Isn't that cool? 😮

To enable this feature, go to your Settings > Look for Posts tab > Enable Lazy Load images. That is all.

It is good to know blogger is working on to improve its platform and provide more features by default. 😊

How lazy loading images in blogger works 🤔?

Blogger implements a browser-level image lazy loading, so no scripts are required. If you enable this, Blogger will add the loading='lazy' attribute to all <img> tags inside the post/page.

Here is how it looks:

<img alt="Sample Image" width="200" height="300" src="image.jpeg"  loading="lazy" />

 

When not to use Bloggers default lazy loading ❌?

It is important to note enabling lazy loading images on blogger setting works only for post images. For any other images, you need to manually add loading="lazy" attribute or use some third party scripts.

Also, not all browsers support loading="lazy" attribute. Check here to find out more info on support. 

It is advised to install a script if your website uses many images.

Method 2 : Lazy Load blogger images with script

Since adding a script guarantees lazy loading of all images, start by adding this script. This is a pure javascript solution. 

In case, your website uses Jquery, use this tutorial :

How to Defer Offscreen images: Lazy load images in blogger - TwistBlogg - Premium Blogger Tutorials and Widgets

Lazy loading of images is a technique preventing off-fold images from loading initially. Learn how you can defer offscreen images in blogger.

www.twistblogg.com

Place this javascript before closing head tag.

<script type="text/javascript">/*<![CDATA[*/ /*@shinsenter/defer.js*/ !function(c,i,t){var f,o=/^data-(.+)/,u='IntersectionObserver',r=/p/.test(i.readyState),s=[],a=s.slice,d='lazied',n='load',e='pageshow',l='forEach',m='hasAttribute',h='shift';function p(e){i.head.appendChild(e)}function v(e,n){a.call(e.attributes)[l](n)}function y(e,n,t,o){return o=(o=n?i.getElementById(n):o)||i.createElement(e),n&&(o.id=n),t&&(o.onload=t),o}function b(e,n){return a.call((n||i).querySelectorAll(e))}function g(t,e){b('source',t)[l](g),v(t,function(e,n){(n=o.exec(e.name))&&(t[n[1]]=e.value)}),e&&(t.className+=' '+e),n in t&&t[n]()}function I(e){f(function(o){o=b(e||'[type=deferjs]'),function e(n,t){(n=o[h]())&&(n.parentNode.removeChild(n),(t=y(n.nodeName)).text=n.text,v(n,function(e){'type'!=e.name&&(t[e.name]=e.value)}),t.src&&!t[m]('async')?(t.onload=t.onerror=e,p(t)):(p(t),e()))}()})}(f=function(e,n){r?t(e,n):s.push(e,n)}).all=I,f.js=function(n,t,e,o){f(function(e){(e=y('SCRIPT',t,o)).src=n,p(e)},e)},f.css=function(n,t,e,o){f(function(e){(e=y('LINK',t,o)).rel='stylesheet',e.href=n,p(e)},e)},f.dom=function(e,n,t,o,i){function r(e){o&&!1===o(e)||g(e,t)}f(function(t){t=u in c&&new c[u](function(e){e[l](function(e,n){e.isIntersecting&&(n=e.target)&&(t.unobserve(n),r(n))})},i),b(e||'[data-src]')[l](function(e){e[m](d)||(e.setAttribute(d,''),t?t.observe(e):r(e))})},n)},f.reveal=g,c.Defer=f,c.addEventListener('on'+e in c?e:n,function(){for(I();s[0];t(s[h](),s[h]()))r=1})}(this,document,setTimeout),function(e,n){e.defer=n=e.Defer,e.deferscript=n.js,e.deferstyle=n.css,e.deferimg=e.deferiframe=n.dom}(this); /*]]>*/</script>
<!-- Add the Intersection Observer Polyfill for legacy browsers -->
    <script id='polyfill-js'>&#39;IntersectionObserver&#39;in window||document.write(&#39;&lt;script src=&quot;https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver&quot;&gt;&lt;\/script&gt;&#39;);</script>

Now, to use it pass the original image link to data-src and add class="lazy" to image tag. Sample example:

<img alt="A lazy image with a low-resolution placeholder"
       width="200" height="300" class="lazy"
       src="placeholder.jpeg"
       data-src="actual_image.jpeg" />

Do not forget to activate lazy loading by placing following code before closing body tag.

<script>Defer.dom('.lazy', 100, 'loaded', null, {rootMargin:'1px'})</script>

With this script, you can basically lazy load anything, check this github page for more guides.

To conclude, lazy loading of images defer downloading of images which are not visible in users viewport. Recently, blogger provided a feature that allows for auto lazy loading of post images. Enable the option and make use of its service. Happy Blogging ✊