WebP画像対応
Ver. 2.11.22 より、次世代画像フォーマットである「WebP」画像の生成に対応しました。ここでは、WebP画像の利用条件、使用方法について説明します。
対応ブラウザ
- Chrome
- FireFox
- ChroniumベースのEdge
- Safari（iOS含む） 14 以降
- https://caniuse.com/#search=webp
利用してるサーバーで WebP画像が生成できるか調査する
以下のような info.php を起き、phpの情報をみて、GD か Imagick の項目で、WebPフォーマットが入っていれば利用可能です。
<?php
phpinfo();
GDでWebPが使えるか確認
ImagickでWebPが使えるか確認
設定方法
config.system.yaml の確認
config.system.yaml で webp_support が off （default: on）になっていないか確認します。
WebP画像生成確認
カスタムフィールド やユニット、メディアに画像を登録し、
同じファイル名.webp という WebP画像が生成されることを確認します。
ファイル名.webp という画像が生成できているか確認
.htaccess
WebP画像は対応していないブラウザもあるため、.htaccessで対応ブラウザだけにWebP画像を返すようにします。
# webpフォーマット画像対応
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1]
Header append Vary Accept env=REDIRECT_accept
AddType image/webp .webp
Header append Vary Accept env=REDIRECT_accept
この行はCDNなどによるキャッシュを行う場合、必ず指定してください。指定しないと、対応していないブラウザでもWebP画像が帰ってしまったりします。
WebP画像を使うことによって、画像の容量を大幅に減らすことができます。是非サーバーが対応している場合は、積極的に利用してみましょう。
