WebP : an hybrid image format

, by

What about a unique image format for digital photography, web graphics, transparency and animations ?

That’s the mission of the WebP (pronounced “Weppy”) image format. Introduced by Google in 2010, it combines features of each JPG, PNG and GIF with the ambition of being lighter.

Google has recently switched to using WebP on the Chrome Web Store and has reported a reduction of 30% in the size of images across the site. Smaller files mean less bandwidth consumption and better user experience with faster delivery on your web sites and specially mobile apps.

Quick reminder about image formats

Developers use image files format depending of the image itself :

JPEG (Joint Photographic Experts Group) uses a lossy compression and supports up to 16.7 million colors.

PNG (Portable Network Graphics) created in 1995 as a response to some patent issues around the GIF format. It uses a lossless compression and supports transparency. PNG-8 is limited to 256 colors and PNG-24 and PNG-32 supports up to 16 million colors.

GIF, originally developed by CompuServe in 1987, was a very important standard in the early days of the web. It also uses a lossless compression, supports transparency, allows animation but is limited to 256 colors.

SVG is an XML-based vector (scalable) image format.

Which format to use ?

While JPEG is commonly used for digital photography, PNG and GIF are best suited for line art, text, web graphics, icons and logos.

Regarding transparency, PNG has recently dethroned GIF because it supports a much wider range of color depths and transparency options. Indeed GIF is either transparent or opaque. Personally, I stopped using GIF a while ago.

About SVG, I use it mainly for retina and sprite purposes and for those purposes it has replaced PNGs.

So until now, regarding the nature of the image, we have to choose between those four formats. This might change with WebP. The hybrid format combines transparency, animations and both lossless (PNG and GIF) and lossy compressions (JPEG).

Is it going to be heavy ?

Nope, the size is announced to be :

  • 26% smaller than a PNG
  • 25-34% small the a JPG

Let’s verify it with that RAW picture of Nagasaki’s street.

Nagasaki

Result :

Quality is almost the same (in a website context).

WebP features

  • Lossless and lossy image compression
  • Transparency (Alpha channel transparency)
  • Color profiles and Metadata
  • Animation

1. Lossless and lossy image compression

The WebP lossless encoding uses advanced techniques such as :

  • Predictor Transform
  • Color Transform
  • Subtract Green Transform
  • Color Indexing Transform
  • Color Cache Coding
  • LZ77 Backward Reference.


WebP’s lossy compression is based on the VP8, a video format initially used by the WebM, an audio-video format also developed by Google. The algorithm of the lossy compression supposes to provide 5% to 10% compression gains compared to the encoding used for JPEG (and MP3) (The Huffman encoding).

2. Transparency (Alpha channel transparency)

Until then only lowless compression format like PNG and GIF allows us to add transparency. With WebP, the Alpha channel can be also used with lossy RGB, a feature that’s currently not available with other format.

3. Color profiles and Metadata

WebP can embed ICC profile and have metadata stored in EXIF or XMP formats.

4. Animation

WebP supports 24-bit RGB color with an 8-bit alpha channel, compared to GIF’s 8-bit color and 1-bit alpha.

Plus WebP requires fewer bytes than GIF. Indeed animated GIFs converted to lossy WebPs are announced to be 64% smaller, while lossless WebPs could be 19% smaller. But WebP support is not as widespread as GIF support and at the moment.

How to create a WebP image ?

Photoshop : If you use photoshop, you can download this plugin

Google WebP Converter : If you’re familiar with command line, you can download the Precompiled WebP utilities and library for Linux, Windows and Mac OS X : https://developers.google.com/speed/webp/download

Browser support

We’re not there yet!

https://caniuse.com/#feat=webp