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

Originally published at: http://www.sitepoint.com/webp-image-format/

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.

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.

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.

Continue reading this article on SitePoint

Also, ew need to select Drop Shadow to create a subtle shadow effect and I save it in PNG format.

Small typo otherwise pretty nice

Great post! WebP about 4.5 years old and still has low adoption. If WebP accounts for all the “other” images as measured by the HTTP archive, its adoption is only at 2%. And this isn’t a problem exclusive to image formats. SPDY is about 5.5 years old and its adoption is at ~1%. This is despite over 50% of web servers and web browsers supporting SPDY natively. On top of that, there is also more to deploying these technologies than mere software support. WebP has caused serious problems with caching due to content negotiation in the past. Facebook experienced lots of complaints when it turned on WebP in 2013, even when the browsers, network infrastructure, and servers all functioned perfected. Hopefully this format continues to improve.

I must admit, this format is a new one on me. But I do think the web needs another image format that uses lossy compression and supports alpha.
PNG is a great format for the web, but not is all cases. On images with a lot of flat colour, like logos, graphics, charts, cell-shaded cartoons, png offers very efficient compression, with the flawless quality of being lossless and the added bonus of an alpha channel. That makes it good for things like logos and icons. Though svg is rightly taking over in these cases.
But where png falls down is images with more detail and variation in colour and tone, such as photos, paintings, CGI renders, etc… The lossless compression is less efficient then. Of course we normally just use a good old jpeg for photos and suchlike, but when you want alpha on one of these type of images, jpeg is not an option, and the png can end up with a file larger than we would like on the web.
For this reason I would welcome a new format that offers jpeg-like lossy compression and alpha at the same time. I’ve not tried webP yet to see how it performs, so can’t say if it’s what I’m looking for. But the big thing putting me off is the lack of support in browsers. It looks like a no-go in IE, Firefox and Safari, which is a shame.

Very nice and informative! I learned from this guide: http://www.paintshoppro.com/en/pages/webp-file/ the definition of WEBP format and the usage, but I was very interested to read more, and I found your article very informative and helpful. Nice work! :slight_smile: