WebP - Advanced image optimization using ASP.NET MVC

Most modern web pages contain a lot of images. These images often make up the bulk of a web page request. According to the HTTPArchive, images make up over 50% of the average web page and if you are looking to optimize on the performance of your web page, the best place to start is often with the images on your page. By optimizing your images and simply reducing the amount of bytes that your users are downloading, you can drastically improve your page load times.

There are some great tools out there that will allow you to optimize and compress your images, but you can only optimize your images to a certain extent before they start to lose their quality. It's about time we start looking at newer formats of images in order to decrease their file size, yet still maintain the image quality. This is where the WebP format comes in. It is pronounced as 'weppy' and is a new image format that was developed by the team at Google.

WebP images are 26% smaller in size compared to PNGs and are 25-34% smaller in size compared to JPEG images. That is a massive saving! Google use WebP images instead of PNG images in Picasa, Gmail and its Chrome Web Store. Given the number of requests Chrome Web Store serves, this adds up to several terabytes of savings every day! As a web developer, you can use the WebP image format to create smaller and richer images that can help make the web faster. In order to compare the differences in image size, let's compare the following PNG below:

The image above is a PNG image that has a file size of 12KB. If I take this same image and convert it to WebP, it comes in at 4KB - that's almost a third of the size. Imagine being able to make that saving on each image in your website without compromising on quality!

While WebP images are awesome, unfortunately they are not without their limitations. WebP images are only currently supported in Google Chrome, Opera, Android, and Google Chrome Frame plugin for Internet Explorer. I still think that we should provide our users with the best and fastest browsing experience possible, so why not still offer this option to users that are capable of viewing WebP images?

In this article, I am going to run through an example that will show you how to create a simple HTML helper that you can use in your ASP.NET MVC applications to serve WebP images to browsers that are capable of handling them. In the case when the browser isn't capable of serving the images, it will simply fall back to its default image type. This simple change will reduce the size of the images on your page and improve your load times.

In order to get started with WebP images, you first need to download the encoder from the Google developer’s website.

The encoder allows you to easily encode most image formats into their WebP equivalent using a command line tool. Once you have downloaded the pack, it contains a set of tools that will allow you to encode and decode images into WebP format. The pack also contains a decent readme file that will get you up and running. The pack contains a tool called cwebp.exe which accepts the following syntax:

cwebp input.png -o output.webp

Once you fire up the command line and run the tool, pass it the original image and the name you would like it to output the WebP image to. It will produce a result similar to the following image:

Now that our image that has been converted into a WebP image, we can build a helper that will determine whether or not to display a WebP image or the original PNG image. I am going to steal/re-use some code that I wrote about in a previous article.

First up, we need to write a method that will detect if the browser is capable of handling WebP images.

The above method will detect if the current browser is Chrome, Opera, or Android. If true, it will return a Boolean notifying us that we can return the WebP image instead. Next, we need to create an HTML helper method that will return the path of the WebP format image depending on the browser capabilities.

The method above will detect if the browser is capable of handling WebP images and then replace the extension on the file with the new ".webp" extension. In order to use this Html helper, you simply need to call it in your view like so:

@Html.DrawImage("/content/images/visualstudio.png","Visual Studio")

We are almost there. If you hit F5 and fire up your application, you will see something similar to the following image:

The image isn't quite showing up correctly, and if you navigate directly to the link in Chrome, you will receive a HTTP 404.3 error. "HTTP Error 404.3 - Not Found The page you are requesting cannot be served because of the extension configuration".

This is happening because the browser doesn't know how to interpret the WebP image because the mime type hasn't been sent through with it from the server. In order to rectify this, we simply need to add the MIME type to the Web.Config file.

When the MIME mapping has been added to your Web.Config, IIS will send this MIME type back with the WebP image request and the browser will understand how to display the image. After adding the config settings, fire up the application and tadaaaa!

If you use this HTML helper in your application, it will automatically determine whether or not to display the WebP equivalent image to your users or not. You will need to keep a copy of both the WebP image and the original image (PNG, JPG, and GIF) in order for this example to work. WebP images are still in their infancy, but I would like to see them being adopted by more and more websites. They are a great way to serve quality images to your users without compromising on quality.

If you would like to download a copy of the source code used in this example, it is available via the following link.