Habilelabs-Logo
Blog

WebP image format, how to make it cross browser compatible?

April 3rd, 2017 . 2 minutes read
Blog featured image

First of all, let me tell you what is WebP format.

What is WebP?

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.
Lossless WebP supports transparency at a cost of just 22% additional bytes. WebP can help you reduce the loading time of your web application significantly.

How WebP format works in simple words:

Lossy WebP compression uses predictive coding to encode an image, the same method used by the VP8 video codec to compress keyframes in videos. Predictive coding uses the values in neighboring blocks of pixels to predict the values in a block and then encodes only the difference.

Lossless WebP format compression uses already seen image fragments in order to exactly reconstruct new pixels. It can also use a local palette if no interesting match is found. Google is behind the development of WebP format. So many browsers are adopting this now.

Browser support for WebP image format:

The only browser which is developed and maintained by google are supporting it right now. Recently safari also supporting it now. It is planned for Firefox but not yet released.

WEBP IMAGE FORMAT

Image courtsy http://caniuse.com

So this raise a big concern as it not working on IE and Firefox should we use this format or not.

I have solution for this problem. Although major browsers do not support but we can use webpjs image format to make support of other browsers.

Making webp compatible on Firefox and Internet explorer:

Download webpjs library from this link.

Follow code can you add in the header or anywhere on your website:

or this code. This code only load the js file when webp not supported by browser & is PageSpeed optimized:

Test your website on google speed test. you will feel the difference.

Conclusion:

Webp image format is best option to compress images for better and faster web.

Happy coding for superfast internet. Let me know if you have questions in comment box.

Author: morwal89
Share: