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>