concreteCMSの画像をWebP形式に自動対応させる

Google PageSpeed Insightsなどでチェックすると、まず画像をJPGやPNGから圧縮率の高いWebPに変換するように指摘されます。

WebPの画像を挿入する場合、対応していないブラウザのためにpictrureタグなどで同じ画像をJPGもしくはPNGなどで対応する必要があり、他のCMSでも自動対応するか自動変換Bする対応が現実的です。

アドオンAfixia: Automatic WebP Image Conversionをインストールすると、現在画像ブロックやimageタグでページに挿入しているJPGやPNGからWebPを自動生成して、タグをpictureタグに変換して出力します。

管理画面　＞　システムと設定　＞　最適化に「WebP Settings」が追加されます。

スクリーンショット 2022-04-02 14.59.20.png

一般設定でBrowser WebP Autodetectをオンにすると、WebPが対応しているブラウザではJPGやPNGは変換してWebPで提供されます。

スクリーンショット 2022-04-02 15.01.17.png

対応しているブラウザでは下記の自動変換されます。元のjpg画像からwebpは自動生成してキャッシュされます。

WebP Image Qualityで、webpの圧縮率を設定します。

Force Reconvertは、キャッシュクリアした際にWebPを再作成されます。圧縮率を設定して再作成する場合など有効にします。

Dynamic Urlsは、サーバーのリダイレクトを利用していない場合、https://site.com?path=https://site.com/image-file.jpgのようにして画像を読み込みます。

Server Redirect Settings (if enabled)以下は、サーバーが対応している場合に設定可能な項目です。

スクリーンショット 2022-04-02 15.14.58.png

Server Redirectsをオンにすると、サーバーが対応している場合、Apache Redirectsなどで画像を提供します。

Apache .htaccess Ruleでhtaccessが編集可能で対応可能な場合は、オンにします。

Nginx Settingsは、Nginxの場合の設定事例が表示されます。

Cache Control Headerは、HTTP ヘッダーを調整し、WebP 画像サーバーの応答に対するブラウザのキャッシュポリシーを指定します。

WebP Conversion Failureは、webpへのコンバートがエラーになったときに元の画像を表示するかエラーを出すかなどを設定できます。

Emit 'Vary: Accept' Headerは、Vary HTTP レスポンスヘッダーでキャッシュサーバーを設けている場合などに設定します。

当然ですが、スタイルシートの背景画像等はコンバートの対象にならないのでmodernizrなどで、CSSで判断を追加して対応させる必要があります。