WebP Images for the Win

WebP Images For The Win! – The Interactive #84

As images account for the bulk of the weight of most web pages, optimizing your images is one of the most crucial aspects for improving overall site and page speed performance.

And to this end, one of the features that we just recently added to our web performance optimization WordPress plugin was support for the WebP image type.

This is why I took the time to implement the WebP image type for our Pegasaas Accelerator plugin that provides automated web performance optimization for WordPress.

By Thursday, once the feature was implemented, all of the websites using the Pegasaas system had their web pages loading up to 30% faster for 60% of their visitors.

But it didn’t come without a great deal of effort on our end, in implementing this feature to work with our global Content Delivery Network partner. Luckily, we prevailed, as I detail in my video today.

Transcript

Brandon Devnich: [00:00:02] Hey everybody. Hope you’ve had a fantastic week. I hope you’ve had as good a week as we’ve had here at i3dthemes. Good afternoon and happy Friday. It’s Brandon Devnich from i3dthemes with this week’s Interactive #84, where we share what we’re passionate about and what we’ve been working on and the i3dthemes design and code labs.

Brandon Devnich: [00:00:22] So this week… What what has gone on here? So let’s talk about first the what’s been going on in the design lab. Colin has been working again on the Oxygen WordPress theme. So it’s taking a little bit longer than anticipated, but he has been making progress. We’ve actually had a lot of custom projects come in over the last few weeks, and of course they’re taking sort of precedence and bumping the development on the WordPress theme off a little bit. But progress is still progress. So hopefully in the next couple weeks we should have a preview of that.

Brandon Devnich: [00:01:00] In the code lab this week, Adam took the week off had some stuff you needed to get done. That’s fine by me. It meant that I got to sort of dive ahead into one of the most anticipated “squirrels” if you want to call them that… I had mentioned last week that I often feel like a dog in a park full of squirrels when it comes to Web performance optimization. There are so many great ideas for what we can work on. The trouble is focusing in on one idea at a time. So we have a list, I call my squirrel list, and so this week I decided to focus in on something called WebP images.

[00:01:39] If you don’t know what a WebP image is, don’t worry about it. I didn’t know before too long ago what a WebP image was. It wasn’t really on my radar. We all know what a JPEG image is. We know what a PNG is. What a a GIF image is… Yes that’s GIF not JIF, not JIF… GIF, GIF images. We all know what those the image types are.

[00:02:04] Well there’s another image type is developed by Google and is made open source called WebP. And it’s awesome! It is up to 35 percent smaller than like JPEG images. So you’d have JPEG image 1 and then you convert to a WebP and it can be up to 35 percent, smaller. PNG images about 20 percent smaller and this is great. The good thing about your web page can load between 20 and 35 percent faster, more or less, because most of the web pages images faster if you use web images.

[00:02:40] There’s a caveat.

[00:02:42] What’s that? It only works in certain web browsers. Guess which ones. Chrome and Opera.

[00:02:51] Well the nice thing is Chrome is like 60 percent of the market share. Okay so if you decide to go the route of making sure web pages use WebP images then you know that 60 percent of your visitors are going to be having a faster loading experience. So we decided to go and implement this. So there is readily available code out on the “interwebs” about how to make this happen with your server and you’ve got to take some code and put it into a very special control file called a .htaccess file and it requires a configuration that requires you to have both a JPEG or PNG. If you have the original image and then you have to have another image with a .webp extensions so you have both images.

[00:03:36] Now it’s not as easy as changing the HTML code in your web page to say… you know if you had to say you had an image of me Brandon. Brandon.jpg and you wanted it to be a WebP image. Well you couldn’t just change the extension to Brandon, or more make the image Brandon.webp. No, it has to be done on the server. The server has to detect which image to serve to the web browser.

[00:04:04] Otherwise you just change it in the HTML, it made it Brandon.webp, if you loaded it up with a browser that didn’t support WebP images like Firefox, or Internet Explorer, or Edge it’s not going to display the image. In some cases if you’re trying to load the image directly link in your just copy paste the image URL into your web browser address bar it’ll actually download the the image rather than display the image. It’s not a good situation. So what you have to do is you have to let the server determine which image is going to be served to the web browser it gets a little technical but there are ways and tutorials online on how to do this. But we wanted to go and implement this for our Pegaaas WordPress plugin. The web performance optimization plugin that we’ve been working on for WordPress.

[00:04:51] So we did the first test where we were grabbing say Brandon.jpg off of the origin server, the client server, and optimizing it so we took it from saying mean this big to shrinking down and optimizing the image.

[00:05:06] And then at the same time we then did an instant convert over to a WebP format so we then had two images. The next step was to set up the instructions in the control file and we did that and voila we loaded a small image in Chrome and a larger image in Firefox. So the Firefox got the JPG image. Chrome users were getting the WebP image, and it was fantastic. So like an image being somewhere around 100 kilobytes for JPG was somewhere around 80 or 70 kilobytes for the same image, looking identical, in Chrome. So the next step was to then make it work for our CDN. Now we use a global partner called KeyCDN. They’ve got data centers, edge servers, all over the world.

[00:05:58] And what that does is, when somebody is viewing your website, and if you have Pegasaas installed it automatically works, but they will view the content from, such as your images or your CSS or javascript, from close to you. So if you are in Asia there might be a CDN server in Singapore or in Tokyo or in Australia. There might be a bunch of them all over the place and so whichever one is closest to you you get the resources served from. That means that everything loads so much faster and so we were then going to say all right how do we get these WebP images and the JPEG images to be served from the CDN.

[00:06:48] Unfortunately it’s not as easy as you would like it to be.

[00:06:52] The support was not explicitly declared. Now that it had support articles on how to do it without the CDN and it was very kind of key CDN to provide articles on how to make it happen. Just not using their system. And then they had articles on how to serve different types of content for a compressed page compared to a non-compress page using GZIP or not GZIPO and that used a very special configuration as well but you couldn’t translate that configuration to work for images.

[00:07:32] So I contacted support and said “Hey we’d like to use this configuration to work with the image types and see if the browser supports this type of image. We’d like to be able to pass along the information but it doesn’t seem as though your CDN system supports that.”.

[00:07:51] They said no it doesn’t. So we just recommend changing the file extension in the HTML. Well that’s not going to work because Firefox doesn’t support that. There are other solutions out there client side solutions that do sort of a switch in the HTML code sort of when you view the web page. Unfortunately it’s a render blocking solution which actually slows down the page so I was not prepared to go down that route.

[00:08:21] Well I’ve got about 17-18 years of web development experience. Server experience, client side experience, pretty much any problem to do with web development and this sort of thing, I can sit down for 10 or 15 minutes maybe less have a couple of sips of coffee and come up with a solution.

[00:08:43] This one, not so much.

[00:08:46] I think I probably spent two and a half days staring blankly at my terminal Googling, trying to figure out how to make this work. There had to be a solution. I mean I went through forums, posted in forums. There is nothing available.

[00:09:04] But I did stumble along a feature in the KeyCDN system called Cookie-Based Caching and what that means is you can pass along a cookie.

[00:09:17] You know what a cookie is. It’s a little piece of information that identifies something to the web browser and stores it from you know throughout your session where you can pass a cookie.

[00:09:30] When requesting a resource that identifies something to the KeyCDN system and it will serve an alternate version of the image or whatever. So I determined, well hey, why don’t we just set a cookie, if we’re in the Chrome browser that says “I want a different image. I am a different browser. Please serve me a different image.”

[00:09:54] And then on the KeyCDN system it looks for that same cookie and then says “Aha, I should do something different here. We’re going to grab the different resource we put the pieces together.”

[00:10:06] Once I figured out the solution then within about 15 minutes had a working solution, and at that point as of Thursday all websites running Pegasaas, with users viewing their web pages in Chrome were now running 30 percent faster, more or less, because their images were 30 percent smaller, because all those images were now being pushed through the system.

[00:10:32] And as this update was only done on our API system which means that no updates were needed to be done in the plugins itself and so pretty much like that we had all of the websites using Pegasaas now running an additional 30 percent faster, or loading additional 30 percent faster which was exciting.

[00:10:51] It’s not too often that we are able to make an impact of that magnitude in such… just with one feature.

[00:11:02] So pretty exciting. You know, the update really only was about 25 characters in length — the instruction — it was what 25 characters to put in that instruction that really made the difference.

[00:11:15] So anyways, hopefully, I am just finishing up an article now on Pegasaas.com to actually detail exactly what went through. So there are at least some documentation out there for other people that are using this CDN system and want to do something similar. Maybe it’ll give them a hint as to how to proceed on that because they tell you it was a real head scratcher.

[00:11:37] So, yeah there are!

[00:11:39] So I hope you’ve had a fantastic week. We sure have. We’ve got great plans for the week ahead. We’ve got a couple big features are going to be pushing through hopefully done by the end of next week and then another really super big feature that I think was probably going to squeeze another 10 maybe 15 percent load time off of the off the page load time for Pegasaas, and so that’s coming maybe in 2 weeks time so we got some really great concepts coming there as well.

[00:12:06] Anyways, we hope you have great plans for the weekend!

[00:12:08] We will talk to you again next week. All right. Bye.