All about WebP image format

Last Updated: May 18, 2022

IntroductionLink to this heading

PNG, JPEG and GIF are already the most popular and widely used raster image formats. So, what is the need for WebP image format?

The reason is, all of these image formats have some limitations and they were not made to be used on web primarily.

So, let's first quickly understand about limitations of these image formats.

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.

1. Using Command Line ToolLink to this heading

Precompiled utilities cwebp, dwebp and gif2webp are provided in libwebp library.

You can download the library from this link.

Once the library is installed, we can execute below commands to convert PNG/JPEG/GIF image to WebP or convert WebP image back to PNG.

Convert PNG/JPEG to WebP image using cwebp utility

# 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

Find all options of cwebp utility from cwebp documentation page.

Convert animated GIF to animated WebP image using gif2webp utility

# 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

Find all options of gif2webp utility from gif2webp documentation page.

Convert WebP image to PNG using dwebp utility

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

Find all options of dwebp utility from dwebp documentation page.

Convert all images of a directory to WebP

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

When we have multiple images, we can use above script to convert all the images to webp at once 🎉

We can use this command line utilities for one-off conversions or if we are the only one who is going to host/upload the converted WebP images.

2. Using online toolsLink to this heading

If you are not comfortable with command line utilities then you can convert your JPEG/PNG/GIF images to WebP using online tools.

Just google "Convert to webp" and you will get so many online tools.

My favorite tool is Squoosh app

Online conversion is also mainly recommended for one-off conversions.

3. Using build toolsLink to this heading

If you are self-hosting images and your project is using any build tool such as Webpack, ESBuild, Vite etc. you can use imagemin-webp plugin with those build tools.

imagemin-webp plugin helps in converting all the images to WebP at build time.

This is recommended way of converting images to WebP for any modern web application as it can do conversion automatically, once it is configured in build tool.

4. Using cloud-based image serving servicesLink to this heading

If you host images on any cloud-based image serving services such as Cloudinary, ImageKit, Imgix etc. they provide a feature to automatically convert and serve images in WebP format. They also provide provision to set quality of the WebP image for lossy conversions.

For example, when you upload a PNG image all-about-webp-image-format.png to Cloudinary, we can just change the image extension to .webp in the url and specify quality q_70 in the url as shown below.<USER_ID>/image/upload/q_70/<VERSION_ID>/images/all-about-webp-image-format.webp

This url will automatically convert the PNG image to WebP image with quality index 70 on first request and then cache the converted image. So, subsequent requests to the url do not trigger image conversion.

Now, let's understand how to use this WebP image on our web page.

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:

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

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.

Do you have any question related to this post? Just Ask Me on Twitter

Explore More:

Subscription Image
Subscribe & Learn

As a full-time content creator, my goal is to create a lot of quality content, which can be helpful to you in advancing in your web development career ✨

Subscribe to my newsletter to get notified about:

  • 🗒 Thorough articles, tutorials and quick tips
  • 🗞 Latest web development news
  • 📙 My upcoming front-end courses
  • 💵 Subscriber exclusive discounts

No spam guaranteed, unsubscribe at any time.

Loading Subscription Form...