loading...
Cover image for Understanding WebP

Understanding WebP

jmau111 profile image Julien Maury Originally published at blog.julien-maury.com ・3 min read

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.

Source

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

Source

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)!

Source

HTML examples

You can use the following HTML markup :

<picture>
    <source srcset="/path/to/img-webp" type="image/webp">
    <source srcset="/path/to/img" type="image/jpeg">
    <img src="/path/to/img" alt="" />
</picture>

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 :

<picture>
  <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="" />
</picture>

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.

Drawbacks

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.

Posted on by:

jmau111 profile

Julien Maury

@jmau111

Practise what you preach.

Discussion

pic
Editor guide
 

WebP has such a nuance - not all browsers support it. For example, iOS Safari, regular Safari, IE - do not support WebP. caniuse.com/#feat=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. optipic.io/en/cdn/ 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))

 

hi, thanks for your comment, I know this nuance, there are explanations in the post if you read it carefully, including the storage part.

However, for browser support, Safari 14 will implement it \o/.
For IE, as I've said in the article, you can use jpeg XR.

Optitic looks cool, thanks for sharing.

 

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

 

I would say it's tricky. You can definitely use webP in CSS, but I don't think there's a builtin way to handle webP fallbacks.

I already saw things like:

.myBg {
  background-image: url('myimage.jpg');
  background-image: url('myimage.webp');
}

Does not make sense to me. A better approach would be to use custom classes :

.bg-no-webp {
  background-image: url('myimage.jpg');
}
.bg-webp {
  background-image: url('myimage.webp');
}

You would have to detect webP support with javascript to add the right class.
Nevertheless, the growing support of webp, including browsers such as Safari (14) is encouraging.