Code Icon

WebP – What is it? Why should I use it?

Published on

Images, images everywhere!

Images make up an absurd amount of content on the web. I mean, just check out this content breakdown from my website randomanime.org.

Web content breakdown showing WebP and JPG as majority of content

Crazy, right? Well, enter Google.

What is WebP?

First released in 2010, Google’s WebP is an image format that supports lossy and lossless formats. Therefore, it’s an alternative to both PNG and JPG, which is awesome.

What about GIF? Well…animation isn’t really WebP’s dealeo, so you’re stuck there.

It was brought to my attention by Pascal Massimino that WebP is actually a great alternative to GIF as well, which I previously was unaware of. There is a fantastic article here that covers the savings you can expect from converting a GIF to WebP.

You are probably thinking, okay, why use this new format? Well, file size, obviously. WebP’s encoding can show significant compression in file size without any visible changes. Exactly how much? Well, it varies by image, as you’d imagine.

I’ve put utilizing WebP images into production on randomanime.org, and here are some of the file size comparisons.

Image 1 – 1920×576
JPG – 130kb
WebP – 60.3kb

Image 2 – 1140×342
JPG – 94.7kb
WebP – 67.2kb

Image 3 – 545×245
JPG – 24.9kb
WebP – 15.2kb

As you can see in all of the previous examples, WebP wins. With the larger image we see a giant gap of about 70kb, that decreased to about 27kb with a medium sized image, then goes down to about 10kb with a smaller image.

Regardless, that’s bandwidth saved. Less Bandwidth = Faster Site = Happier Users. And again, at no visible difference.

Browser Support

Alright, it’s cool. So what about browser support?

Erm…well…you see.

It’s a Google product, so naturally Chrome uses it, and Opera…but other than that…not much.

WHAT?! Two major browsers? Are you insane?!

Now now, listen here. Look at this following analytics report for randomanime.org.

RandomAnime.org browser breakdown for December of 2016

Chrome and Opera make up nearly 66% of the site’s total traffic. Now, depending on the website, your statistics can differ (obviously). Even on a global scale, Chrome is thought to own about 45% of the total market, which is crazy!

Alright, alright. You get the picture. But the problem is…how do you utilize this new technology, but still have a fallback?

WebP Implementation

Enter the epicness that is the picture element.

See the Pen WebP/Jpg Fallback w/ Picture Element by Kyle Hawk (@Krazyhawk) on CodePen.

Bam. Flawless.

Essentially, the picture element behaves like an image element. When the browser comes across it, it looks at the source element and goes “Do I understand what’s in that?” If it does, it utilizes that source. If not, it moves on to the next one. The image tag within the picture element is the ultimate fallback. If a browser has no idea what the picture element is, it just renders the image element. EPIC!

Cool cool…but this is 2018, bro. You gotta be using srcset. Ah. Yes. The sweetness that is srcset and sizes.

See the Pen WebP/Jpg SrcSet Fallback w/ Picture Element by Kyle Hawk (@Krazyhawk) on CodePen.

Bam.

Now the picture element is doing double time. If the browser supports srcset and webp, it utilizes the first source to determine which image to load. If it doesn’t like webp, but supports srcset, it moves to the next source to determine which image to load. Finally, if it doesn’t support srcset, we have a good ol’ image element to act as a fallback.

Hats off to the picture element, everybody.

What about if I want it as a background image? Well, unfortunately, there is nothing as magical as the picture element via CSS.

What you can do, is download and utilize modernizr. If you customize it just for WebP, it’s quite small. Once you do so, it will add a class to the body element after running a test on the browser. Then, in your CSS, you can adjust accordingly.

A little bit more work, but still not too bad, especially if you are already using modernizr.

Saving In WebP

Now that you know how awesome this new format is, you are probably wondering, “How do I save an image in .webp?”. There are a couple of options before you.

First, take a look at the official, Google Getting Started Guide.

In that document, they mention a Photoshop plugin, located here. However, I didn’t have much luck with it. Maybe you will?

They also have a command line program called cwebp. You’ll find this page useful, then navigate to the downloads repo and find one that matches your setup.

For instance, Windows x64 users should download libwebp-0.6.1-windows-x64.zip from the downloads repo.

In the folder, after you unzip, you’ll find a cwebp.exe under bin. That’s the program you want to run from the command line to do the dirty.

Now…I go through a lot of images on randomanime.org, so I opted for a more automated approach.

See the Pen PHP Shell Exec of CWEP Example by Kyle Hawk (@Krazyhawk) on CodePen.

I have a copy of cwebp.exe stored in the same directory as the php file, and since I’m on a local server (XAMPP), there is no worries to have it access the command line.

It can be a little weird and a pain to get going, but trust me, implementing WebP is worth it.

Welp. That’s all I got. If you want to read some more about it, CSS-Tricks has an awesome article on WebP as well.