WebP format support with backward compatibility (support in IE, Safari)

Question

I am using Dianoga module (Thanks to Kam Figy) to optimize the images. At present looking to enable WebP format with backward compatibility (serving default image format for un-supported browsers)

Latest Dianoga version supports WebP format (Thanks to Anton). Everything works fine after following the steps in the documentation.

Issue: If first request comes from WebP supported browser, then optimization runs for WebP format, and cached under Media Cache folder. But subsequent requests from non-supported browsers are failing.

Analysis: There is no issue with Diagona module. When the second request comes from non-supported browser, it is matching the Item and Key, serving the image directly from cache, which is in WebP format.

Is there anyway to differentiate the requests with extension, so that supported image formats are served for the browsers.

In the .ini file already there is an entry for extension.

Can we add one more parameter under protectedMediaQueryParameters or any other way to differentiate the media request by extension? Is it the recommended approach?

   <protectedMediaQueryParameters>
      <parameter description="width" name="w"/>
      <parameter description="height" name="h"/>
      <parameter description="max width" name="mw"/>
      <parameter description="max height" name="mh"/>
      <parameter description="scale" name="sc"/>
      <parameter description="allow stretch" name="as"/>
      <parameter description="background color" name="bc"/>
      <parameter description="database name" name="db"/>
      <parameter description="ignore aspect ratio" name="iar"/>
      <parameter description="language code" name="la"/>
      <parameter description="thumbnail" name="thn"/>
      <parameter description="version number" name="vs"/>
      <parameter description="content database" name="sc_content"/>
      <parameter description="content language name" name="sc_lang"/>
      <parameter description="context site" name="sc_site"/>
      <parameter description="grayscale filter" name="gray"/>
      <parameter description="media revision" name="rev"/>
      <parameter description="image extension" name="extension"/>
    </protectedMediaQueryParameters>

Sitecore version: 8.2 Update 5 (170728) Dianoga version: 4.0.0

Answer 1

Yes, your idea is correct. Problem is that Sitecore media request protection removes extra parameter extension that is required for Dianoga WebP to work. After adding extension to protected media query parameters:

<parameter description="image extension" name="extension"/>

everything should work as expected. Pull request to Dianoga that fixes this issue was added.

Answer 2

I added the following to a patch config which fixed it for me:

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <mediaLibrary>
      <requestProtection>
        <customMediaQueryParameters>
          <parameter description="file extension" name="extension">
          </parameter>
        </customMediaQueryParameters>
      </requestProtection>
    </mediaLibrary>
  </sitecore>
</configuration>

It's probably more idiomatic to add to customMediaQueryParameters than protectedMediaQueryParameters. This is the conditional check in the MediaOptions class to show it works the same way:

if (!MediaOptions.KnownOptions.ContainsKey(key) && (!MediaManager.Config.RequestProtection.Enabled || MediaManager.Config.RequestProtection.QueryParametersToProtect.Contains(key) || MediaManager.Config.RequestProtection.CustomQueryParameters.Contains(key)))
{
    stringList.Add(key);
}