According to this thread, WebP support is close but not released yet (a development build is available from their MyGet):

https://github.com/SixLabors/ImageSharp/issues/121

Hi Greg

Thanks for the reply, ImageSharp V2.0 is now released and Umbraco updated ImageSharp.Web to V1.05

I just can't get it to work, commands are here https://docs.sixlabors.com/articles/imagesharp.web/processingcommands.html#format with

{PATH_TO_YOUR_IMAGE}?format=webp

The error I get is below:
System.MissingMethodException: Method not found: 'System.Threading.Tasks.Task`1<SixLabors.ImageSharp.Formats.IImageFormat> SixLabors.ImageSharp.Image.DetectFormatAsync(SixLabors.ImageSharp.Configuration, System.IO.Stream)'.
   at SixLabors.ImageSharp.Web.Middleware.ImageSharpMiddleware.ProcessRequestAsync(HttpContext context, IImageResolver sourceImageResolver, ImageContext imageContext, IDictionary`2 commands)
   at System.Runtime.CompilerServices.AsyncMethodBuilderCore.Start[TStateMachine](TStateMachine& stateMachine)
   at SixLabors.ImageSharp.Web.Middleware.ImageSharpMiddleware.ProcessRequestAsync(HttpContext context, IImageResolver sourceImageResolver, ImageContext imageContext, IDictionary`2 commands)
   at SixLabors.ImageSharp.Web.Middleware.ImageSharpMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Diagnostics.StatusCodePagesMiddleware.Invoke(HttpContext context)
   at StackExchange.Profiling.MiniProfilerMiddleware.Invoke(HttpContext context) in C:\projects\dotnet\src\MiniProfiler.AspNetCore\MiniProfilerMiddleware.cs:line 119
   at Umbraco.Cms.Web.Common.Middleware.UmbracoRequestMiddleware.InvokeAsync(HttpContext context, RequestDelegate next)
   at Microsoft.AspNetCore.Builder.UseMiddlewareExtensions.<>c__DisplayClass6_1.<<UseMiddlewareInterface>b__1>d.MoveNext()
--- End of stack trace from previous location ---
   at Umbraco.Cms.Web.Common.Middleware.PreviewAuthenticationMiddleware.InvokeAsync(HttpContext context, RequestDelegate next)
   at Microsoft.AspNetCore.Builder.UseMiddlewareExtensions.<>c__DisplayClass6_1.<<UseMiddlewareInterface>b__1>d.MoveNext()
--- End of stack trace from previous location ---
   at Umbraco.Cms.Web.Common.Middleware.UmbracoRequestLoggingMiddleware.InvokeAsync(HttpContext context, RequestDelegate next)
   at Microsoft.AspNetCore.Builder.UseMiddlewareExtensions.<>c__DisplayClass6_1.<<UseMiddlewareInterface>b__1>d.MoveNext()
--- End of stack trace from previous location ---
   at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

George

Umbraco.Cms.Web.Common v9.3.0 has a dependency for SixLabors.ImageSharp.Web v1.0.5, which has a dependency for SixLabors.ImageSharp v1.0.4.

Webp support was just introduced a few days ago in version 2.0 of ImageSharp.

Anytime I try to upgrade these 2 packages from SixLabors to their latest and greatest (2.0) my site blows up and shows me the exact error message you've posted above. Anytime I try to engage with ImageSharp (example: resize an image) I'm met with the same exact error.

Now a few months ago I pulled in the dev branch of ImageSharp and got webp support. I had to download it and reference it in my solution to do so. I'll see if I can repeat the steps to get it to work.

Hi Mark

Thanks for the reply, if you can let me know how you get on that will be great

George

So previously, I was able to do this because there were no breaking changes. Moving from ImageSharp.Web v1.0.4 to v2.0(alpha) has resulted in some other things that need to be fixed first.

Upgrade SixLabors.ImageSharp.Web

I updated the nuget package to v2.0.0-alpha.0.18. This resulted in just a few errors in the build, taken care of below:

(1) UmbracoBuilderExtensions

There used to be an ImageSharp setting named CachedNameLength and this needs to be updated to CacheHashLength. I assumed that this property is the same logically, so I just renamed it quickly for testing.

(2) CropWebProcessor

The method definition (?) for Process has changed. Instead of a Dictionary of values for the commands, it uses CommandCollection. Quick update again.

Webp works great now but...

I'm just a frontend guy. I can't tell you exactly when 2.0 will have a real release, and I don't know what (if any) testing needs to be done in Umbraco before they'll accept a PR.

You will have to wait for Umbraco v10 for official ImageSharp v2 and WebP support. However, it's possible to make "special" NuGet packages that can be installed to your solution. I have these for Umbraco v9.2.0 & just added (and tested v9.3) available at https://github.com/Jeavon/Slimsy/tree/feature/ImageSharp2/LocalNugetPackages

This is using ImageSharp.Web 2.0.0-alpha.0.16 - you will need to add a NuGet.config like this https://github.com/Jeavon/Slimsy/blob/feature/ImageSharp2/NuGet.config

Also worth noting is that it's likely the Storage Provider package https://github.com/umbraco/Umbraco.StorageProviders will require some changes before being v2 compatible if you go down this road and I've not got there yet....

Hi All

Rolled back ImageSharp to 1.0.4, as V2 does not display the image uploaded in the media folder BackOffice

Regards George

If anyone comes across this post, below is a quick fix for adding WebP images to Umbraco 9, the code below works with the MediaPicker3, I have not had time to work out using it with the image cropper. But for the time being this works, I wrote a quick blog about it at https://www.intuwebdesign.com/blogs/umbraco-cms/how-to-add-webp-support-to-umbraco-9/ and the code is

using System.IO;
using ImageMagick;
using Microsoft.AspNetCore.Hosting;
using Newtonsoft.Json;
using Umbraco.Cms.Core.Events;
using Umbraco.Cms.Core.Models;
using Umbraco.Cms.Core.Notifications;
using Umbraco.Cms.Core.Services;

namespace Web.Controller.UmbracoBackoffice
{
    public class ImageSrc
    {
        public string Src { get; set; }
    }
    public class SubscribeToMediaSavedNotifacations : INotificationHandler<MediaSavedNotification>
    {
        private readonly IMediaService          _iMediaService;
        private readonly IWebHostEnvironment    _iHostingEnvironment;

        public SubscribeToMediaSavedNotifacations(IMediaService mediaService, IWebHostEnvironment hostingEnvironment)
        {
            _iMediaService          = mediaService;
            _iHostingEnvironment    = hostingEnvironment;
        }

        public void Handle(MediaSavedNotification notification)
        {
            foreach (var mediaItem in notification.SavedEntities)
            {
                if (mediaItem.ContentType.Alias.Equals("Image"))
                {
                    var id      = mediaItem.Id;
                    IMedia media    = _iMediaService.GetById(id);
                    var jsonUrl     = media.GetValue("UmbracoFile").ToString();

                    if (jsonUrl != null)
                    {
                        var originalImage = JsonConvert.DeserializeObject<ImageSrc>(jsonUrl);
                        if (originalImage != null)
                        {
                            string relativeImagePath         = originalImage.Src;
                            string currentDirectory          = Path.GetDirectoryName(relativeImagePath);
                            string imageNameWithExt          = Path.GetFileName(relativeImagePath);
                            string imageNameNoExt            = Path.GetFileNameWithoutExtension(imageNameWithExt);
                            string pathToWwwRoot             = Path.Combine(_iHostingEnvironment.ContentRootPath, "wwwroot");

                            var fullImagePathAndNameWithExt  = $"{pathToWwwRoot}{currentDirectory}\\{imageNameWithExt}";
                            string pathToImageFolder         = $"{pathToWwwRoot}{currentDirectory}";

                            using var createWebpImage        = new MagickImage(fullImagePathAndNameWithExt);
                            string pathToNewImage            = pathToImageFolder;
                            string newWebpImage              = $"{pathToNewImage}\\{imageNameNoExt}.webp";
                            createWebpImage.Format           = MagickFormat.WebP;

                            createWebpImage.Write(newWebpImage);
                            notification.Messages.Add(new EventMessage("success", "Created WebP Image", EventMessageType.Success));
                        }
                        else
                        {
                            notification.Messages.Add(new EventMessage("error", "Default image is NULL", EventMessageType.Error));
                        }
                    }
                    else
                    {
                        notification.Messages.Add(new EventMessage("error", "Default image not in JSON format", EventMessageType.Error));
                    }
                }

            }
        }
        public void Terminate() { }
    }
}

If you delete the image from the CMS, remember to hook it into the

INotificationHandler<MediaDeletedNotification> and also delete the WebP image

ImageSharp.Web 2 was released, but it's not working with umbraco 9.3

Getting an exception on application start:

TypeLoadException: Method 'Process' in type 'Umbraco.Cms.Web.Common.ImageProcessors.CropWebProcessor' from assembly 'Umbraco.Web.Common, Version=9.3.1.0, Culture=neutral, PublicKeyToken=null' does not have an implementation.
Unknown location

ReflectionTypeLoadException: Could not load all types from "Umbraco.Web.Common, Version=9.3.1.0, Culture=neutral, PublicKeyToken=null" due to LoaderExceptions, skipping:
. System.TypeLoadException on Umbraco.Cms.Web.Common.ImageProcessors.CropWebProcessor: Method 'Process' in type 'Umbraco.Cms.Web.Common.ImageProcessors.CropWebProcessor' from assembly 'Umbraco.Web.Common, Version=9.3.1.0, Culture=neutral, PublicKeyToken=null' does not have an implementation.

is working on a reply...