Web Design Using WebP Images

by Brian Rideout • February 17, 2022

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?

Frustrated Web Designer

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.

Uncompressed .jpg Image - 395kb

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.

Compressed .jpg Image

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.

WebP Image Compressed to 60% - 97KB

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.

WebP Image Compressed to 40% - 76KB, about 1/2 the Size of the .jpg

 

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.

Select the Server Name in IIS


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

Select Mime Types in the Middle Panel

Now in the right hand panel, click add.

Now Click Add... in the Right Hand Panel

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

Enter .webp as the File name extension and image/webp as the MIME Type

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.

Scroll Down and Confirm That the MIME Type Has Been Added

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.

 

About the Author


Brian Rideout, Chief Pixel Pusher of BANG! Web Site Design is an industry veteran (sounds better than old guy right?) who started building websites in 1996 when dial-up, modems, Netscape and 640 x 480 resolution monitors with 256 colors were state of the art. We very quickly adopted ColdFusion as our application server and developed CMS (Content Management Systems) powered sites for our clients so they could update their own websites easily without having to pay a web designer to do so.

We stumbled into SEO by "accident" when we got a client ranked #2 on Yahoo (remember this was the 90's) for an extremely competitive keyword phrase and they sold out of all the product they had. With a little reverse engineering we learned what Yahoo was looking for and applied our new found SEO experience to other clients and then to Google... which was a tougher nut to crack by the way.

Times changed, Google became the dominant search engine, Adobe bought ColdFusion and we switched to Lucee for our application server which is an open source CFML language server, and we continued to build websites for small business's in the Phoenix market. Brian's approach of SEO 1st Design has resulted in many businesses, particularly in the building trades such as contractors and plumbers, as well as law firms, to rank at the top of Google's results which keeps our customers happy, healthy, and profitable (you thought I was going to say wise didn't you?).

We continue to provide website design, website development, hosting, SEO services and digital marketing for Phoenix companies. More information about the company can be found on our About Us page. Click the following link for examples of our award winning website design work.
 

Recent Blog Posts

B2B Website Design Agency Selection

B2B website design is different from building a B2C website. This blog post reviews some of the differences and provides actionable tips in choosing the write B2B marketing agency for your needs.



Web Design Using WebP Images

Faster, faster! Everyone is in a hurry today and Google knows it. Their algorithm rewards faster loading pages.
That's why we've started using .WebP images in our website design projects. WebP images dramatically cut down on file sizes which means web pages load faster.