Webp, serving next gen image formats with Umbraco

It's no secret we love Umbraco here at SteadyGo, fresh off the back of the Umbraco Gold Parter summit I thought I would give some tips on how to improve your page load speed, SEO and future-proof your Umbraco sites. Well...not some tips, one tip!

How can I do all those things with just one tip I hear you cry, with WebP of course! For those that don't know, WebP is a new(ish) image format developed by Google that supports both lossy and lossless image formats at much smaller sizes than JPEG or PNG. Google's page speed and web.dev tools recommend using next gen image formats to make images smaller and therefore load times lower. This can have a dramatic effect on bounce rate and improve your search rankings depending on your current setup.

So how do we use WebP with Umbraco? I'm going to give code samples using Umbraco 7 as 7 is probably what most people will be up updating to leverage WebP. It should be fairly trivial to convert these to Umbraco 8 however.

Umbraco uses the brilliant .NET Image Processor to handle resizing and processing images, luckily for us it can also help with serving WebP images. The first step is installing the WebP plugin for the Image Processor into your project using Nuget: https://imageprocessor.org/imageprocessor/plugins/webp/

Once we have that installed we are now able to convert other image formats into WebP. Image Processor comes with a set of handy events we can hook into to convert images to WebP on the fly.

Below is a simple implementation which will convert any JPEG, PNG or image with no format specified rendered using the Image Processor into a WebP image. This event is run every time an image is requested from the Image Processor, we intercept the "format" option and switch it to WebP which tells Image Processor to return that rather than the original image.

protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
{
    ImageProcessingModule.ValidatingRequest += (sender, args) =>
    {
        if (args.QueryString.Contains("format"))
        {
           args.QueryString.ReplaceMany(new Dictionary<string, string>()
           {
             {"jpg", "webp"},
             {"png", "webp"}
           });
        }
        else
        {
           args.QueryString += "&format=webp";
        }
    };
}

To use this on the front end ensure you use the Umbraco UrlHelper to generate the URL, if you simply use an image tag it wont work:

URLHelper.GetCropUrl(image, crop).ToString();

This is just the beginning of what you can do with the Image Processor and WebP, some other things you might want to look at: Fallbacks for older browsers, the WebP Accept Header and the other options for the Image Processor.

If you need any help implementing this on an Umbraco site or any other site for that matter give us a shout!