Webp in blogger

How to Serve Images in WebP Format in Blogger

Blogger Page Speed

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.

Webp 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

  1. WebP is an emerging image format technology provided by Google.
  2. It’s is designed to use a better optimized compression then JPG and PNG.
  3. It can reduce file size with minimal quality loss.
  4. 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.👇

 Serve Images in WebP Format in Blogger

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.                             

 Serve Images in WebP Format in Blogger

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.


<div class=”separator” style=”clear: both; text-align: center;”>
<a href=”https://1.bp.blogspot.com/-Sm2FGCP6Sac/XlOQbfa5kII/AAAAAAAAAlk/jstUG2ng7n4hPyMYK1N7WJ0OBUk3Pa2cQCPcBGAYYCw/s1600-rw/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-rw/IMG_20200221_163235.webp” title=”How to serve images in next-gen Format in blogger.” /></a></div>
<br /></div>

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.

MISCLENEOUS WORK

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.


<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/w420-rw-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-rw-h280-p-k-no-nu/Borderlands%2BThe%2BHandsome%2BCollection%2BSedang%2BGratis%2Bdi%2BEpic%2BGames%252C%2BBegini%2BCara%2BMendapatkannya.png” title=”” /></div>

Check your images whether they are in WebP format or not by saving them in your PC or by Google page speed tool.

That’s it.


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.

Ensure Text Remain Visible During Webfont Load In Blogger.

How To Eliminate Render-Blocking Resources In Blogger.

53 thoughts on “How to Serve Images in WebP Format in Blogger

    1. Welcome Tanvir Alam, I am happy that the article prove to be useful for you. You have inspired me to share more useful content by providing your positive review. I will continue to give authoritative information.

  1. i have problem with my image. my image dont have code s1600, how to solve this ?

    1. Hi Azhar Rafiqi, I have analyzed your website in page speed tool and one of your image code is as follows.

      img alt=”Borderlands:
      The Handsome Collection
      Sedang Gratis di
      Epic Games, Begini
      Cara Mendapatkannya
      ” class=” lazyloaded”
      data-src=”https://1.bp.
      blogspot.com/-V4z4mzmR8TA
      /XtC1QqLbpLI/AAAAAAAAAIU
      /DVpPpIjDQkcyHAZGyzphDA
      S4bqTAtkE_wCK4BGAsYHg
      /w420-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
      /DVpPpIjDQkcyHAZGyzphDAS4b
      qTAtkE_wCK4BGAsYHg
      /w420-h280-p-k-no-nu
      /Borderlands%2BThe%
      2BHandsome%2BCollection%
      2BSedang%2BGratis%2Bdi%
      2BEpic%2BGames%252C
      %2BBegini%2BCara%
      2BMendapatkannya.png”
      title=”Borderlands:
      The Handsome Collection
      Sedang Gratis di Epic
      Games, Begini Cara
      Mendapatkannya”>

      Don’t worry just you have to write “-rw” after “w420″ on both places.

      Now see your updated codes.

      img alt=”Borderlands:
      The Handsome Collection
      Sedang Gratis di
      Epic Games, Begini
      Cara Mendapatkannya
      ” class=” lazyloaded”
      data-src=”https://1.bp.
      blogspot.com/-V4z4mzmR8TA
      /XtC1QqLbpLI/AAAAAAAAAIU
      /DVpPpIjDQkcyHAZGyzphDA
      S4bqTAtkE_wCK4BGAsYHg
      /w420-rw-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
      /DVpPpIjDQkcyHAZGyzphDAS4b
      qTAtkE_wCK4BGAsYHg
      /w420-rw-h280-p-k-no-nu
      /Borderlands%2BThe%
      2BHandsome%2BCollection%
      2BSedang%2BGratis%2Bdi%
      2BEpic%2BGames%252C
      %2BBegini%2BCara%
      2BMendapatkannya.png”
      title=”Borderlands:
      The Handsome Collection
      Sedang Gratis di Epic
      Games, Begini Cara
      Mendapatkannya”>

      After this check your images by saving your images in your PC. They will saved in WebP format.

      Let me know whether your problem is solved or not.

    1. Hi, Yassin thanks for reaching to me. Sorry for late reply. Can you please share your image codes so that I could give you the solution.

  2. This is not cool; because this is not possible to all previous posting image edit. pls share another easy trick

    1. Hi Rashmi, Thanks for suggestion. But currently I don’t any such trick which can manage your all images in one time. When you update a post you can apply this trick individually.

  3. This is so cool. Wow it really works! Tanks for the tip. It saves so much space now. So I use s680 in my images all I do is edit HTML of the posts and add s680-rw and it works. I downloaded both images to compare and there is a 70% reduction in images
    See here: https://www.yourfitnessrink.com/

    1. Hello blogger, by telling others that how you are using images in WebP format . It shows that you are a passionate blogger and really want to do something different on the web. Make you website more fast by reading other articles. I have personally checked your website, it’s good and well maintained.

    1. Thanks Sonali, it’s nice to listen that our work is helping our visitors. We are keen to provide our users a good and knowledgeable information. Keep in touch with us for more informative articles.

  4. Thank you, just what I was looking for! I hope blogger will fix this soon and letting us upload webp directly. Everyone should tweet #gHelp so that Blogger team can address this issue.

    1. Thanks Zain, it’s good to know that it worked for you. Make your website more fast by removing render-blocking resources. You can do this by clicking here

  5. Good trick. But will this work on all browsers ? As I have found out that webP does not work on all web browsers. Please let me know if its supported

    Thanks

    1. All major browsers supports WebP format. Some browser do not support WebP but these browsers will support WebP format because WebP is an emerging format of images.

    1. I’m happy to know that your problem is solved. Keep in touch with for more blogger related Posts.

  6. Finally. You solve my all problem bro really I can’t explain… just love you alottt. may God bless you, u deserve all my respect, thanks a lot once again, plz make a video on how to rank on google news publisher using blogger blog

  7. Great Content Bro,
    Thanks For The content. You are trying to do some best of peoples. I will share the contents with my friends. Once again thank you so much.
    TechnoEN

  8. https://waterfallmagazine.com
    I constantly spent my half an hour to read this web site’s
    content daily along with a cup of coffee.

  9. i didnt found any difficulty in uploading Webp file in blogger. it directly uploads in one single click

  10. It would be nice if this could be made directly from the blogspot theme codes.
    For example, we know that expr:src=’data:post.thumbnail’ displays the thumbnail as png/jpg in the popular posts widget. What would be the code to display it as webp?! If it exists, of course.

    1. Currently we don’t have such way to automate this process, however we are working on this. When we got any method we will update you. Keep in touch with us.

  11. Awesome! I would also like to share that this trick can be used in google photos URL.
    I have a public photo album I use for image hosting. By right-clicking on any image in a public google photos album, you can retrieve the URL. Add the same characters mentioned in this article before “-no” and you can achieve the same results. Example below. Thank you for this tip!

    https://lh3.googleusercontent.com/pw/ACtC-3eKIrd7yj542N2JQbfTWh73Tv8NEq4dvr2KTEv_akRuYrAazSPnVUFW6hKrXRoH0rkpJlPM24GxgWbw1GJ3-rnwR3aeWW0Ff0CeVq6wKY1Ou8nK32RjdVteVx_zUTJJxyHQidvibUNmrOHD5acafSry=s621-rw-no?authuser=0

    I notice you have a class in the code referenced in this article set as “lazyloded”

    Do you have a tutorial for lazy loading images? My posts typically have 50 or more photos. I need to lazy load to improve my page speed.

  12. how to cite websites in essay https://essaygets.com/ – tips on writing essays
    how to write effective essay
    how long is 1000 word essay how to write a good expository essay best term paper sites

  13. Hi. Do you knows some way to add -rw to the generated thumbnails for the mobile version? – data:post.thumbnailUrl

  14. I read this post completely regarding the difference of most up-to-date and previous technologies, it’s awesome article.

  15. Excellent beat ! I would like to apprentice while
    you amend your site, how could i subscribe for a blog site?
    The account aided me a acceptable deal. I had been a little bit
    acquainted of this your broadcast provided bright clear concept

  16. is there is a way to automatically convert blogger image in to WebP format | resizeImage(data:blog.postImageUrl, 600, "600:315") |

  17. Thanks for your personal marvelous posting! I actually enjoyed reading it,
    you can be a great author.I will make sure to bookmark your blog and will
    come back from now on. I want to encourage yourself to continue your great posts, have a nice day!

  18. Thanks for the auspicious writeup. It actually used to
    be a amusement account it. Look advanced to more brought agreeable
    from you! However, how can we keep in touch?

    1. Hi Odell,
      Thanks for the showing love to our post.
      you can subscribe to our newsletter by submitting your email address or you can subscribe to our web push notification.

  19. Right here is the right site for anyone who wants to find out about this topic.

    You realize so much its almost hard to argue with you
    (not that I personally would want to…HaHa). You definitely put a
    fresh spin on a subject that’s been discussed for years.
    Great stuff, just wonderful!

  20. Thanks dude for the trick,
    i dont understand why Google doesnt make it default (automatically convert to webp) for blogger.
    i mean all of them are their own products right?

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.