How to use Webp format (.webp)

SaravananVijayamuthu
Frontend Weekly
Published in
2 min readJun 26, 2020

Here is what you need to learn about the WebP interface created by @google to start using it today.

✍ Description

Webp is a modern image format developed by Google that provides superior lossless and lossy compression for images on the web. Webs’ lossless images are? 6% smaller in size compared to PNGs. WebP lossy images are 5–34% smalls than comparable JPEG images at equivalent SSIM quality index. Unfortunately, some devices and tools do not support WebP yet.

💫 Conversion

Google provides the cweb — CLI converter. It supports PNG, JPEG, TIFF, and raw Y’CbCr samples.

💥Installation💥:

Mac: (Brew): brew install webp

Ubuntu: apt-get install webp

Windows (chokolatey): choco install webp

💥Usage💥

cwebp [opt] pic.png -o pic.webp

cwebp [opt] pic.webp — — -pic.png

🌟 Browser Support

WebP is going to be supported by Safari (and other Apple products) soon. For now, there is a polyfill library that makes WebP files readable by all browsers: github.com/chase-moskal/webp-hero

🔥 Usage

Support of WebP format can be extended to all browsers by use of the polyfil tool WebP-Hero.

❄ Load the polyfils and the webp-hero:

❄ run polyfill function:

If anything is not clear or you want to point out something, please reach me

Like this article? Follow @saravanan.vijayamuthu on Instagram

--

--

SaravananVijayamuthu
Frontend Weekly

Ambivert. Webdev. Communicator. Internet guru. Coffee enthusiast. cynophile.