Commonly, we use JPEG of PNG for images on the Web. These two image formats technically work just fine until the introduction of high-definition screens of mobile devices, which prompted web designers to reconsider the efficiency of these format usages for the Web.
In short, a high-definition screen requires twice the regular image resolution and size; otherwise, the image could be pixelated. There are, however, a few consequences regarding that matter: first, for users who have low Internet connection speed will need to wait for the website to load (really) slowly. The images will also take more space in web storage, which eventually will also consume much of the bandwidth.
Recently, Google proposed a solution: a new image format for Web called WebP. This format offers image clarity while maintaining a smaller size than that of JPEG and PNG. Let’s take a look at the WebP image format.
WebP Comparison
In this example, we compare an image by Rula Sibai in three different formats.
As you can see above, the images above look almost of the same quality, yet the size for the WebP format is the lowest of the three.
Furthermore, WebP supports Alpha channel that allows us to create transparency on the image, which is great for creating an image logo. Here is an example and the comparison.
WebP Tools
Unfortunately, many image editors – except Pixelmator – does not support WebP format at the moment. But, there are already a few tools that allow us to load, create, save and convert JPEG, PNG, and other image formats into WebP format.
WebP for Photoshop – This is a Photoshop plugin that allows you to load and save your image in WebP format.
Convert to WebP – This tool converts JPEG and PNG and other format into WebP.
WebP to Other Format – This tool changes WebP to other formats.
Gimp For WebP – A plugin for Gimp to support WebP format.
WebP Codec for Windows – Using this codec we can view WebP format in Windows natively.
Sadly WebP support is not widely supported by most browsers yet. Currently, it is only Opera and Chrome that support the WebP format natively, while Firefox is still considering it.
For full list of WebP browser support you can head over to the following page.
Final Thought
WebP seems to be a promising image format for Web in the future. Despite the lack of support, there are a few advantages on using WebP:
The image size is a lot smaller, We could save much storage space and bandwidth with smaller image sizes.
Since WebP size is smaller than JPEG and PNG as in our above test, the image will likely load faster.
WebP is a lossy image format like JPEG. But, unlike JPEG, WebP supports Alpha channel that allows creating transparency on the image. So, rather than using PNG and JPEG, we can simply use one format for our web images.
Further Reading
WebP, a new image for the web – Google Developer
WebP on Chromium – Chromium Blog
