Automatically serving WebP images in Umbraco

Make your Umbraco site faster by automatically serving images in WebP format, using Image Processor events

Why WebP?

WebP is a well-supported image format (with approximately ~80% support) and can often provide up to an additional 30% reduction in size over a typical JPEG. I use this approach on every site that I work on because it works both lossy and losslessly, supports alpha channels which protects your PNGs, and combines really well with some form of lazy loading. These technologies combine to create a fantastic image experience on your site with minimal effort.

You can even use this technique to get a better Lighthouse score on your Umbraco site, as one of the criteria Google grade you against, is the use of Next Gen Image Formats, such as WebP. With this in mind, there is a theory that by pleasing Google in this way, you get a better score with Lighthouse, and thus you may even help your rankings! But I have no evidence for this, still, its good to get a better score with the Lighthouse Audit.

You can read in more detail about it on Google's page for it here.

I span up a fresh version of Umbraco 8.2.1, and then loaded the default starter kit, and then recorded the weight of the products page, which as you can see from the images below, the first (using JPEG) is around 2.43MB, compare this to the same page and same content, but with the images being served as WebP, (the image after) we come down to 953kb! Furthermore, if you add a quality parameter of 80, that comes down even further to 504kb, for images that look just as good as the originals! No brainer.

Starter Kit Product page using JPEG - 2.44MB

Starter Kit Product page using JPEG - 2.44MB

Starter Kit Products page using WebP - 958KB

Starter Kit Products page using WebP - 958KB

Setup

Umbraco ships with Image Processor as part of the core, its built by James South. however WebP is an additional plugin that will need to be loaded in separately. It's on Nuget here or simply Install-Package ImageProcessor.Plugins.WebP - just double check the dependencies before you install anything!

It is worth noting that WebP also requires your project to have ImageProcessor.Web installed. Visual Studio offers to install this for you, when you start using code that requires it, so this should be straightforward. Alternatively that's here, and also available via Install-Package ImageProcessor.Web

Its this package that we use to hook into the event that we need for this to work, before we then rely on the WebP plugin for the conversion.

V8

In Umbraco v7 we relied upon IApplicationEventHandler to bootstrap the code, but in Umbraco v8 we have to use Composers and Components instead.

The steps that we are going to follow are:

  • Append our component to the collection of Components (meaning it will run last)
  • Hook into the ImageProcessingModule_ValidatingRequest
  • Check if the image is a GIF by interrogating the media extension (if this is the case then we terminate the process as GIFs while being seemingly supported, when I use in this fashion, they freeze up)
  • In the case that we don't have a GIF, we capture the current querystring of the URL
  • Check the browser's Request AcceptType Headers for "image/webp", which in your browser might look something like Accept: image/webp,*/*
  • If the check is positive i.e. not null, we know the device in question can display a WebP, so then the final stage is removing the format query string, and swapping in the WebP format query
  • There is then a final additional step, whereby we have to move (if we have one) the quality query, to the end, so that it works, otherwise it will be ignored if it comes before our format query! This way, you can simply append your quality preference, or apply it with GetCropUrl(cropAlias: "Background", quality: 1) or GetCropUrl(cropAlias: "Large Background", furtherOptions: "&quality=1") it will all work.
It is worth noting that this for me is a work in progress, and I have some reservations about the requirement to remove the querystring before you set it. This requires more defined testing and in the meantime I will include the querystring removal in the sample code here, but I suspect you can get by without it.

 

using ImageProcessor.Web.Helpers;
using ImageProcessor.Web.HttpModules;
using System.Linq;
using System.Web;
using Umbraco.Core;
using Umbraco.Core.Composing;

namespace my_site_core
{
    public class SubscribeToContentServiceSavingComposer : IUserComposer
    {
        public void Compose(Composition composition)
        {
            composition.Components().Append();
        }
    }

    public class SubscribeToContentServiceSavingComponent : Umbraco.Core.Composing.IComponent
    {
        public void Initialize()
        {
            ImageProcessingModule.ValidatingRequest += ImageProcessingModule_ValidatingRequest;
        }

        private void ImageProcessingModule_ValidatingRequest(object sender, ValidatingRequestEventArgs e)
        {
            if (!e.Context.Request.Url.AbsolutePath.EndsWith(".gif"))
            {
                var queryString = HttpUtility.ParseQueryString(e.QueryString);
                if (e.Context.Request.AcceptTypes != null && e.Context.Request.AcceptTypes.Contains("image/webp"))
                {
                    queryString.Remove("format");
                    queryString["format"] = "webp";
if (queryString.Get("quality") != null)
{
string quality = queryString["quality"];
queryString.Remove("quality");
queryString["quality"] = quality;
} } e.QueryString = queryString.ToString(); } } public void Terminate() { } } }

V7

The process here is identical once we meet the image logic and onwards. However, we are using the IApplicationEventHandler to bootstrap the start-up code, and then the same ValidatingRequest action is run. This looks like this:
using ImageProcessor.Web.Helpers;
using ImageProcessor.Web.HttpModules;
using System.Linq;
using System.Web;
using Umbraco.Core;

namespace my_site_core
{
    public class WebPLoader : IApplicationEventHandler
    {

        public void OnApplicationInitialized(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
        {

        }

        public void OnApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
        {
            ImageProcessingModule.ValidatingRequest += ImageProcessingModule_ValidatingRequest;
        }

        private void ImageProcessingModule_ValidatingRequest(object sender, ValidatingRequestEventArgs e)
        {
            if (!e.Context.Request.Url.AbsolutePath.EndsWith(".gif"))
            {
                var queryString = HttpUtility.ParseQueryString(e.QueryString);
                if (e.Context.Request.AcceptTypes != null && e.Context.Request.AcceptTypes.Contains("image/webp"))
                {
                    queryString.Remove("format");
                    queryString["format"] = "webp";
if (queryString.Get("quality") != null)
{
string quality = queryString["quality"];
queryString.Remove("quality");
queryString["quality"] = quality;
} } e.QueryString = queryString.ToString(); } } public void OnApplicationStarting(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext) { } } }

Things to remember

Unfortunately, it's not all sunshine and WebP rainbows, and there are a couple things you should keep in mind:

WebP doesn't work on Internet Explorer. We have coded here with a safety net which ensures that IE will simply not load our new format and instead revert to it's default behaviour, so not all is lost.

The only other quirk, is that the WebP parameter is not visible in rendered source - if I inspect my own photo down below, I get something like /media/5hlfuguw/20191028_093959.jpg&width=150&height=150&rnd=132167532890100000 and as you can see, no format=webp in sight. Including the WebP parameter here would be how you could achieve this manually.

To check that all is functioning as expected is to open your developer tools, head to network, and refresh, then watch the resources load in (where possible) as WebP - see sample log below. As expected, the GIFs are ignored!

Firefox Developer Console Network tab.

Firefox Developer Console Network tab.

Thanks for reading!

This technique was brought to my attention by Matthew Wise so a big shout out to him! I was also helped by the community to adapt it for Version 8, and I hope you find something useful here!
The Boring Stuff
...

This post was brought to you by Kieron, published on 28 Oct 2019

Spread It