All about WebP image format

Limitations of PNG, JPEG and GIF image formatsLink to this heading

PNG image format supports transparency channel. That means PNG image can have transparent background or any transparent part in the image. But, PNG does not apply any lossy compression algorithms and so it results in larger file size.

JPEG image format supports lossy or lossless image compression algorithms to reduce file size but JPEG image format does not support transparency channel.

Both PNG and JPEG image formats do not support animation. For that we have GIF image format.

GIF image format supports animation and transparency channel but it supports only 256 colors. Due to limited color palette it is mainly used for simple graphics such as logo or simple animated images only.

WebP image format overcomes all above limitations.

What is WebP image format?Link to this heading

WebP is a modern image format which supports transparency channel, animation and lossy/lossless image compression algorithms for smaller file size.

WebP image format is developed by Google as an alternative to PNG, JPEG and GIF image formats for using it on web.

Lossless WebP images are usually 25%-30% smaller than PNG images.

Lossy WebP images are usually 25%-35% smaller than lossy JPEG image at an equal quality index.

Due to significantly smaller file size of WebP images, it helps in loading images much faster and helps in improving overall performance of our website 🚀

But shripal, how to convert existing images to WebP image format?

How to convert JPEG/PNG/GIF image to WebP?Link to this heading

Based on how many images we need to convert and purpose of converting, there are mainly 4 ways to convert any JPEG/PNG/GIF image to WebP image format.

# lossless conversion
cwebp -lossless images/my-image.png -o images/my-image.webp

# lossy conversion for significantly reduced file size
cwebp -q 65 images/my-image.jpg -o images/my-image.webp

# lossless conversion
gif2webp images/animated.gif -o images/animated.webp

# lossy conversion for significantly reduced file size
gif2webp -q 70 -lossy images/animated.gif -o images/animated.webp

dwebp images/my-image.webp -o images/my-image.png

for file in images/*
do 
    cwebp "$file" -o "${file%.*}.webp"
done

https://res.cloudinary.com/<USER_ID>/image/upload/q_70/<VERSION_ID>/images/all-about-webp-image-format.webp

How to use WebP image?Link to this heading

WebP image is very well supported in all modern browsers and devices.

So, if your web application needs to be compatible with only modern browsers/devices, then just set the WebP image to src attribute as usual.

<img src="images/my-image.webp">

But, if your web application needs to be compatible with legacy browsers/devices also, then we can use <picture> element to serve WebP image as shown below:

<picture>
    <source type="image/webp" srcset="images/my-image.webp">
    <source type="image/png" srcset="images/my-image.png">
    <img src="images/my-image.png">
</picture>

As per above code,

• if browser supports WebP image then it will download my-image.webp image.
• if browser does not support WebP image, then it will download my-image.png image.
• if browser does not support <picture> element, then it will download my-image.png image set in <img> element.

ConclusionLink to this heading

As WebP image is supported in majority of modern browsers/devices and there is a way to serve WebP image in backward compatible manner, we should start using WebP images from today to improve our website performance.