Subscribe

How to use WebP images

โœ๏ธ

Learning about WebP images, how to use them and why you should use them!

10 Feb, 2021 ยท 3 min read

Here's a use-case you build a great web application, and it's fantastic. Then your colleague asks you how the speed of this unique application is.

Oef, you didn't check that during development but decided to run a lighthouse test to get a general understanding.

The results shock you a bit!

Bad lighthouse score

That sucks, your structure seems alright, but the website is just plain slow...

Doing some more research, you might come across this section:

Chrome Lighthouse next-gen image formats

And it's a valid point. Next-gen image formats are unique and should be used.

What is a WebP image?

In this article, we'll be talking about WebP images, but what exactly are WebP images?

WebP is a new modern image format. It applies lossless and lossy compression for images on the web. It makes our files even smaller for the web!

It saves around 26% and between 25-34% on JPEG than a PNG.

The cool part is that it supports transparency as PNGs do. And at meager costs. Meaning a PNG converted to WebP is 3x smaller on average.

I've converted the same image in PNG, WebP, and JPG to showcase this without unique compression.

Different image formats

Wow, that's one big jump in file size, and it's not even compressed.

Awesome, let's use these WebP images everywhere!

Using WebP images

So our main goal might be to replace every image on the site with a WebP variant.

<!-- before -->
<img src="cat.jpg" alt="a cute cat" />
<!-- after -->
<img src="cat.webp" alt="a cute cat" />

We did it, ran it in Chrome, and it works. Lighthouse also seems happy, so done.

But about 15 minutes later, Linda from Marketing calls and complains all the images have disappeared on her computer. You ask what browser she is using, and after a small battle finding out what a browser is, it turns out to be Internet Explorer.

Darn, we didn't check that! Now what? You and your developer colleague want a fast website, but it shouldn't go to waste for all the other users on non-modern browsers.

The browser support for WebP is not bad, but unfortunately, it's not fully supported yet.

WebP browser support

That is where the <picture> element comes in handy.

We can convert our <img> tags to be part of a <picture> element.

<picture>
  <source type="image/webp" srcset="cat.webp" />
  <img src="cat.jpg" alt="A super cute cat" />
</picture>

Pretty cool. Since the browsers will parse this top-down, if they support the WebP format, they'll choose that image, or they will fall back on the JPG.

It's important to know that the picture element needs the <img> tag, and it will use that alt text to show on either of the sources.

Testing our the support fallback

You might think, cool, we got it working now, but how can I test this?

Luckily, Chrome 88 shipped an excellent modern image format rendering option.

You can find this option in your Chrome dev tools under the Rendering tab.

Chrome test modern formats

For my example, I used two pictures of different cats so we could see the difference.

When WebP is rendering, we should see this cute cat:

WebP supported image

And as a fallback, when we don't have WebP support, we should see this cat.jpg image.

HTML Picture jpeg fallback

You can try this out using the following Codepen.

See the Pen How to use WebP images by Chris Bongers (@rebelchris) on CodePen.

Browser Support

The HTML Picture element has almost full support, and don't worry, the browsers that don't support the tag will fall back to the <img> we placed inside the picture tag.

HTML Picture element support

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

Submit button outside the form

4 Dec, 2022 ยท 1 min read

Submit button outside the form

Trying out native dialog modals

8 Aug, 2022 ยท 3 min read

Trying out native dialog modals

Join 1979 devs and subscribe to my newsletter