Converting your blogspot image (JPG, PNG, BMP, etc) to WebP format, proved to give a boost to speed performance to my websites. Plus, lazy loading that only load the images when it is on the user view point make page load time significantly reduced. I have tested it with Google PageSpeed Insight and GTmetrix!
Read this article How to Improve Website Speed Performance using WebP image format from Google to have a good understanding and comparison of this website before and after converting image to WebP format. That comparison doesn't include the lazy loading feature yet and website the speed performance already improved nicely.
If you are using bp.blogspot as your image source, you can try the Post Image to WebP Converter from this site. Just click the link or go to Others menu above and choose 'Convert Image to WebP'.
 |
| Open Post Image Converter to WebP |
How to use Blogspot Image to WebP Lazy Loading Converter
- Go to your Blogger post editor
- Copy all your post HTML source
 |
| Copy all your post HTML source |
- Go to Post Image to WebP Converter
- Paste the html source to 'Source' text area
- Check Lazy Loading and click Image button
 |
| Converting Post Image to WebP Format and add Lazy Loading tag |
- Next, copy all the output and paste it back to your Blogger post editor HTML source
 |
| Copy all the output and paste it back to your Blogger post editor HTML source |
ATTENTION DO IT ONLY IF YOU ALREADY DONE YOUR POST, DOING IT TWICE OR MORE (CONVERTING ALREADY CONVERTED SOURCE) WILL RUIN YOUR POST!!!
What Blogspot Image to WebP Lazy Loading Converter actually do?
Blogspot image hosting (bp.blogspot.com) also hosted the WebP format of your website images. To get the WebP image you just need to change the image url by finding dimension parameter and add
-rw to the end of it. For more explanation see the Youtube Video from this post.Another thing Blogspot Image to WebP Lazy Loading Converter doing is create a fallback image source for browser that not supported WebP image, see the list of WebP supported browser from this link.
If you checked the Lazy loading checklist button, the script will also add
loading=lazy parameter to your img tag. See this link for supported browser lazy loading attribute supported browser. This form will search for <img ...> tag from the source code and then add <picture> tag and loading=lazy parameter to it. See the example below:Example of image source:
<img border="0" data-original-height="559" data-original-width="831" height="430" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfT5d0eTFK7ZW6HL3sjPF1VH6koGyXv-peOqcfauopx2YHfzBv2v37XRqwQQ6YmPhWtTok42zGNxrOo4o-dJQDXQFHYvDnQuE0_2Az9cnbxXsfly0lhGK13_H44thVBdbIvWW-ELjr_Em-/w640-h430/Blogspot%2BImage%2Bto%2BWebP%2BLazy%2BLoading%2BConverter1-webp.jpg" width="640" />Converted version:
<picture>
<source type="image/webp" srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfT5d0eTFK7ZW6HL3sjPF1VH6koGyXv-peOqcfauopx2YHfzBv2v37XRqwQQ6YmPhWtTok42zGNxrOo4o-dJQDXQFHYvDnQuE0_2Az9cnbxXsfly0lhGK13_H44thVBdbIvWW-ELjr_Em-/w640-h430-rw/Blogspot%2BImage%2Bto%2BWebP%2BLazy%2BLoading%2BConverter1-webp.jpg" />
<img loading="lazy" border="0" data-original-height="559" data-original-width="831" height="430" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfT5d0eTFK7ZW6HL3sjPF1VH6koGyXv-peOqcfauopx2YHfzBv2v37XRqwQQ6YmPhWtTok42zGNxrOo4o-dJQDXQFHYvDnQuE0_2Az9cnbxXsfly0lhGK13_H44thVBdbIvWW-ELjr_Em-/w640-h430/Blogspot+Image+to+WebP+Lazy+Loading+Converter1-webp.jpg" width="640" />
</picture>
You can see the differences,
picture tag and source tag will be processed by supported browsers and img tag will be processed by non supported browsers. For loading=lazy, non supported browsers will ignore it.Watch this video below for step-by-step guide on using NetworkReverse Blogspot Image to WebP Lazy Loading Converter.
