How to Serve Images in WebP Format in Blogger

53 Comments / 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. Mohd Imran

      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.

      Reply
    1. Mohd Imran

      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.

      Reply
    1. Mohd Imran

      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.

      Reply
    1. Mohd Imran

      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.

      Reply
    1. Mohd Imran

      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.

      Reply
    1. Mohd Imran

      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.

      Reply
  7. sofanmax

    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.

    Reply
    1. Mohd Imran

      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

      Reply
  9. Arjun

    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

    Reply
    1. Mohd Imran

      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.

      Reply
  12. tarun patel

    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

    Reply
  17. Andy

    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.

    Reply
    1. Mohd Imran

      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.

      Reply
  20. Kevin

    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.

    Reply
  26. Jani

    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

    Reply
  27. Tamil

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

    Reply
  29. or ps4 games

    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!

    Reply
  31. Odell

    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?

    Reply
    1. Mohd Imran

      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.

      Reply
  34. Andreas

    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!

    Reply
  35. Zhang Wuji

    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?

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

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

Subscribe to Our Newsletter

Want to join our community, subscribe to the email newsletter simply by entering your email and hit ‘subscribe’ to receive the latest news, tips, and promotions. We too hate spamming….