When I analyzed one of my website in Google page speed tool, I saw an opportunity of increasing speed of my website. That was “Serve Images In Next-gen Formats”. For making your blogger’s speed fast you should serve images in next-gen Format. Perhaps you can use WebP format of images. In this article I will tell you, How to Serve Images in WebP Format in Blogger.
If you will test your website in Google page speed tool, surely you also will get this opportunity.
Check your website here.
In this article I will show you that how to serve images in Next-gen format in Blogger, what is WebP Format of images, what are the advantages of using these images, etc.
WHAT IS WEBP IMAGE
WebP is an image format provided by Google. It has file extension as, .WebP.
Firstly released in 2010, WebP has a capacity to use both lossy and lossless image compression in order to create images that are smaller and richer without decreasing the loading speed of website.
According to google.
By using the webp image format, you can get lossless images that are 25% smaller in size when compared to the png image format, and 25%-34% smaller in size than jpeg images.
Click here for more information about WebP images.
ADVANTAGES OF USING WEBP IMAGE FORMATS
- WebP is an emerging image format technology provided by Google.
- It’s is designed to use a better optimized compression then JPG and PNG.
- It can reduce file size with minimal quality loss.
- Using WebP image format you can make a fast loading website, which consumes less bandwidth.
ADVANTAGES OF WEBP IMAGES IN GOOGLE SEARCH
If you will use WebP images in your website it will increases your website’s speed. It means your site’s visitors are happy. It will make google happy. Obviously it can increase your website’s rank in Google Search.
HOW TO SERVE IMAGES IN WEBP FORMAT IN BLOGGER
In Blogger you can’t upload a WebP image directly. I have tried it personally. It will show an error like this.👇
So in order to serve WebP images in Blogger we have to use JPG and JPEG formats of images and changed into WebP format inside the post only.
Steps for doing this are as follows.
1. Select your post and click on edit.
2. Set your images on its original size.
Note. If you haven’t upload any picture in that post, first you upload an image in JPG or JPEG format in original size.
3. Go to the HTML side of your post.
Note. Always set image on its original size before making changes on HTML side and always put first image of your post in square size.
4. Now find the image code like this.
<div class="separator" style="clear: both; text-align: center;"> <a href="https://1.bp.blogspot.com/-Sm2FGCP6Sac/XlOQbfa5kII/AAAAAAAAAlk/jstUG2ng7n4hPyMYK1N7WJ0OBUk3Pa2cQCPcBGAYYCw/s1600/IMG_20200221_163235.webp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How serve images in webP format in blogger." border="0" data-original-height="544" data-original-width="720" src="https://1.bp.blogspot.com/-Sm2FGCP6Sac/XlOQbfa5kII/AAAAAAAAAlk/jstUG2ng7n4hPyMYK1N7WJ0OBUk3Pa2cQCPcBGAYYCw/s1600/IMG_20200221_163235.webp" title="How to serve images in next-gen Format in blogger." /></a></div> <br /></div>
After “s1600” just write “-rw” on both the places. Now see the updated code, changes are shown in red color.
Note. Some time on the place of “s1600” you may see other codes like, “s200”, “s320”, “s400”, “s640” etc. But don’t worry about this. You jus have to write “-rw” after any code.
Update your post and check it in Google page speed tool.
Here is an alternative method to check whether you images are in WebP format or not. Go to your post and save your post’s image in your computer, you will see that image is saved in WebP format.
Sometimes you may not found the above codes in your blogger post. In some of the blogger themes your image codes may differ from the above codes.
You may found these image codes in place of above codes.
<div class="separator" style="clear: both; text-align: center;"> <img alt="" class=" lazyloaded" data-src="https://1.bp.blogspot.com/-V4z4mzmR8TA/XtC1QqLbpLI/AAAAAAAAAIU/DVpPpIjDQkcyHAZGyzphDAS4bqTAtkE_wCK4BGAsYHg/w42-h280-p-k-no-nu/Borderlands%2BThe%2BHandsome%2BCollection%2BSedang%2BGratis%2Bdi%2BEpic%2BGames%252C%2BBegini%2BCara%2BMendapatkannya.png" src="https://1.bp.blogspot.com/-V4z4mzmR8TA/XtC1QqLbpLI/AAAAAAAAAIU/DVpPpIjDQkcyHAZGyzphDAS4bqTAtkE_wCK4BGAsYHg/w420-h280-p-k-no-nu/Borderlands%2BThe%2BHandsome%2BCollection%2BSedang%2BGratis%2Bdi%2BEpic%2BGames%252C%2BBegini%2BCara%2BMendapatkannya.png" title="" /></div>
Method to solve this problem
Don’t worry as the method is same for these codes also. Just we have to change the location of “-rw” in these codes.
Write “-rw” after “w420” on both places. Now see the updated code.
Check your images whether they are in WebP format or not by saving them in your PC or by Google page speed tool.
Isn’t it easy is it?😁😁
If you are facing some problems regarding this issue, please ask me by comment box. I’ll be very happy to reply.
If you found that this article is really helpful, please give some positive appreciation and share.
You can also tweet your problem on Twitter and tag us. We will help you personally and will embed your tweet here below the article. Our Twitter handle is @realtechandbio.
You may also like.