What is WebP and how to use it in wordpress? We are surrounded by images. Every day we make, save, and send photographs, and surely you have wondered more than once about the difference between the different types of formats.
In this post we review the basic concepts of the usual formats and we know in detail the new WebP format , along with the advantages it has over its competitors.
If you are one of those who work a lot with images or simply want to learn about this new format developed by Google , keep reading!
You might be interested in Learn Web Development in 2021
What is WebP and what is it for?
WebP is a new image compression format that is causing a sensation, especially among web developers
This format began to be developed by On2 Technologies and that Google acquired in 2010 and began testing in Chrome.
Therefore, you can imagine that it is the recommended format for website development (it is recommended by their PageSpeed ??Insights web optimization tool).
WebP is open source , so it can be used by everyone, and it manages to reduce the weight of the image by more than 30% compared to the same image in other formats such as PNG or JPEG without losing quality.
One of its strengths is that it supports both lossy and lossless compression , and is a derivative of the VP8 video standard.
In short, this format developed by Google manages to reduce the loading time of images on the Internet and reduce their size .
That is why we saw before that it is the recommended format for images on web pages, because when you browse with your mobile it produces great savings in bandwidth and loads the web faster.
But this does not stop here. The WebP format is also intended to compete against the GIF format for animations , combining the high compression we were talking about with the eight Bit alpha channel and 24 Bit color depth.
What is “lossy ” compression ?
Normally, digital information has to be 100% accurate for it to work. In a Word document, it would be enough to manipulate a single bit to change the original content of the document or even to make the file unusable.
However, there is certain information that can be deeply manipulated and that does not change in the eyes of the user. This happens in practice, especially with audio , digital images and video .
Images, for example, often contain many areas with color casts so subtle that they cannot be distinguished by a human . By bringing these areas together into a single larger area with a single color, we have simplified the image and reduced the information needed to represent it.
It is important to be clear that compression and loss are two totally independent things :
- The introduction of losses simplifies and reduces the information itself, the information changes. We can be more “gross” by simplifying the information or more subtle. The more losses, the less information, but there is a ceiling when too much loss is noticed.
- In compression, an algorithm detects redundancies in the representation of information and removes them. But the information represented is exactly the same, the way of describing it is simply made more efficient.
In audio, video and static images there is usually a very high level of redundancy, that is why great results are achieved by compressing this information, but, in addition, they tolerate losses very well and, if we do not go too far, we can reduce even more by applying losses.
Of course, when you go too far with losses, very unpleasant results will occur: audio that you perceive to be of poor quality, like that of an old phone, pixelated images or images with strange “artifacts” , etc.
For this reason, you can always compress to the maximum, but when applying losses you have to be careful because at some point we can seriously affect the perceived quality of the result.
The WebP format losslessly compresses images by 15% to 26% more compared to PNG, while lossy reduces image file sizes by 25% to 34%, with the same quality as JPEG.
What differences does it have with GIF, JPG and PNG?
In the GIF format , images are compressed without loss of quality , but you have a limited palette of 256 colors . It is used in graphics with few colors and especially in image sequences , the use by which this format is usually known.
The JPG format is the standard format for photographs, since it reproduces colors and images with shadows very well . It admits different levels of compression , in which the smaller the space, the faster the load.
This format is the most used on the Internet because, as we have just seen, we can save a lot of space thanks to its lossy compression function . We are losing details of the photograph, but in return we save loading time.
The PNG format has two versions: 8 Bit and 24 Bit . The first is very similar to the GIF format , and the second reproduces the colors in the same way as the JPG . PNG compresses losslessly , and is mainly used when we have no problem having a very large file , logos or images with transparency .
Finally, the WebP format competes directly with JPG, since, as we have seen, the latter is the most used for Internet images, and Google has developed the WebP format to optimize this process.
Thanks to the lossless compression capacity of WebP , we can upload images to the Internet, but without loss of quality, in addition to doing so with the space savings that the lossy compression of the JPG format entailed.
If we compare GIF with WebP, this one comes out better again, since it increases compression without losing quality, but with the disadvantage that being a relatively new format, not all browsers will support this format.
How to download and save a WebP image
There are several methods to save an image from the Internet in WebP format , but the easiest of all is to activate the “ Save image as Type ” Chrome extension.
To activate it, go to the Save image as Type page and click “ Add to Chrome ”.
Confirm the action by clicking “Add extension”.
Now go to the image you want to download in WebP format and click the right button of your mouse.
You see that a new “Save as type” option appears , and in turn a drop-down menu from which you can select the format in which you want to download the image.
How to convert or pass a WebP image to JPEG or PNG
As in the previous case, there are several methods to save a WebP image in other formats, such as JPEG or PNG.
We are going to see two: with an online tool (there are several) and from your PC
How to convert image formats online
The online converter that I am going to recommend here is Convertio, but there are many and I encourage you to try others.
From its website you can select the image or images that you want to convert into JPEG and click on the button with the shape of a folder and a magnifying glass.
Select the files and click “Open” .
Notice that right next to it you can select the formats you want for your images.
Once you have selected the images you will see this new screen. If everything is correct, click on “Convert” and the website will start converting. When the process is finished, click on “Download”.
How to convert image formats on your local computer
If you prefer to convert images locally and not through Internet pages, the best option is through the Pain.Net program.
This software is an exclusive image editor for Windows, so if you have another operating system you won’t be able to do it.
The only disadvantage of this method is that you have to convert the images one at a time, but if there are not many you will not have a problem.
Once you’ve downloaded it (which you can do from this page ), open the program. You will see a screen like this:
Now , copy the image you want to convert to WebP format and paste it. You can do it in an easy way by copying the image with your keyboard, pressing the Ctrl + C buttons, and pasting it into Pain.net using Ctrl + V.
Once you have it copied, click on the option on the top bar, where it says “ File ” and select the “ Save ” option. You can also save the image using Ctrl + S.
Now, you will see the typical window to save a document.
Choose the path where you want to save the image, the name, and most importantly, in the lower format bar you must click on choose “ WebP ” in the drop-down menu.