【Apache】Webp画像を設定する方法

2022年5月2日Apache

Webp画像とは、Googleが開発している圧縮率がとても良い画像ファイルです。
それをApacheを使ってjpegやpngという拡張子をwebp拡張子に変更します。
Webp画像に対応しているブラウザとそうでないブラウザがあるので、対応しているブラウザにのみWebp画像を返します。

【Apache】Webp画像を設定する方法

RewriteEngine On
# content-type image/webpというMIMEタイプがない場合があるので追加する
addType image/webp .webp
RewriteCond C:/MAMP/htdocs/some-folder/images/$1.webp -f
RewriteRule /?images/(.*)\.(jpe?g|png) images/$1.webp

jpe?gとすることでeがある場合もしくはない場合という条件にできます。
|で左辺と右辺どちらかがある場合という条件にできます。
()が２つありますが、最初の方が$1で取得でき、それをsubstitutionの$1.webpと画像のファイル名に指定します。

検証ツールのnetworkタブのcontent-typeで確認できる「image/webp」という部分はMIMEタイプといいます。
このMIMEタイプが正しく表示されていないと画像が表示されないといった問題になります。
addTypeで、webp拡張子がきた場合、image/webpを返すという処理にすることができます。

Webp画像に対応しているブラウザとそうでないブラウザを判定する

検証ツールのnetworkタブのRequest HeadersのAcceptでは、使用ブラウザが理解できるMIMEタイプが列挙されています。
*/*というのがあった場合、どういったMIMEタイプでも理解できるという意味になります。
このRequest HeadersのAcceptにimage/webpがあるかどうかで判定可能になります。

RewriteEngine On
# content-type image/webpというMIMEタイプがない場合があるので追加する
addType image/webp .webp
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond C:/MAMP/htdocs/some-folder/images/$1.webp -f
RewriteRule /?images/(.*)\.(jpe?g|png) images/$1.webp

%{HTTP_ACCEPT}でRequest HeadersのAcceptの部分を指定しimage/webpというMIMEタイプがある場合、という条件にすることができます。