htaccessによるサイト内画像のWebP化
この記事は約 2 分で読めます。
PageSpeed Insightsへの対応で避けて通れないWebP（うぇっぴー）。
htaccessへの記載は下記のようになります。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webpsample.jpg をWebP化する場合、ファイル名の拡張子の後に.webpを加えて
sample.jpg.webp を同階層に置くことで対応ブラウザはWebPの方が表示されます。
WebPへの変換は、google公式のSquooshまたはXnConvertがオススメです。