What is the WebP Image Format (And Why Does It Matter)?

Share this article

The WebP format is a new image format from Google which employs both lossy (a trade-off between quality and size) as well as lossless (reduction in size with no compromise in quality) compression techniques.

Google is developing both the format and WebP related software under the BSD license. It was initially released on 30 September 2010 and is an open format. It uses the file extension is .webp.

WebP: A new image format for the web

Basic Mechanism of WebP Compression

The lossy WebP algorithm uses predictive encoding to predict the values of colors of it’s neighboring pixels. It then only encodes the difference between the actual values and predictions. Out of these encoded or residual values, many are null or zero and this phenomenon contributes in further decreasing the size of the WebP image.

Hence, the WEBP lossy compression — like JPEG — is based on block prediction.

Support and Usage

Google Chrome and Opera both natively support WebP. Amongst graphics softwares, Picasa, PhotoLine, Pixelmator, ImageMagick, Konvertor, XnView, IrfanView and GDAL all natively support WebP.

Facebook has begun using WebP to lower its network costs and speed up its web site. Even relatively small efficiency wins start to add up at Facebook’s scale. When people upload JPEG/JPG images, Facebook automatically makes copies in WebP format. They’ve now apparently begun delivering those images to people using Chrome and Opera.

Telegram too has started using WebP for it’s popular stickers. The Instant Previews feature of Google Search uses WebP internally to reduce disk space used by previews.

The major problems arise when a person wants to view the image in software other than a web browser or make edits to it as majority of the most popular graphics applications — including Window’s or OS X’s image viewer and Photoshop — can’t natively handle WebP.

In October 2013, Josh Aas from Mozilla Research published a comprehensive study of current lossy encoding techniques and wasn’t able to conclude that WebP outperformed JPEG by any significant margin.

However, Telegraphics has released a free plug-in that enables WebP support in Adobe Photoshop, GIMP and Paint.NET support WebP via plugins. Google has also released a plug-in for Windows that enables WebP support in Windows Photo Viewer, Microsoft Office 2010 and any other application that makes use of Windows Imaging Component.

Benefits and Statistics

Google’s WebP documentation claims:

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index. WebP supports lossless transparency (also known as alpha channel) with just 22% additional bytes. Transparency is also supported with lossy compression and typically provides 3x smaller file sizes compared to PNG when lossy compression is acceptable for the red/green/blue color channels.

Conversion to WebP

WebP’s documentation provides access to a pre-compiled software for converting PNG and JPEG images to a WebP image. You can read more about it and download it from here. Here is the link to an online converter which accomplishes the task without downloading any software.

Making WebP Stickers For Telegram

We have talk about WebP enough. Let’s bring our knowledge of WebP to some constructive and creative use. We will look at how to make stickers for Telegram from a JPEG image and convert it to a .webp file. We’re going to make our sticker from the following image.

Original JPEG Image

We would be making use of Photoshop to make the image background transparent. We would do that by choosing ‘Background Eraser Tool’. We would also crop the image since it is quite big!

Cropped and Transparent Image

Next we will select the current layer and apply Blending Options (stroke) on it and select white color. Also, ew need to select Drop Shadow to create a subtle shadow effect and I save it in PNG format.

Stroked with White Outline and Drop Shadow

Finally we will use the online converter to convert the image to .webp format and our sticker is ready!

Sticker in Telegram

You can make many other stickers in a similar fashion for distribution amongst your friends on Telegram.

Conclusion

WebP is an emerging image compression format and being backed by Google, Facebook, Opera and Telegram has certainly boosted its popularity. It’s a format that already has a healthy collection of fans along with as detractors.

However, being able to pack the goodness of GIF and PNG into one format with a reduced image size will continue to tempt web developers to create smaller and richer images.

And if that helps make the whole web faster, we all win.

Frequently Asked Questions about WebP Image Format

What are the main advantages of using WebP image format over other formats like JPEG or PNG?

WebP image format offers several advantages over traditional formats like JPEG or PNG. Firstly, WebP images have a smaller file size, which can significantly reduce the loading time of web pages, improving user experience and SEO ranking. Secondly, WebP supports both lossy and lossless compression, allowing for a balance between image quality and file size. Lastly, WebP also supports transparency, like PNG, and animation, like GIF, making it a versatile choice for various types of images.

How can I convert my images to WebP format?

There are several ways to convert images to WebP format. One of the most common methods is using online conversion tools. These tools allow you to upload your image and convert it to WebP format with just a few clicks. Alternatively, you can use image editing software like Adobe Photoshop or GIMP, which support WebP format.

Are there any drawbacks to using WebP image format?

While WebP offers many advantages, it also has a few drawbacks. The main one is that not all browsers and platforms support WebP. For example, Safari only started supporting WebP from version 14. Therefore, if your audience uses a variety of browsers, you may need to provide fallback images in other formats.

How does WebP achieve smaller file sizes?

WebP uses advanced compression techniques to achieve smaller file sizes. For lossy compression, it uses predictive coding to encode the difference between neighboring pixels, which is more efficient. For lossless compression, it uses parts of the image that have already been analyzed to reconstruct new pixels. It also applies additional compression techniques such as entropy encoding to further reduce file size.

Can I use WebP images for print?

WebP is primarily designed for use on the web, where small file sizes are crucial. While you can technically use WebP images for print, other formats like TIFF or high-quality JPEG might be more suitable as they can offer higher resolution and quality.

Does WebP support animation?

Yes, WebP supports animation. You can create animated WebP images similar to animated GIFs, but with smaller file sizes and better quality. This makes WebP a great choice for creating animated images for the web.

How can I view WebP images?

You can view WebP images in most modern web browsers, including Google Chrome, Firefox, and Microsoft Edge. If you want to view WebP images outside of a browser, you can use image viewers or editors that support the format, such as IrfanView or GIMP.

Can I use WebP images in my email campaigns?

While WebP images can be used in email campaigns, it’s important to note that not all email clients support the format. Therefore, it’s recommended to use a fallback image in a more widely supported format, like JPEG or PNG, to ensure all recipients can view the image.

How does WebP compare to JPEG 2000 and JPEG XR?

WebP, JPEG 2000, and JPEG XR are all modern image formats that offer better compression and quality than traditional JPEG. However, WebP is generally considered to have the best balance of compression and quality, and it is more widely supported by browsers.

Is WebP suitable for all types of images?

WebP is a versatile image format that is suitable for a wide range of images. However, it excels in certain types of images. For example, it’s great for images with lots of colors and details, like photographs. For simple images with few colors, like logos or icons, other formats like PNG or SVG might be more suitable.

Tanay PantTanay Pant
View Author

Tanay Pant is an Indian author, hacker, developer and tech enthusiast. He is known for his work on Learning Firefox OS Application Development, which was published by Packt. He is also an official representative of Mozilla, and has been listed in the about:credits of the Firefox web browser. His personal website is tanaypant.com.

AlexWimage compressionimage formatswebp
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form