WebP Image Format

webplogoWebP image format is a new image format that does both lossless and lossy compression for the web. What does that mean?

Lossless compression is where the image is broken into smaller parts and thus faster to transfer over the web. On the browser the broken bits are joined thus not losing any parts.

Lossy compression on the other hand is where the unnecessary bits of images are discarded and is much faster than lossless compression but the image overall looks original on the browser.

So where does the WebP format comes into the picture?

WebP does both lossless and lossy compression but does the compression better than png or jpeg. The main premises behind the WebP is that, Google have seen a lot of images, now comes out with a new image format that will speed up the web by transferring all images faster since they are of less size than other formats. At the same time maintaining the quality in the images which makes this new image format a worthy try,

At this time, WebP file format can be opened by Windows Image Previewer, [image below]

Soon more editors will open it. My favorite image editor failed to open this file format.

webp-image-opened-in-windows-preview

You can download the WebP converter, and when done, can see the sample image, a 2500+ pixel wide image in both the jpeg and webp format. The jpeg file size is 972KB while the webp file size is only 280KB.

webp-jpeg

On the WebP page, it says that,

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.

Ok, let’s compare JPEG and WEBP at equal SSIM index like this experiment shown here. We are going to use the same sample image (the one used all over this article).

I have downloaded a python script from the same page linked above, (but I’ll link here) to calculate SSIM value and file size for both the sample images. (the same sample images are JPEG and WEBP)

For cjpeg and djpeg, I have downloaded already compiled binaries from here.

For cwebp and dwebp, you can get it from here.

For SSIM, you can get it from here. (the SSIM.zip)

For image convert tool, ImageMagick is used, download from here, and in your code point it to its installation location.

I am unable to re-run the experiment, will give it a try another time, after 2 hours, the script returns nothing,

So wrapping it up,

Is WebP the future of web images? I know Google is all about speeding up your site’s load time. And this project is also a part of Speed!

Leave a Reply

Your email address will not be published. Required fields are marked *