[IIS] Edge の UserAgent で判別して画像を切り替える

Microsoft Edge は HTMLEdge(初代) と Blink(2世代目) が存在します。それぞれ区別する必要があるなと思い、UserAgent を調べてみたところ、以下で識別できるようです。「\b」は単語の区切りに使えます。

  • HTMLEdge
    「Edge/」が含まれるかどうか。(正規表現で \bEdge/)
  • Blink
    「Edg/」が含まれるかどうか。(正規表現で \bEdg/)

最近、画像最適化で JPG を素直に使用せず、JPEG XR/JPEG 2000/WebP に分ける必要が出てきたので、web.config のリライト機能を使いました。

JPEG XR は IE, HTMLEdge で使用できますが、Blink になると表示できないため、WebP にする必要があります。

    <rule name="JPEG(JPEG XR)" enabled="true" patternSyntax="ECMAScript" stopProcessing="true">
        <match url="\/photos\/(.*)\.jpg" />
        <conditions>
           <add input="{HTTP_USER_AGENT}" pattern="\b(Trident|Edge)/" />
        </conditions>
        <action type="Redirect" url="/photos/{R:1}.jxr" appendQueryString="true" logRewrittenUrl="true" />
    </rule>
    <rule name="JPEG(WebP)" enabled="true" patternSyntax="ECMAScript" stopProcessing="true">
        <match url="\/photos\/(.*)\.jpg" />
        <conditions>
            <add input="{HTTP_USER_AGENT}" pattern="\bChrome/" />
        </conditions>
        <action type="Redirect" url="/photos/{R:1}.webp" logRewrittenUrl="true" />
    </rule>
    <rule name="JPEG(JPEG2000)" enabled="true" patternSyntax="ECMAScript" stopProcessing="true">
        <match url="\/photos\/(.*)\.jpg" />
        <conditions>
           <add input="{HTTP_USER_AGENT}" pattern="\bSafari/" />
        </conditions>
        <action type="Redirect" url="/photos/{R:1}.jp2" logRewrittenUrl="true" />
    </rule>

以下のとおり MIME 指定も必要です。

    <staticContent>
        <mimeMap fileExtension=".webp" mimeType="image/webp" />
        <mimeMap fileExtension=".jp2" mimeType="image/jp2" />
        <mimeMap fileExtension=".jxr" mimeType="image/vnd.ms-photo" />
    </staticContent>