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が使えるか確認

GDでWebPが使えるか確認

ImagickでWebPが使えるか確認

ImagickでWebPが使えるか確認

設定方法

config.system.yaml の確認

config.system.yaml で webp_support が off （default: on）になっていないか確認します。

WebP画像生成確認

カスタムフィールド やユニット、メディアに画像を登録し、 同じファイル名.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画像を使うことによって、画像の容量を大幅に減らすことができます。是非サーバーが対応している場合は、積極的に利用してみましょう。