Lazy loaded images

by @cyballruiz

Lazy load is a well know feature for images, is basically waiting to reach the point of our image to load the resource.

This helps a lot with loading time and PageSpeed Insight score.

Fortunately, Chrome offers us a 'browser-level' solution. 

img src='...' loading='lazy' alt='...' width='200' height='200'

For all the themes I build, I code this solution for images shown in:

  • Homepage and navigation pages
  • Label pages
  • Search result pages.
  • Custom gadgets

But inside the post, only authors can add the feature image per image. 

What is needed to lazy load images?

As you can see in the example, one image needs

  • The attribute loading='lazy'
  • Attribute width and height

All of them are needed.

Gladly, when we upload images in our post and choose any size (not original size), Blogger adds for us width and height attributes, so we only need to add loading='lazy'.

If you use the original size option, then you will need to set the width and height as in the example above (using the right values of the image).

How can you add it?

Once you finish writing your post, you can change it to HTML View in the editor, and add to every image:


That is basically what is needed.

What if you have so many images?

Well, in that case, I have another tip for you:

  • Install in your device (ideally a desktop PC or laptop) Sublime Text 3, this is the tool I use to work :)
  • Once you finish your post, change to HTML view, grab all the code and paste it into a new file in Sublime Text.
  • There use the Search option, CTRL + F or ⌘ + F, and fill the fields FIND and REPLACE as the image below. Then click REPLACE ALL. And done!!

Grab the new code and paste it into your Blogger editor.

That's all!