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
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
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.
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!
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.
Finally we will use the online converter to convert the image to
.webp format and our sticker is ready!
You can make many other stickers in a similar fashion for distribution amongst your friends on Telegram.
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.
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.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
Learn PHP in One Day and Learn It Well