WebP Middleware and HMACSecretKey

Questions
1

Hi Forum :slight_smile:

Before Umbraco 17 we didn’t use HMACSecretKey, so we didn’t have a problem using a WebP Middleware which automatically checked if WebP was supported and appended the “format=webp” if it was.

But this is not the case anymore :slight_smile:
So we have begun using HMACSecretKey, but of course this will "alter” the URL after the HMAC has done it’s magic and then invalidating the Image URL.

How have you solved it the “issue” with serving WebP and using HMAC? :slight_smile:

2

hi Anders,

I have a webp middleware and HMAC on 17 and I haven’t seen the issue, Umbraco passes the secret to ImageSharp.Web so everything is calculated at the correct time, at least in my experience.

Matt

3

Sounds good :slight_smile:
Mine just won’t render the images and i keep getting errors in the console.

Can i ask how you done it or to post your middleware?

4

Sure thing :slight_smile:

Composer

services.Configure<ImageSharpMiddlewareOptions>(options =>
{
	// Capture existing task to not overwrite it
	var onParseCommandsAsync = options.OnParseCommandsAsync;
	options.OnParseCommandsAsync = async context =>
			{
				ImageProcessing.ConvertImageToWebP(context);
				ImageProcessing.PreventUpscaling(context);
				await onParseCommandsAsync(context);

			};
});

internal static void ConvertImageToWebP(ImageCommandContext context)
{
	if (IsWebpAbleImagePath(context.Context.Request.Path) == false) return;

	var acceptWebP = context.Context.Request.GetTypedHeaders().Accept.Any(aValue => aValue.MediaType.Value == WebpFormat.Instance.DefaultMimeType);
	if (acceptWebP == false) return;

	if (!context.Commands.Contains("format"))
	{
		context.Commands.Add("format", "webp");
	}

	if (!context.Commands.Contains("quality"))
	{

		context.Commands.Add("quality", "80");
	}
}

Results in <image-url>.png?rmode=pad&width=550&hmac=23b297fd0fa92a4937add52888355c85999d82a9f0b756d6f30e510393835c37

have you tried clearing your image cache, if ImageSharp already had images in the cache that might cause it?

5

I’m still having issues with images not showing on the frontend and Umbraco :see_no_evil_monkey:

Yeah i have deleted the whole temp folder aswell .. :slight_smile:

6

Webp support is widespread, so honestly, we only serve webp images these days.

However, if you want to support non-webp browsers, why don’t you simply create an image source set in the html with multiple formats? I agree that the html will get a little bigger, but you let the browser decide what it supports and what the correct size is that is needs. That saves on middleware processing time.

7

FWIW @AndersBrohus , I was working on this exact task just yesterday and was experiencing the same results.
We started out a new project on 17.1
We’re now on 17.2.2 and always convert all of our images to .webp
I followed the imaging settings documentation and all the images resulted in a 404.
I finally reverted the effort because i didn’t get to a timely victory, sigh!

Of note - it did not occur to me to try any other image formats so I didn’t think it was an .webp issue specifically.