An automatic image optimizer for the Sitecore media library. Reduce the size of your images served from Sitecore by 8-70%, completely automatically.
When media images are requested, Dianoga automatically runs mozjpeg, PNGOptimizer, SVGO or WebP on the image data immediately after it is placed in the Sitecore media cache
WebP is is an image format employing both lossy and lossless compression. It is currently developed by Google, based on technology acquired with the purchase of On2 Technologies. WebP file size is 25%-34% smaller compared to JPEG file size and 26% smaller for PNG. All evergreen browsers except Safari currently support WebP.
The browser sends a request to the server to get an image. If the browser supports WebP image format, it sends ‘image/webp’ value in the Accept header. It is possible to detect this header on the server and return the WebP image to the browser instead of JPEG or PNG. If the browser doesn’t support WebP then other image optimizers are executed if they are enabled.
Refer to my post on how to configure Dianoga for a Sitecore solution, then perform the below steps.
Enable the config Dianoga.WebP.config.disabled config by renaming it.
Change any configurations in the file, if needed. The parameters being passed to the optimizers can be changed as required.
Go to the Properties of the file, Dianoga.WebP.config in Visual Studio and change Build Action from Noneto Content. This will deploy the config file when the project is published.
Open Web.config and change line:
<add verb="*" path="sitecore_media.ashx" type="Sitecore.Resources.Media.MediaRequestHandler, Sitecore.Kernel" name="Sitecore.MediaRequestHandler" />To
<add verb="*" path="sitecore_media.ashx" type="Dianoga.MediaRequestHandler, Dianoga" name="Sitecore.MediaRequestHandler" />If you use SXA, then change it to:
<add verb="*" path="sitecore_media.ashx" type="Dianoga.MediaRequestHandlerXA, Dianoga" name="Sitecore.MediaRequestHandler" />If you want to use transform files, you can use the below code:
<handlers>
<add xdt:Transform="Replace" xdt:Locator="Match(name)" name="Sitecore.MediaRequestHandler" verb="*" path="sitecore_media.ashx" type="Dianoga.MediaRequestHandler, Dianoga" />
</handlers>
<!-- For SXA, use the below lines -->
<handlers>
<add xdt:Transform="Replace" xdt:Locator="Match(name)" name="Sitecore.MediaRequestHandler" verb="*" path="sitecore_media.ashx" type="Dianoga.MediaRequestHandlerXA, Dianoga" />
</handlers>If you use a Custom Media Handler, then refer to this file for changes to be accommodated.
If you serve your media through a CDN, enable Dianoga.WebP.CDN.config.disabled. Review the config file to check if you need to customize anything.
Also, you can enable
Dianoga.Strategy.GetMediaStreamSync.config.disabled
and disable Dianoga.Strategy.MediaCacheAsync.config.
This will cause optimization to occur synchronously as the media is first requested, which is appropriate if the media is being sent to a CDN. This may however cause a delay for the first hit user before they start seeing images.
Go to the Properties of the file, Dianoga.WebP.CDN.config in Visual Studio and change Build Action from Noneto Content. This will deploy the config file when the project is published.