WebP: New Format for Web Images

, WebP

WebP: New Format for Web Images

What is WebP?

WebP is a new open source image format developed by Google for the web.  This format provides lossless and lossy compression for images on the web using predictive coding. Google started to develop WebP on 2010. WebP is also used on Google Play Store and Youtube.

WebP reduces image sizes without sacrificing quality, thus saves storage space. This helps to load pictures faster and improves SEO performance.

Why Should You Use WebP?

First of all, WebP is more advantageous than other formats. For example, you can transform any other formats to WebP. Also, file sizes are smaller in WebP than any other format. Files compressed with lossless compression are 26% smaller than PNG files.

Additionally, WebP helps to maintain quality of images. WebP is a faster-loading image format, which saves up to 40% of the file size by deleting unimportant details of the image.

Shortly, WebP could be a good choice for your website.


How to Use WebP?

WebP files can be used on websites with img tags as found on other formats. These files appear corrupted in browsers that do not support WebP format. However, to view these files on your computer, you need a decoder and encoder.

Although WebP files can not viewed directly, the files can be viewed easily in web browsers such as Firefox, Chrome, Opera and Edge. The files are also supported in many tools and software libraries. Considering images, Adobe Photoshop has released plugins to recognize WebP files.

You can convert your images to WebP format using various online tools, command line tools, node tools or sketch.

Examples for online tools;


Most popular command line tool is;


Lossly WebP

Predictive coding is used for lossly WebP compression to encode an image.

Predictive coding basically uses neighbors pixels values and encodes only the difference. This method is also used by the VP8 video codec to compress keyframes in videos.

Lossless Webp

Lossless compression converts images using different methods.

  • Predictor Transform: In this transformation method, the pixel values are estimated from the decoded pixels.
  • Color (de-corrolation) Transform: Decorates the R-G-B values of pixels.
  • Subtract Green Transform: Subtracts the green values of the pixels from the red and blue values.
  • Color Indexing (palettes) Transform: Controls the ARGB value within the image and creates an array of these values. If this value is below the threshold, the pixels are replaced with this array.

Lossly Webp with Alpha

WebP alpha encodes low-bit images for each pixel.

For more information about compression methods;


use image4io to optimize your websites' images.