Images are not converted to .webp automatically

Question

I'm trying to convert all images of a website built with UmbracoCMS (v7.15.7) by using the ImageProcessor Library defined in this article: https://piotrbach.com/enable-webp-image-format-in-umbraco-cms/

• I've installed the necessary packages on Nuget:

  <package id="ImageProcessor" version="2.8.0" targetFramework="net461" />
  <package id="ImageProcessor.Plugins.WebP" version="1.3.0" targetFramework="net461" />
  <package id="ImageProcessor.Web" version="4.11.0" targetFramework="net461" />
  <package id="ImageProcessor.Web.Config" version="2.6.0" targetFramework="net461" />
  

• I also checked the state of the Format plugin and this is enabled

  <plugin name="Format" type="ImageProcessor.Web.Processors.Format, ImageProcessor.Web" enabled="true" />
  

• I changed the query on the template (view) to show the image with params ?format=webp&quality=80

  @{ var test = img.GetCropUrl(1920, 640, quality: 80, furtherOptions: "&format=webp"); }
  
  <img src="@test" class="img-responsive" alt="@item.GetPropertyValue("description")" width="1920" height="640"
  

• I also tried to add the mimeType to the Web.config (at root) then rebuild the solution & get it launched

  <staticContent>
      <remove fileExtension=".webp" /><mimeMap fileExtension=".webp" mimeType="image/webp" />
  </staticContent>
  

Actual result: request on browser returned 404 for that image.

1. image tag returned as HTML:

   <img src="/media/37260/banner-web.jpg?anchor=center&amp;mode=crop&amp;width=1920&amp;height=640&amp;format=webp&amp;quality=80&amp;rnd=133270881000000000" class="img-responsive" alt="" width="1920" height="640">
   

2. Browsers show 404 response & extension of this image remains .jpg:
   

Have anyone met this situation before? I'd like to know the root cause/solution if any.

Answer 1

Answer update: I needed to add a rewrite rule on the Web config

<rewrite>
          <rules>
              <rule name="webp">
                  <match url="(.+)\.(jpe?g|png)$" ignoreCase="false" />
                  <conditions logicalGrouping="MatchAll">
                      <add input="{HTTP_ACCEPT}" pattern="image/webp" ignoreCase="false" />
                      <add input="{HTTP_USER_AGENT}" pattern="Chrome" />
                      <add input="{DOCUMENT_ROOT}/{R:0}.webp" matchType="IsFile" />
                  </conditions>
                  <action type="Rewrite" url="{R:0}.webp" logRewrittenUrl="true" />
                  <serverVariables>
                      <set name="ACCEPTS_WEBP" value="true" />
                  </serverVariables>
              </rule>
          </rules>
          <outboundRules rewriteBeforeCache="true">
              <rule name="jpg to webp" preCondition="ResponseIsHtml" patternSyntax="ExactMatch">
                  <match filterByTags="Img" pattern="(.+)\.(jpe?g|png)$" />
                  <action type="Rewrite" value="{R:0}.webp" />
              </rule>
              <preConditions>
                  <preCondition name="ResponseIsHtml">
                      <add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
                      <add input="{HTTP_USER_AGENT}" pattern="Chrome" />
                  </preCondition>
              </preConditions>
          </outboundRules>
      </rewrite>

then rebuilded the solution and worked like a charm