CSSのbackground-image(背景画像)をWebP対応させる方法

  • 2022年2月16日
  • 2022年4月10日
  • CSS
CSS background-image css webp対応

おかぴーです。

今回は、CSSのbackground-imageで指定した画像を、WebP対応させる方法について解説していきます。

おかぴーおかぴー
WebP画像は、とても軽量のためブログやサイトの表示速度に大きく貢献します。
ちなみに、読み方は「ウェッピー」だそうです。
みみこみみこ
あ、そうなんですね。
ずっと「ウェブピー」って読んでました(笑)

ページスピードインサイト(https://pagespeed.web.dev/)でも改善点として見かけることもあり、普通の画像は<picture>タグを使って記載することで対応できますが、CSSのファイルには<picture>タグは使えないため悩ましいところです。

では、さっそく対応方法を見ていきましょ〜^^

 

対応方法は2ステップ

やり方はこちらの手順で行います↓

  1. 「modernizr-custom.js」というJSファイルをダウンロードして設置
  2. CSSで背景画像にWebP画像を指定

 

①のJSファイルを使うことで、

冒頭の<html>の部分がWebP対応のブラウザ時に以下の記述に自動で変えてくれます。

 WebP対応のブラウザが以下のように記述されます
<html lang="ja" class="webp webp-alpha webp-animation webp-lossless">

 

逆に、WebPが対応していない場合は以下の記述になります。

 WebP非対応のブラウザでの記述
<html lang="ja" class="no-webp">

 

②うまいことCSSのクラスが分かれてくれるので、これを使って

・WebP対応の時:background-imageにWebP画像を指定
・WebP非対応の時:background-imageに元画像を指定

してあげることで、表示を切り替えてくれることになります。

 

①「modernizr-custom.js」を使う

Modernizrというサイトから、WebP処理をしてくれる対象のファイルをダウンロードします。

動画で見たい方はこちら↓^^

 

①「Add your detects」ボタンをクリック

modernizr-custom.js ダウンロード

 

②項目から「WebP」を探してクリック

→検索すると早いです(ショートカットキー:mac→command+F、windows→Ctrl+F)

modernizr-custom.js ダウンロード

 

③「BUILD」をクリック

modernizr-custom.js ダウンロード

 

④赤枠の「Download」をクリックしましょう。

すると、「modernizr-custom.js」がダウンロードされます。

modernizr-custom.js ダウンロード

→こちらのファイルを、</body>の直前などに設置しておきましょう。

では、次はCSSへ!

 

②CSSで「background-image」にWebP画像の指定をする

記述例はこちら↓

WebP対応の場合、<html>に「.webp」というクラス名が付くので、それを指定して書いていきましょう。

非対応の場合は「.no-webp」にします。

 CSSサンプルソースコード

/* WebP対応の場合 */
.webp .image{
background: url("./images/haikei.webp");
}

/* WebP非対応の場合 */
.no-webp .image{
background: url("./images/haikei.png");
}

こうすることで、対応・非対応の場合にどちらでも表示されることになります^^

 

WebP画像にするメリット

background-image css webp対応

改めて、WebP画像にすることでのメリットは「ページの表示速度が速くなる」ことですね。

僕のブログでも、WebP画像の対応をプラグイン経由(EWWW Image Optimizer)で自動で行っていますし、WordPressではなくプラグインを使えないページでもWebP画像にすることで表示速度が格段に速くなります。

対応必須と言っても過言ではないですので、ユーザビリティ向上のために頑張りましょう!

おまけ

「ある程度ブログのデザインも納得したものができてきたなぁ」

「次はこのブログを、稼げるブログにしたい!」

と思っている方へ。

 

ブログ収益化において、

デザイン効果と組み合わせることで反応率が高まる効果的な方法があるのですが、

僕が勤めている会社では、とても言えない(というか教えたくないw)内容を、

ここだけの話で公開しようと思います。

 

どんな話かと言うと、

「発信するテーマ(内容)に合わせた最適な収益化方法が分かる」というものです。

 

100人いれば、100個のブログがあり、コンセプトがあります。

それによって収益化の方法も様々です。

 

デザインは視覚的に注目を集める力がありますが、その先の収益化へ進むには間違いなく発信内容に合わせてブログを構築していく必要があります。

 

あなたは最適な収益化方法を選択できていますか?

きっと、今ブログで伸び悩んでいる人には新しい発見になるはず^^

 

興味がある方は「こちら」をご覧ください〜

ストレスフリーなブロガーライフを送ろうWPテーマ「THE THOR」でリニューアル!" width="1280" height="479" >

WPテーマ「THE THOR」でリニューアル!

2年近く「STORK」を愛用してきた当ブログは、これから「THE THOR」でデザインも新たに生まれ変わりました。(STORK、今までありがとう!)

これからも当ブログではブログ作りに役立つ情報を発信していきます。よろしくお願いします(o^^o)

CTR IMG