Webp Image not generating when azure CDN enabled

Question

With Dianoga.WebP.config enabled, I replaced JSS media handler in web.config: with custom one:

using MediaRequestHandler = Sitecore.JavaScriptServices.Media.MediaRequestHandler;

public class JSSWebPMediaHandler : MediaRequestHandler
{
    protected override bool DoProcessRequest(HttpContext context, MediaRequest request, Media media)
    {
        if (context?.Request.AcceptTypes != null && context.Request.AcceptTypes.Contains("image/webp"))
        {
            request.Options.CustomOptions["extension"] = "webp";
        }
        return base.DoProcessRequest(context, request, media);
    }
},

Environment description Scaled environment

What configs you have enabled

Dianoga.DisableForSites.config,
Dianoga.Jpeg.config,
Dianoga.Png.config,
Dianoga.WebP.CDN.config ,
Dianoga.WebP.config,
Dianoga.Svg.configDianoga.Svg.config,
Dianoga.Strategy.GetMediaStreamSync.config

What you expected to see, versus what you actually saw expected result: Images should convert to webp format Actual result: Images are coming in the same png and jpg format

In a standalone environment without CDN the images are converting to webp images but in a scaled environment with Azure CDN images are not converting

Answer 1

If you are using Azure CDN (Microsoft) or Azure Front Door Classic with Azure CDN (Microsoft), Accept header is not passed to the Origin server. Dianoga needs Accept header to understand whether it supports nextgen image formats or not.

If the pages are not routed via Azure CDN, then Accept header will be passed to the origin server only for the page requests. Dianoga and Sitecore will generate the media link with Extension query param extension=webp,{other image formats}. If this query param is available, then Dianoga will be able to generate the webp format without reading the Accept header of media request.

Option 1: Upgrade Azure CDN to Verizon Premium (costly) and it passes the header back to Origin server and Dianoga will be able to optimize and send the webp Images.

Option 2: If you have a rule engine in your CDN, create a rule to send the Accept header in a different header name and use that header name in Dianoga to generate the webp format. This needs a rule engine before the requests hit the Azure CDN.
Option to enable webp format using Azure CDN

Answer 2

have you checked Dianoga documentation here: https://github.com/kamsar/Dianoga#optimization-strategies?

On which version of Dianoga you are? It seems you need to enable Dianoga.NextGenFormats.CDN.config:

If you run Sitecore under CDN: review and enable Dianoga.NextGenFormats.CDN.config.disabled. It will add ?extension= <list of supported extensions> query parameter to all images present on your pages.

Hope it helps!

Answer 3

There are 2 different ways to get this to work correctly with a CDN:

1. Through the Accept header. Based on your question it seems like this is the approach you are trying to use. You will have to configure your CDN to properly handle the Accept header. I'm not familiar with Azure CDN but I had to configure my CDN to include this header in the cache key.
2. Through the extension=webp query string, this is also one of the key features which Dianoga.WebP.CDN.config adds. However your custom MediaRequestHandler does not check this querystring. If this is your approach you will have to update your code in JSSWebPMediaHandler. You can use the Dianoga MediaRequestHandler as an example and see what this method call does.