A Look Into: WebP – New Image Format for Web

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.

Recommended Reading: JPEG Optimization For The Web â€" Ultimate Guide

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.

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