Explanation of the use of webp images , as Google has been developing a new image format called webp for several years, and the goal is to compress images to speed up blogger , which is to reduce image file sizes without compromising quality, which makes file sizes with images on the web much smaller than JPEG or PNG .
%20(1).jpg "Explain the use of images in webp format in blogger to increase the speed of the blog")
This method of dealing with images speeds up the Blogger blog to the highest degree , and this leads to improving the ranking of your blog in search engines, as well as a good impression for the visitor about the speed of browsing your Blogger blog .
The webp format when you use it in your blogger blog reduces the image file size from 19 to 64% and more than the original image size, and this leads to making your blogger blog or any other website that uses it to load its pages faster and consume less resources from the server if you are on a private hosting, Because of this, a lot of the big sites are using the webp format , as a fast loading site equals a better user experience and is rated faster by search engines and therefore has a strong chance of going higher as long as it maintains strong and fresh content.
What is the ideal length for an article to rank well in search engines? | seo
1- Explaining the use of webp images in blogger to increase the speed of the blog, and procedures to be taken before using images in webp format in blogger
First, before using this type of image, it is necessary to follow steps on the image to be used by Photoshop, or through large image compression sites to reach the ideal size of the image, for use in your blog. As for the designers, it is preferable to keep the original size of the image so as not to lose its quality.
1- If you used Photoshop, save the image after working on it by following the following steps:
Explain the use of images in WebP format in Blogger to increase the capacity of the blog
then
Explain the use of images in WebP format in Blogger to increase the capacity of the blog
With these steps, you have saved the image in the appropriate size, which you specified, and you can modify the image sizes in the second step as in the image, as well as save it with maximum pressure via Photoshop.
2- The next step is how to convert the image from the file extension to your device, let it be png or jpg …. etc., to the extension subject of the explanation, which is webp .
It is preferable to use the squoosh.app site, and I have already explained it here:
How to compress images with Google Squoosh The free Google tool
through this site uploads the image, whatever its extension, and saves it in webp format after completing its format and you will see the difference in the size of the image.
Explain the use of images in WebP format in Blogger to increase the capacity of the blog
Explain the use of images in webp format in blogger
First of all, your blog template must be responsive to all desktop or mobile devices, and to use images in the maximum size and size, and to make sure of that, you should search for the following code in your blog template:
.post-body img{width:auto;max-width:100%;height:auto}
or in another way
.post-body img{width:auto;height:auto;display:inline;max-width:100%}
If the code exists, move to the second stage, and in case otherwise, add any of these previous codes inside the Css files of your blog template… See the following image.
Explain the use of images in WebP format in Blogger to increase the capacity of the blog
Then save the template.
Images uploaded to the blog in any format, let it be a png format , the link to it is as follows:-
In the case of using the blog in webp format , it will be converted to the following form by adding -rw as in the following code:-
In order to put the image with the same extension in the participation, the following steps are taken:-
Locate the image and go to put the HTML in the article in the blog.
Put the following code in the place of the image in the article, and change the links in the code to the link to the image you uploaded to your blog, replacing the image link by modifying it with the codes in yellow.
– Alt Text!Put a description of the image in its place, and let the article title.
– The sizes in the code put them or replace them with the sizes of the image in the original size. Try to unify a fixed size for the images in your blog, for example, 800×600, or keep them as in the code if they are basically the same sizes, or modify the sizes in the code with the same image sizes when saving them in order to preserve the original image shape.
What matters to us in the end is to reach the smallest image size uploaded on your blog with the highest possible quality.
Then this is how you complete your article, and whenever you need to put an image, upload it to the blog, which is in a webp format, and extract its link after converting it to the original size, then use the code and change what is required, and so on.
Can I convert images from webp format to other formats
Yes, you can do that easily through the Google Chrome browser through a wonderful add-on, which is Save image as Type , you can download it and use it to save the image in any format you want.
Also, through websites that work online and offer a service of converting images and saving them in any format you want.
I hope that I have succeeded in explaining the use of images in webp format, and I will try to add everything new on this topic.
Web format I think you have realized the extent of its importance and role in the site.