ブラウザがWebP対応の場合はそのまま表示し、非対応の場合はjpg/png画像を表示させる方法

ページ表示時にブラウザがWebP画像に対応している場合はそのまま表示し、非対応の場合はjpg/png画像を表示させたい。調べたところHTMLで対応する方法とhtaccessファイルで対応する方法がある模様。以下に対応方法をメモ。

HTMLで対応する方法

ソースコード

<picture>
    <source srcset="001.webp" type="image/webp">
    <img src="001.jpg">
</picture>

メリットとデメリット

後述するhtaccessファイルでの対応と違い、ページ毎に個別に対応できるのがメリット。

ただ、ページ数が多い場合は変更する個所も増えるのがデメリット。

htaccessファイルで対応する方法

ソースコード

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{SCRIPT_FILENAME}.webp -f
    RewriteRule .(jpe?g|png|gif)$ %{SCRIPT_FILENAME}.webp [T=image/webp]
</IfModule>

<IfModule mod_mime.c>
    AddType image/webp .webp
</IfModule>

<IfModule mod_setenvif.c>
    SetEnvIf Request_URI "\.(jpe?g|png|gif)$" _image_request
</IfModule>

<IfModule mod_headers.c>
    Header append Vary Accept env=_image_request
</IfModule>

メリットとデメリット

前述のHTMLで対応する方法とは異なり、一括で設定できるのがメリット。

設定ミスがあった場合に影響範囲が多いのがデメリット。

注意点

以下の点に注意する。

• WebP画像はjpg / png画像と同じディレクトリに設置
• WebP画像は「001.jpg.webp」のようなファイル名にする(001.webpはNG)

確認方法

HTML / htaccessファイルのどちらで対応する場合でもMicrosoft EdgeのInternet Explorerモードで動作確認できる。IEモードの設定方法は公式のこちらのページを参照すること。