Let’s Start Using WebP

May 18, 2019 · 313 words · 2 minute read

Images are a key part of any web project and web performance. Most images have been JPGs and PNGs for a very long time. Then Google tried to change that. It introduced some new standards for images and videos: WebP! Google claims that it can reduce the size of JPGs and PNGs from 25% to 35%.

I was resistant to a new format for a long time because the majority of users would still need to save a PNG or JPG, so it felt like too much work to make sure that I had two copies of the images. But once support landed in Firefox, it was something that I wanted to take a look at. If you could save 25% on average across your footprint, you might be able to deliver a considerably smaller site to your users very quickly.

WebP as Background Images

.element {
 width: 50vw;
 height: 100vh;
	background-image: url(‘test.webp’);
 background-image: url(‘test.jpg’);
}

If you set up a background image this way, the browser will render the WebP image if it supports it. If it doesn’t, it will just ignore everything and load the JPG copy and move along.

WebP In Line

<picture id=“atb”>
	<source type=“image/webp” srcset=“new.webp”>
	<img src=“new.png” alt=“My Image”>
</picture>

We can start to use the picture element as well as bring the web into our images. The same thing applies—as soon as the browser can render one of the images, it will and then move onto the next thing.

I hate the idea of loading more than one image that can achieve the same purpose. But if you have some really large files or the quality starts to downgrade when you compress your JPGs and PNGs, then WebP could really save a lot of space on the browsers that can render it. As of writing of this, the latest Firefox, Chrome, and Edge browser all support WebP.