Images! They’re everywhere! They’re there! And there! And over there, too!
It’s absurd the amount of content that images make up on the web. I mean, just check out this content breakdown for my website, randomanime.org.
Roughly 79% of the content comes from images!
Crazy, right?
In a world where images are everywhere, we, as developers, have to find a way to make those images load as fast as possible. Compression is the easiest way, or, in other words, making the image file as small as possible. Enter WebP.
What is WebP?
WebP is an image format that can be both lossy and lossless, meaning it’s awesome. What’s more, is that it also supports animated images! Not only is it an alternative for jpg and png, but also gif! How cool.
The file format was released back in 2010 by none other than Google. That’s right, it’s by Google. Google was looking for a way to further compress images, but keep the same quality you would see in a jpg or a png. Thus, WebP was born, derived from WebM video format.
As you would imagine, the compression savings vary from image to image. One thing is for certain, though; it always wins. If you noticed that the content breakdown shows WebP, congrats, you get a cookie. I’ve had WebP in production for randomanime.org for quite a few months now. Here are some of the file size comparisons, taken from random images on the website.
Image 1 – 1920 x 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
Even as the image size gets smaller, we can see a clear winner. The larger image sees a size difference of about 70kb, that decreased to about 27kb with a medium sized image, and then goes down to about 10kb with a smaller image. Regardless of how you look at it, savings is savings. Smaller file sizes, less bandwidth, faster site, happier users.
WebP Browser Support
Stick with me on this one.
Google Chrome and Opera are the only major browsers to implement WebP.
WebP is officially supported in Microsoft Edge as of version 18!
Don’t freak out.
Even though it’s only two browsers, one of those is chrome, and chrome is dominating the internet right now. Take a look at the browser breakdown for my own website, and you’ll see that chrome is by far the top choice. Combined with Opera, that’s 67% of my entire audience.
Now, every website is different. Target audiences vary, which means browser statistics vary. Regardless, it’s hard to ignore the dominance currently in place by Google Chrome.
If that’s not enough to convince you, then let me tell you this: Implementing WebP is easy. For basic usage, you don’t even have to use anything magical, just the good ol’ picture element. Looking at the browser support for the picture element, we’re in the clear.
Don’t worry about the browsers that don’t support the picture element, because the natural fallback is to just use the image element that we specify within it. So, even if the picture element isn’t supported, an image will still be displayed.
<picture>
<source srcset="https://www.randomanime.org/images/shows/1/home-l.webp" type="image/webp" />
<source srcset="https://www.randomanime.org/images/shows/1/home-l.jpg" type="image/jpeg" />
<img src="https://www.randomanime.org/images/shows/1/home-l.jpg" alt="Sword Art Online" style="width:100%;" />
</picture>
Looking at the above code snippet, it seems simple, but there is a lot happening.
First, we have source elements within the picture element. Source is really cool, because you can put all sorts of attributes on it to suggest to the browser when to use it (even media queries, which I’ll show you later). In this example, we see two sources with different types, one with type image/webp and the other with image/jpeg. This tells the browser, “Hey! This is a WebP image!”, or, “Hey! This is a jpg image!”.
The browser will look at the first source, see that it is WebP, and, if supported, will use that source. If the browser doesn’t support WebP, it moves on to the next source, jpg. Once it sees that, it’ll use the jpg source. If the browser doesn’t support the picture element at all, it’ll use the image tag.
Hats off to the picture element, everyone!
Remember how I said the source elements can do lots of cool stuff? Well, what if you have WebP and jpg images in various sizes. Cause, you know, you are a real go getter and want to save as much bandwidth as possible.
<picture>
<source srcset="https://www.randomanime.org/images/shows/1/home-l.webp 1920w, https://www.randomanime.org/images/shows/1/home-m.webp 1366w, https://www.randomanime.org/images/shows/1/home-s.webp 767w" sizes="100vw" type="image/webp" />
<source srcset="https://www.randomanime.org/images/shows/1/home-l.jpg 1920w, https://www.randomanime.org/images/shows/1/home-m.jpg 1366w, https://www.randomanime.org/images/shows/1/home-s.jpg 767w" sizes="100vw" type="image/jpeg" />
<img src="https://www.randomanime.org/images/shows/1/home-l.jpg" alt="Sword Art Online" />
</picture>
Now the picture element is working overtime. Srcset can be used along with sizes to tell the browser what images are available, and help it decide which one to use. So now, not only is our picture element distinguishing between WebP and jpg, but it also helps load the correct size.
You’re users will never see this, but you can relax knowing their page loaded only the necessary resources and with the best compressed image possible.
At this point, it may have come across your mind, “What about background images?”
Well, there isn’t anything in CSS as magical as the picture element. Essentially, you’ll have to use something like Modernizr to detect WebP support. Once that happens, then you can change the background image based off the classes applied (based off support).
It’s a little bit more work, but worth it, wouldn’t you say?
Saving in WebP
Now that you are on the bandwagon, let’s talk saving images in this wonderful format.
Hey! I just launched a little web app project of mine that converts any image to webp
The first thing you are going to want to do is head over to the Google Getting Started Guide. There, they mention a photoshop plugin, but I wasn’t able to get it working. Maybe you’ll have more luck?
They also have a command line program, which is what I grabbed for. The program is called cwebp.exe. You’ll have to navigate to the very intimidating download repo, and find the one that matches your setup.
For instance, I’m a Windows x64 user, so I downloaded libwebp-0.6.1-windows-x64.zip.
After you download and unzip the folder, look under bin. There you’ll find the magical .exe file that you need. Once again, it’s called cwebp.exe.
The Google Getting Started page shows an example of how to use the executable, and you can follow the documentation link to see all the sorts of fun stuff that come along with it.
For me, I wanted a way to automate this process, especially when adding shows to randomanime.org. I mean, there’s a lot of images, why would I want to do that manually?!
The process I came up with was to have my local XAMPP web server access the command line, and run the program. Being a local dev setup, I didn’t see any problems with this. A loop and the magical php function, shell_exec.
$images = array("home-l", "home-m", "home-s", "anime-l", "anime-m", "anime-s");
$curDir = "../../images/shows/".$id."/";
foreach($images as $image) {
$jpg = $curDir . $image . ".jpg";
$webp = $curDir . $image . ".webp";
shell_exec("cwebp -q 60 " . $jpg . " -o " . $webp);
}
Or, if you are just looking to quickly convert some images, you can always just search for one online. One that I use currently is just called WebP Converter, and you can find it here. It’s not the best UI in the world, but gets the job done (quality is hidden under options).
Conclusion
Hopefully by the end of this article, you have a general understanding of the WebP image format, and you’re excited about it! I hope that you choose to use it in your current or future projects, as it really is a bandwidth saver.
If you are lost, or don’t quite get something, you can feel free to contact me. I’d love to help you through it.
Thanks for reading!