Web Design Using WebP Images

Faster, faster! Everyone is in a hurry today and Google knows it. Their algorithm is now tuned to reward faster loading pages and websites based on their Page Experience & Core Web Vitals "tests". What is a web designer to do?



One solution is to cut your websites load time by reducing the file size of your images. On most websites, it's the images that make up the bulk of the data transfer when loading a web page. Using WebP images vs .jpg or .png files accomplishes two things.

#1 - It reduces the file size of your image by nearly 50% when the original is a compressed .jpg image. When a .png image is the original, it reduces the filesize even more. Note: These reductions are what we experienced with typical website hero images. Your mileage may vary.

#2 - Improves the quality of the image in the process by reducing the nasty compression artifacts .jpg images are known for, improving the look of the website in the process. WebP image compression is far superior to .jpg! Now that I've got your attention...

 

What Is The .WebP Image Format

.WebP is a Google next gen image format. To quote Google, "WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster." The link above goes into lots of details about the image format, but for those of you that just want to see it for yourself, let's take a typical hero image and show it compressed using the traditional .jpg image format and then we'll show you the results using the WebP image format.

 

Webp. Image Example

The photo below is a stock photo we used on a recent website saved using .jpg compression from Photoshop. Think of this as the original, only slightly compressed image as it would come from the stock photo site. Image file size is 395kb. A completely uncompressed .jpg would have been nearly 900kb, but I didn't want to annoy Google and force you to wait for that huge image to download.

This is the same image compressed further to reduce file size. Note the compression artifacts that are starting to show at the top left and right corners where it has sublte gradations. You can also see compression artifacts on the stainless steel uprights of the canopy. At this point we've reached the limit to how far we can compress the .jpg image, lowering the file size, without it starting to look so bad you wouldn't use it on the website. The file size at this point is 151KB.



The image below is compressed to 60% using the .WebP image format. This file size is only 97KB, 55% smaller than the compressed .jpg image above yet looks so much cleaner without glaring compression artifacts. In this example, we've improved the quality over the .jpg, AND lowered the file size.



Here's the .webp image compressed to 40%. You can start to see some compression issues, but it's not so bad that we wouldn't use the image on the site. It still looks every bit as good as the compress .jpg. File size has dropped to 76KB. Or just a little over half as big as the .jpg. Yet you can just barely start to see the subtle gradations in the top corners getting blocky, and the stainless steel uprights start to look a little less crisp.



 

Which Web Browsers Have .Webp Image Support

Fortunately the answer is now they all do, but that wasn't always the case. Since it was Google's format, naturally enough, Chrome supported it first back in version 9.0.597 of Chrome released February 3rd, 2011.

The Microsoft Edge browser gained support in October of 2018. Kudos to Microsoft for accepting a new standard instead of trying to roll their own as they have done so many times in the past. They even support .WebP in their Office suite including Word, PowerPoint and Outlook.

Surprisingly it took Mozilla Firefox longer to support it than Microsoft. Firefox 65 which arrived on January 29th, 2019 fully supported the .WebP image format.

Apple's Safari browser was a real holdout, not supporting the .WebP image format until September 16th, 2020 when Safari 14 was released.

As you can see, all the major players now support .WebP images. What are you waiting for?

 

Web Server Support for .WebP

Here's one gotcha that I can help you with. If you use Windows Servers for your Web hosting, you'll need to add the MIME Type for .WebP before you can use it. If you try using .WebP without adding the MIME Type to the server, the images will throw a 404 error.

I'm not sure if Microsoft Server 2022 includes the .WebP MIME Type, but Microsoft Server 2019 and earlier does not. Here's how to add it.

Assuming you've got direct access to the IIS Administrator (if you don't call your hosting company for help), click on the Server Name under connections as shown below so we make sure the changes you make will be across the whole server, not just for a specific site. Mime types can be changed at the site level only though if you choose to.




Now in the middle panel, double click on Mime Types.



Now in the right hand panel, click add.



Enter .webp in the File name extension field and image/webp in the MIME type: field and click ok.



If you scroll down now you'll see that the .webp MIME Type has been added. Your server is now ready to handle .webp images.



Ok, get out there and speed up those web pages now! Of course if you would like us to design your website for you, contact us here.