おかぴーです。
今回は、CSSのbackground-imageで指定した画像を、WebP対応させる方法について解説していきます。
おかぴーちなみに、読み方は「ウェッピー」だそうです。
みみこずっと「ウェブピー」って読んでました（笑）
ページスピードインサイト（https://pagespeed.web.dev/）でも改善点として見かけることもあり、普通の画像は<picture>タグを使って記載することで対応できますが、CSSのファイルには<picture>タグは使えないため悩ましいところです。
では、さっそく対応方法を見ていきましょ〜^^
対応方法は２ステップ
やり方はこちらの手順で行います↓
- 「modernizr-custom.js」というJSファイルをダウンロードして設置
- CSSで背景画像にWebP画像を指定
①のJSファイルを使うことで、
冒頭の<html>の部分がWebP対応のブラウザ時に以下の記述に自動で変えてくれます。
逆に、WebPが対応していない場合は以下の記述になります。
②うまいことCSSのクラスが分かれてくれるので、これを使って
・WebP対応の時：background-imageにWebP画像を指定
・WebP非対応の時：background-imageに元画像を指定
してあげることで、表示を切り替えてくれることになります。
①「modernizr-custom.js」を使う
「Modernizr」というサイトから、WebP処理をしてくれる対象のファイルをダウンロードします。
動画で見たい方はこちら↓^^
①「Add your detects」ボタンをクリック
②項目から「WebP」を探してクリック
→検索すると早いです（ショートカットキー：mac→command+F、windows→Ctrl+F）
③「BUILD」をクリック
④赤枠の「Download」をクリックしましょう。
すると、「modernizr-custom.js」がダウンロードされます。
→こちらのファイルを、</body>の直前などに設置しておきましょう。
では、次はCSSへ！
②CSSで「background-image」にWebP画像の指定をする
記述例はこちら↓
WebP対応の場合、<html>に「.webp」というクラス名が付くので、それを指定して書いていきましょう。
非対応の場合は「.no-webp」にします。
/* WebP対応の場合 */
.webp .image{
background: url(“./images/haikei.webp”);
}
/* WebP非対応の場合 */
.no-webp .image{
background: url(“./images/haikei.png”);
}
こうすることで、対応・非対応の場合にどちらでも表示されることになります^^
WebP画像にするメリット
改めて、WebP画像にすることでのメリットは「ページの表示速度が速くなる」ことですね。
僕のブログでも、WebP画像の対応をプラグイン経由（EWWW Image Optimizer）で自動で行っていますし、WordPressではなくプラグインを使えないページでもWebP画像にすることで表示速度が格段に速くなります。
対応必須と言っても過言ではないですので、ユーザビリティ向上のために頑張りましょう！
コメント