CODEWITHSUNDEEP
azuresitecorewebpazure-cdnsitecore9
Mykyta
Mykyta

Reputation: 1

Sitecore - WebP image not getting generated from CDN with Dianoga tool

Version of Dianoga 5.4.1

Environment description Sitecore.NET 9.3.0 .NET Framework 4.7.2

What configs you have enabled

Web.config changes: I`ve replaced in sitecore_media.ashx type to "Dianoga.MediaRequestHandler, Dianoga" name="Sitecore.MediaRequestHandler"

What you expected to see, versus what you actually saw

Expected: To see images being pulled down in webp format

Actual: Images are received in original formats (jpeg, png, etc), but not in webp.

Logs files: All logs files are empty.

Comments After deploy on CD in Azure MediaProvider adds extension webp as a URL param. This should trigger the webp optimizer in the MediaRequestHandler. But the MediaProvider doesn’t appear to run. On my local envirement I don`t use CDN and Dianoga works fine. And I am probably missing something?

Upvotes: 0

Views: 1061

Answers (3)

Pinpaho
Pinpaho

Reputation: 185

So I just implemented this on my Sitecore environment with a CDN and it's awesome! These are my steps:

The image link above is a screenshot that has the parameters of the rule you need to create in your CDN. By default CustomAccept is what Dianoga calls the custom header. That value is set in your CDN config and you can change it to whatever you want or leave it, doesn't matter. The only thing that matters is that the setting value in your config matches what you target in your CDN rule.

If you have any questions beyond this what really helped me is actually reading the readMe on Dianoga's github page. That should answer the rest of your questions (as well as the article linked above the image link)

IF YOU'RE DOING THIS WITHOUT A CDN MAKE SURE TO DELETE THE MEDIACACHE FOLDER IN APP DATA. Dianoga talks about this in their steps on their github page. Since sitecore pulls from cache, it will pull images already there even if webP works and gets created already. You have to wipe it so that webP is the only thing in there. If you use a CDN you don't have to worry about this and maybe the worst is wiping your CDN cache.

Upvotes: 0

Nehemiah Jeyakumar
Nehemiah Jeyakumar

Reputation: 147

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

Upvotes: 0

Kartik Bhiwapurkar
Kartik Bhiwapurkar

Reputation: 5165

• Your image files are not getting converted because there might be a conflict in the Sync/Async strategy. Also, since the ‘Dianoga.WebP.CDN.config’ configuration in the CDN is enabled, you will have to disable the ‘Dianoga.Strategy.MediaCacheAsync.config’ setting.

Also, ensure that ‘MediaOptimization’ is enabled by enabling the ‘Dianoga.Strategy.GetMediaStreamSync.config.disabled’ config setting and the one stated above. This will ensure that the optimization will occur synchronously when the images are requested, thus ensuring the successful conversion of image files.

• Please check the ‘Accept’ header configured in the CDN to be included in the cache key as the list of accepted media formats is mentioned in this header. This header tells which image format conversions are possible. For e.g.: - the header can be ‘image/avif,image/webp,image/apng,image/*,*/*;q=0.8’ which means that the browser supports ‘WebP’ image format.

Also, as stated by you in the question, you seem to have enabled the ‘Next-gen formats support’, but in that too, you will have to change the line ‘’ to ‘’ in the web.config file.

For more details, kindly refer to the below documentation link for more steps to be followed regarding this: -

https://github.com/kamsar/Dianoga#optimization-strategies

Upvotes: 0

Related Questions