How to serve images in WebP format in blogger 2020

This result is after applying the steps below

How to serve images in WebP format in blogger 2020

When I wanted to test my site with the Google page speed insights tool I saw Serve images in next-gen formats. This is a great opportunity to speed up my site as it is pictured.

serve images in WebP

In this article, I'm going to take this opportunity and improve your site by optimizing next-gen photos on Blogger. We will explain the great features of the WebP format. Follow the lesson explanation.
Before anything, you should test your site with the Google page speed tool.

What is the WEBP image format?

WebP is an image format that has multiple compression properties and encrypts images, which results in faster loading of images into your site and not significantly consuming cellular data. It is also much better than JPEG and PNG format. You can also reduce the size of images from 25% to 35% if you apply the WebP format. Chrome and Opera are also supported for this format.

If you want to satisfy your desire to read about this wonderful format, you can visit its official website WEBP

Does WebP support my browser?

You can check that your browser supports the next-gen here:

1. WebP 
2. JPEG 2000 
3. JPEG XR

What are the advantages of using the WEBP format?

1. Significantly speeds up your site.
2. The WebP format was designed by Google.
3. It reduces the size of the image without losing quality.
4. Reduces the size of the data when loading the site, which leads to a faster speed for the site page.

How to use WebP images in Blogger?

1. Go to the post you want to edit the images in and click on Edit and then HTML Format.
2. You press CTRL + F from the keyboard and in the search box write BMP, JPEG, or PNG format.
3. You will find the link to the image of the article, follow the link until you get this code s1600.
4. Add this code -rw next to s1600-rw.
5. After adding this code to all links to images within the article, you can make a save to the article.
6. To ensure that you have taken the steps correctly, you can visit the Google page speed insights tool and test your site. Or you can open the article, click on the image, download it to the desktop, and search in the image settings. You will find the format in this format: Chrome HTML Document (.webp).

Practical example:

Code before modification

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7EZVluoxhYUlh5MU-R93GeHQICGA9lwDZQVcy4c2HGPzzxY68eumu9RKfr9FkMuKh0-d3jISxm4cREqDAFfSmKjvFNE1Q1twVRl_7DWzBYu7iTVn-2v22cXZpUh26UGL1DgOuW6qU6Kc/s1600/Nevada%2Bballot.jpg

Code after modification

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7EZVluoxhYUlh5MU-R93GeHQICGA9lwDZQVcy4c2HGPzzxY68eumu9RKfr9FkMuKh0-d3jISxm4cREqDAFfSmKjvFNE1Q1twVRl_7DWzBYu7iTVn-2v22cXZpUh26UGL1DgOuW6qU6Kc/s1600-rw/Nevada%2Bballot.jpg

Important note

When searching for the s1600 code inside the article, you can find it like this:
s640, s400, s320, or s200 no problem delete it and follow the previous steps. 

You can apply these steps to images that you did not find inside any article, by going to the Theme and then editing the HTML and then following the same steps above.

Thank you very much for reading this article. Please do not hesitate to write a comment if you want to inquire about the topic. I hope that you share the article with your friends so that everyone can benefit. Have a nice day