Webp Image not generating when azure CDN enabled (Sitecore 10.2 + JSS + SXA)

[MariaPloscar]

Version of Dianoga

We are on Sitecore 10.2 Docker Containers + JSS with NextJS + SXA and attempting to configure Dianoga 6.1.0

Environment description

Scaled environment.

What configs you have enabled

Dianoga.DisableForSites.config
Dianoga.Jpeg.config
Dianoga.Log.config
Dianoga.NextGenFormats.CDN.config
Dianoga.NextGenFormats.config
Dianoga.Png.config
Dianoga.Strategy.GetMediaStreamSync.config
Dianoga.Svg.config
z.01.Dianoga.NextGenFormats.WebP.config

Reproducible steps (1... 2... 3...) that cause the issue

It's working ok locally where we have CM container (XP0 topology).

But when deploying to Azure it's working ok on Preview/Experience Editor (CM container). But it's not working for CDs.

When accessing images with /-/media/ handler everything is ok. But for /-/jssmedia/ the images are not showed as image/webp content type.

We have replaced JSS media handler in web.config with custom one:

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

We have replaced sitecore_media handler. The transform web.config.xdt applied:

The Azure Rule engine "customAccept" was setup.

What you expected to see, versus what you actually saw

expected result : Images should convert to webp format
Actual result : Images are coming in same png and jpg format

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

Is there anything we are missing?

Relevant logs

@kamsar