DEV Community

Cover image for Understanding WebP

Posted on • Updated on • Originally published at

Understanding WebP

WebP is a modern format for images. It's a great way to improve both web performance and the user experience.

Why bother with images?

Image optimization is vital for web performance. Why? Simply because the file size is a considerable part of the total rendering time.

Be aware it's not magic, though, and formats are not the only way to improve your images, but it's a good start.

Lighter images lead to less bandwidth consumption, making a massive difference, especially in some parts of the world where the Internet is slow and quite expensive.

Besides, it's great for the environment too.

What is WebP?

WebP is an image format. Comparing to PNG or JPEG, WebP significantly reduces the file size (~ 30% smaller). Fewer bytes lead to faster web pages load.

Like PNG, JPEG, or GIF, WebP is a bitmap format. Sometimes the documentation refers to raster images or matrices, but it's the same thing. Unlike vectors, it has pixels.

There are lossy formats (JPEG) and lossless formats (PNG, GIF). "Lossy" means you will lose the original image quality.

Browser support

Many browsers such as Chrome, Opera, Android, and the latest Firefox and Edge support WebP as well as PNG, JPEG, JPG, or GIF.


Browser support for WebP is quite good, especially in the mobile world. Even Safari 14 will support WebP!


It can be a game-changer.

How does it work?

WebP uses the same core features as Webm videos. It works with the same VP8 video codec.

Roughly speaking, in lossy mode, the algorithm splits the image and reconstructs new pixels based on already-seen blocks of pixels. Google calls this operation a "predictor transform."

Unless you are a Hero from the MCU (Marvel Cinematic Universe), you won't see the difference with the naked eye, so it's perfectly fine for the web.

The difference between lossless and lossy modes is a trade-off between file size and image quality, but WebP is better than other formats in any case.

Besides, it supports transparency (like PNG) and animation (like GIF)!


HTML examples

You can use the following HTML markup :

    <source srcset="/path/to/img-webp" type="image/webp">
    <source srcset="/path/to/img" type="image/jpeg">
    <img src="/path/to/img" alt="" />
Enter fullscreen mode Exit fullscreen mode

there's a fallback in case WebP is not supported. The <picture> element allows us to define multiple assets under specific circumstances. The above markup is convenient when assets should look different on different devices.

Wait, what about responsive WebP? You can do the following :

  <source type="image/webp" srcset="/path/to/img-300.webp 300w,
    /path/to/img-600.webp 600w,
    /path/to/img-800.webp 800w,
    /path/to/img.webp 1000w"
  <source srcset="/path/to/img-300.jpg 300w,
    /path/to/img-600.jpg 600w,
    /path/to/img-800.jpg 800w,
    /path/to/img.jpg 1000w"
  <img src="/path/to/img-300.jpg" alt="" />
Enter fullscreen mode Exit fullscreen mode

How to check it

Once you have that HTML markup with fallbacks and all the things, it might be hard to check if it's working as intended.

One of the easiest ways to check if the browser takes your WebP images into account is to right-click on any image and open it in another tab. It should download the WebP image, not the fallback in PNG or JPEG.

It's also possible to check it with the Lighthouse audit. Check the "passed audits" tab and look for "next-gen formats" audits.

How to massively convert files

There are indeed free online converters, but the easiest way to use it is never to have to convert to the format on your own.

Webpack and Node.js are your friends. There are fancy libraries and plugins.

If you want more control or prefer command lines, you can use the cwebp command. cwebp is part of libwebp and was written by the WebP team. Read the documentation. You can install the package on your machine and the server.


Browser support has been an issue for a long time, but, as I ever said, Safari 14 will support it. Only Internet Explorer does not understand it, so use jpeg XR for that browser instead.

Storage might be an issue. You will need more space, and it is not free.

Nevertheless, even with those drawbacks in mind, it's still worth it, give it a try.

Wrap up

Adding WebP to your site is an excellent optimization. It gives you a little bit more work, but it's pretty useful and rewarding.

Discussion (5)

alexbeglov1989 profile image

WebP has such a nuance - not all browsers support it. For example, iOS Safari, regular Safari, IE - do not support WebP. Therefore, you must always store at least two versions of each image. Webp (for WebP-enabled browsers) and original image. And give the right version depending on the browser. And the original image must also be optimized/compressed - so that even for browsers without WebP support, images will be optimized (lighter in weight) - this is the third! version of the file.. At the optipic service, I recently noticed a new functionality in which all of this is already in the box. You can even connect everything so that the urls of the images do not change (they remain exactly the same and look like internal urls on my site). But in fact, they are loaded through their system with automatic compression, conversion to webp and recognition of webp support. It turns out that everything is simple and beautiful, and inexpensive))

mitya profile image

Can i use webp for background-img? With fallback to jpg? Like a picture/source/srcset in HTML?

Sloan, the sloth mascot
Comment deleted
mitya profile image


henrihelvetica profile image
Henri Helvetica

As Julien mentioned, this could be tricky. Last I recall, you can / should be able to have multiple background images in css. So I would possible try listing the image URLs w/ the webp 1st, and jpg 2nd as a fall back. I would check on that to make sure but I believe that should work as long as you have format support. But there are some issues here. You have a potentially unnecessary request. In Julien's case, if you're using JS to swap, which is more JS to detect + swap just 1 image. Also, something potentially worth considering, if you're really after a small size: depending on how sharp you want to the bg image, you can add a super slight blur to a jpg image, and by design, the jpg will drop in size (jpg property).