jpeg and all other formats works fine, except all pngs. Don't know if i ever had issue with that before.

Here the exact same image on .framework (umbraco 8) https://www.gympartner.nu/media/nw3dmqcc/gympartnervit.png?format=webp

I did a workaround for now on it, (thanks @Kamil for the tip)

services.AddImageSharp(options =>
        {
            options.OnParseCommandsAsync = c =>
            {
                bool wantsformat = c.Commands.TryGetValue("format", out string value);                   

                if (wantsformat)
                {
                    bool isPng = c.Context.Request.Path.Value.Contains(".png");

                    if (isPng && value == "webp")
                        c.Commands.Remove("format");
                }
                return Task.CompletedTask;
            };
        });

aerksn,

I think in general you're losing performance with this as I think your logo is a bit of a special case. The WebP optimization for other png images should still be (very) helpful.

In your code you're removing format - so you're "reverting" developer intent (I assume you're appending the ?format= to every image src?)

How about doing this in another way. You can implement for example a middleware:

public class WebPMiddleware
{
    private readonly RequestDelegate _next;

    public WebPMiddleware(RequestDelegate next)
    {
        _next = next;

    }

    public async Task Invoke(HttpContext httpContext)
    {
        if (IsImageRequest(httpContext) &&
            httpContext.Request.GetTypedHeaders()?.Accept != null 
            && httpContext.Request.GetTypedHeaders().Accept.Any(aValue => aValue.MediaType.Value == "image/webp"))
        {
            var updatedQueryString = GetUpdatedQueryString(httpContext);

            var qb1 = new QueryBuilder(updatedQueryString);

            httpContext.Request.QueryString = qb1.ToQueryString();
        }

        await _next(httpContext);
    }

    private bool IsImageRequest(HttpContext httpContext)
    {
        var path = httpContext.Request.Path.ToString();

        return path.EndsWith("png") || path.EndsWith("jpg") || path.EndsWith("jpeg");
    }

    private List<KeyValuePair<string, string>> GetUpdatedQueryString(HttpContext httpContext)
    {
        var queryitems = httpContext.Request.Query.SelectMany(x => x.Value, (col, value) => new KeyValuePair<string, string>(col.Key, value)).ToList();
        var queryParameters = new List<KeyValuePair<string, string>>();

        foreach (var item in queryitems)
        {
            var value = item.Value;

            if (item.Key == "format")
            {
                value = "webp";
            }

            var newQueryParameter = new KeyValuePair<string, string>(item.Key, value);

            queryParameters.Add(newQueryParameter);
        }

        if (!queryParameters.Any())
        {
            queryParameters.Add(new KeyValuePair<string, string>("format", "webp"));
        }

        return queryParameters;
    }
}
public static class WebPMiddlewareExtensions
{
    public static IApplicationBuilder UseWebP(this IApplicationBuilder builder)
    {
        return builder.UseMiddleware<WebPMiddleware>();
    }
}

use it:

        app.UseWebP();

        app.UseImageSharp();

and then transform your code to something else:

     services.AddImageSharp(options =>
    {
        options.OnParseCommandsAsync = c =>
        {
            bool doesntWantFormat = c.Commands.TryGetValue("noformat", out string value);                   

            if (doesntWantFormat)
            {
                    c.Commands.Remove("format");
            }
            return Task.CompletedTask;
        };
    });

and then WebP works by default for all images except the ones you want to have it disabled, like this:

https://appnitecloud.azurewebsites.net/media/c1cn1kpg/gympartnervit.png?noformat=true

I tested the above code and it works - just a random saturday idea :)

Hey, this solution works great. Thanks for sharing. One thing I've found however with both solutions is that neither works when you enable CDN URL with the Azure Blob Storage. Any ideas on how to get the WEBP functionality working when utilizing the CDN URL as well?

I'm glad you like it!

I'm not utilising CDN in my project so unfortunately I can't play with it without doing some more setting up for which I don't have time today but I have an idea.

The first thing that came into my mind is that you might need to implement custom image provider - more in the links:

https://our.umbraco.com/forum/using-umbraco-and-getting-started/108123-umbraco9-local-and-remote-images

https://github.com/SixLabors/ImageSharp.Web/discussions/167

Let us know how you get on!

Thanks for the reply and thanks to all of you for your tips. I've tried and tried different approaches to get to a good solution that works for me.

After some digging in the encoder i found "Image.PixelType.BitsPerPixel" and found a correlation between png and jpegs.

The jpges are 24px and pngs are 32px, in that way i could sepparate them. And depending on that use different compression types. Which made it all work. Haha, 🙌

So now i'm getting the images in correct size.

Idon't auctually know what i'm doing but it works... haha

     services.AddImageSharp(options =>
        {
            options.OnBeforeSaveAsync = c =>
            {
                if(c.Encoder.GetType().Name == "WebpEncoder"){
                    c.Encoder = new WebpEncoder()
                    {
                        FileFormat = c.Image.PixelType.BitsPerPixel < 30 ? WebpFileFormatType.Lossy : WebpFileFormatType.Lossless,                          
                    };
                }                 
                return Task.CompletedTask;
            };
        });

(btw you can edit all properties in the encoder object as well if you want to tweak it even more)

I believe the 32 bits per pixel has to do with transparency: an additional 8 bits for the alpha channel. So I guess it's a good way to determine if a PNG contains transparency. However, I'm not sure if using Lossless WebP encoding for 32 bpp images will always result in a smaller image than the original PNG. It may depend on the image, see the following discussion:

https://github.com/SixLabors/ImageSharp/discussions/1957

Have you experienced any issues with your code? Or did all the JPG and PNG images that you run through this code have a smaller WebP encoded image?

Thank you for the tip, it looks like that worked!

Could you share the problematic PNG image? I'd like to do some testing.

WEBP also offers transparency, so you could avoid using PNG altogether.

The hack mentioned earlier gave me a good result with that sample file:

services.AddImageSharp(options =>
        {
            options.OnBeforeSaveAsync = c =>
            {
                if(c.Encoder.GetType().Name == "WebpEncoder"){
                    c.Encoder = new WebpEncoder()
                    {
                        FileFormat = c.Image.PixelType.BitsPerPixel < 30 ? WebpFileFormatType.Lossy : WebpFileFormatType.Lossless,                          
                    };
                }                 
                return Task.CompletedTask;
            };
        });

content-length: 14698

Thanks Arjan,

I was forcing to Lossy, not to Lossless and not testing the bit depth - i just assumed Lossy would always be smaller than Lossless, only clicked when I was testing after your reply! :)

Did you try this solution? This code still needs some tweaking though, because I noticed it also caused excessive compression for JPEG images, resulting in low quality WEBP images.

Hi. Yeah I added the fix but didn't notice any difference at all.

services.AddImageSharp(options =>
        {
            options.OnParseCommandsAsync = c =>
            {
                if (c.Context != null)
                {
                    if (c.Context.Request.GetTypedHeaders().Accept
                        .Any(aValue => aValue.MediaType.Value == "image/webp"))
                    {
                        var path = c.Context.Request.Path.ToString();

                        if (!c.Commands.Contains("webp") ||
                            !c.Commands.Contains("noformat") && path.EndsWith("png") || path.EndsWith("jpg") ||
                            path.EndsWith("jpeg"))
                        {
                            c.Commands.Remove("format");
                            c.Commands.Add("format", "webp");
                            c.Context.Response.Headers.Add("Vary", "Accept");
                        }
                    }
                }

                bool doesntWantFormat = c.Commands.TryGetValue("noformat", out string value);

                if (doesntWantFormat)
                {
                    c.Commands.Remove("format");
                }

                return Task.CompletedTask;
            };
            options.OnBeforeSaveAsync = c =>
            {
                if (c.Encoder.GetType().Name == "WebpEncoder")
                {
                    c.Encoder = new WebpEncoder
                    {
                        FileFormat = c.Image.PixelType.BitsPerPixel < 30 ? WebpFileFormatType.Lossy : WebpFileFormatType.Lossless,
                    };
                }
                return Task.CompletedTask;
            };
        });

Could you share one of the PNG's that becomes very big when converted to WEBP?

Here's one. I hope Pasteboard hasn't done anything with it while uploading. I dont think so, because it has the same bytesize.

https://pasteboard.co/S2cWsEbhSJAg.png

Thanks Arjan! N00b me hadn't cleared the mediacache folder, so the image got smaller for me to!

I noticed though that the company logo that is a transparent png gets converted to a completely white image. Any idea what could be going on there?

Which company logo are you referring to? The GymPartner logo? In that case I have no idea why you're getting a completely white image. In my test project the image worked fine with both the Url() and GetCropUrl() methods: