backgroundにWebP(ウェッピー)を使用し、表示速度を改善

この記事は約3分で読めます。

backgroundにWebPを使用
ページの表示速度を改善の為に、欠かせないのが画像の適正化。
PageSpeed Insightsの項目の1つに
次世代フォーマットでの画像の配信
とあり、

JPEG 2000、JPEG XR、WebPなどの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。
-PageSpeed Insights

と明記されています。
その中で、現在使用されることが多い画像フォーマットがWebPです。
通常の画像であれば<picture>タグを使い、対応ブラウザにWebPを出力することは可能ですが、問題はbackgroundです。
backgroundは<picture>タグが使えない為、出力することができません。
今回はbackgroundでのWebPの使用方法を解説します。

使用方法

結論、今回はjsプラグイン
Modernizr
を使用します。

プラグインをインストール

Modernizrに飛び、[Add your detects]をクリック
Modernizrに飛び、[Add your detects]をクリック
ショートカットキー[Ctrl]+[F]でページ内検索を出し、[Webp]と検索
ショートカットキー[Ctrl]+[F]でページ内検索を出し、[Webp]と検索
[Webp]を選択後、右上の[BUILD]をクリック
[Webp]を選択後、右上の[BUILD]をクリック
[Download]ボタンをクリックし、インストール
[Download]ボタンをクリックし、インストール

プラグインをサイト内で読み込み

<script src="/●●●/modernizr-custom.js">

上記を読み込みます。
●●●は実際の環境に合わせて変更してください。
私はPageSpeed Insightsの項目の1つ[レンダリングを妨げるリソースの除外を上げる]の為に

<script src="/●●●/modernizr-custom.js" defer></script>

を</body>近くに記載しています。

<html>タグが

<html lang="ja" class="webp webp-alpha webp-animation webp-lossless">

に変わっていれば、正常に読み込みされています。
Webpが読み込みできないブラウザの時は

<html lang="ja" class="no-webp">

と表示されます。

どちらにもならない場合、失敗しているので、/●●●/を確認して正しいURLを入れましょう。

CSSに反映

.no-webp .test{
  background: url("/test.jpg");
}
.webp .test{
  background: url("/test.webp");
}

該当するbackgroundに上記のように記載します。
画像をWebpに変換するツールとして、私は
WEBP変換ツール
を活用しております。
これでPageSpeed Insightsで確認をし、次世代フォーマットでの画像の配信が消えていたら、対応完了です。