That what, why, and how of WebP

By Amar Balu, a multi-sport champion!

WebP is a modern image format introduced by Google provides superior lossless and lossy compression for images on the web.

Why WebP ?

Webp uses VP8 to provide files of reduced size with quality equivalent to JPEG/PNG formats.

Due to the smaller file sizes, pages with WebP images load faster (better initial loading time) that will boost our site performance.

And also WebP incorporates both transparency and animation at same time. Previously we used different formats, PNG for transparent backgrounds and GIF for animations but not provided with the same format.

How much smaller ?

WebP Images are 26% smaller in size compared to PNGs and 25–34% smaller than comparable JPEG formatted images with equivalent SSIM quality index.

Downsides of WebP

Despite of their benefits, not all browsers supports WebP. This post guides you how to use few strategies to determine WebP browser compatibility across client and server side environments.

1. CanIUse Tool

An online tool provides browser support tables for modern web technologies. Tool provides a clear picture of browser compatibility based on their versions.

Browsers are tagged with green label are compatible to WebP.

2. Canvas

Canvas provides optimal solution to determine the compatibility of WebP across browsers with their .toDataUrl() method. This method takes to execute about 6ms, acts as an ideal solution for client side environments.

HTMLCanvasElement.toDataURL() method returns a data URI containing a representation of the image in the format specified by the type parameter.

Browsers take image/webp returns data:image/webp are compatible to WebP.

3. Lossless Feature (Img element)

Method available in Google’s official document, provides attempt to decode a very small WebP image, to load an image element with webP Image and validate for success.

Browser tries to load (onload) image element <img> without any error are compatible to WebP. Those browsers are non compatible will fall under error condition (onerror).

As the loading of images are non-blocking and asynchronous. Code depends on WebP support should preferably used in the callback function.

4. CSS

A simple Css rule that uses background-image’s url property, provides a simple check to detect WebP compatibility across browsers.

Browsers compatible to WebP, loads img/banner.webp image as background.

5. Headers

Web clients sends an accept request header, is a string provides the file formats that will be acceptable by the response.Act as ideal solution for server side environments.

Browser indicates image/webp under accept headers are compatible to WebP.

References

• Stack Overflow — https://stackoverflow.com/questions/5573096/detecting-webp-support https://stackoverflow.com/a/57359447
• Google Docs — https://developers.google.com/speed/webp/faq#how_can_i_detect_browser_support_for_webp
• 99 Designs — https://99designs.com/blog/tips/webp-image-format/

Meet the team!

Author
Amar Balu

Editor
Mridula Saravanan

We at CaratLane are solving some of the most intriguing challenges to make our mark in the relatively uncharted omnichannel jewellery industry. If you are interested in tackling such obstacles, feel free to drop your updated resume/CV to careers@caratlane.com!