webP - a new image format for web

Last update on August 19 2022 21:51:32 (UTC/GMT +8 hours)

What is webP?

This document discuses webP, a new image format which can reduce the image size up to 28% and 35% respectively when compared to a PNG and JPEG image.

It is pronounced as 'weppy'. It is developed by Google and open sourced under BSD License.

webP provides lossless and lossy compression for images on the web. Lossy is a data encoding method for compressing data by discarding (losing) some of it.

webP uses VP8 video codec which is used to compress keyframes in videos.

Support

As of this writing, webP is supported by Google Chrome, Internet Explorer with Google Chrome Frame, Opera 11.10 and Android Ice Cream Sandwich.

Covert JPEG and PNG to webP

With a open source converter tool, you can convert a JPEG or PNG image to webP.

Download the converter

You can download the converter tool from http://code.google.com/speed/webp/download.html. When you arrive at this page, please select the appropriate OS. The converter tool is available for Linux, Windows and Mac OS X. We will see how can we use the tool to convert a JPEG image to webP in Windows 7.

Install and convert in Windows 7

After you downloaded the converter, unzip the file. And then run the following command from command line.

cwebp demo.jpeg -o demo.webp

Where demo.jpeg is the image before conversion, demo.webp is the image after conversion.

Our demo image demo.jpeg is of 172kb.

Let's execute the command to convert.

Now let's check the file size.

File size is reduced to 149 kb approximately, which almost 14% of the original image.

Using webP files

Following code is of an HTML page contains our webP image file.

<!DOCTYPE html>
<html lang="en">
<head>
<title>An example of displaying webP image file</title> 
</head>
<body>
<p><img src="dmeo.webp" /></p></p>
</body>
</html>

Convert tp other image formats from webP

To convert a webP image back to PNG or JPEG, run the following command

dwebp demo.webp -o demo.png

Where demo.webp is the webp image and demo.png is required image.

Previous: Monitor network activity with Firebug
Next: Some useful web development tools