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

2022年2月16日2024年9月2日

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

WebP画像は、とても軽量のためブログの表示速度に大きく貢献します。

おかぴー

ちなみに、読み方は「ウェッピー」だそうです。

みみこ

ノリが良さそうな名前（笑）

こんな方に読んで欲しい

CSSの背景画像もWebP対応させたい
ブログだけでなく、１ページ単位の制作でも使える方法を知りたい

対応方法は２ステップ

こちらの手順で行います↓

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

多くの画像は<picture>タグというのを使って記載することで対応できますが、CSSのファイルには<picture>タグは使えないため悩ましいところです。

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

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

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

<html lang="ja" class="no-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で「background-image」にWebP画像の指定をする

記述例はこちら↓

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

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

WebP対応の場合、<html>に「.webp」というクラス名をつけて記述できます。

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

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

WebP画像にするメリット

おかぴー

やっぱりページ速度が速くなることですね

みみこ

画像がページの中で一番と言われるほど「重いデータ」ってことは聞いたことがあります！

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

ブログの構成によっては、背景画像まで対応しなくて良いというケースもありますし、無理にWebP対応することはないですが、こういったやり方があるんだ〜って知ってもらえたらそれでOKです^^

ブログを作っていると、ふと

「見た目をもっとカッコよくしたい」「おしゃれでキレイな感じにしたい」っていう衝動が来ませんか？

みみこ

あるあるですね（笑）なんかしっくりこないなーとか、
でも、どう作っていいか操作も含めて分からないことがあります。

おかぴー

そんな時は、WEBデザインの勉強を少しだけでもいいので、
やってみるのもいいと思います^^

僕は見た目が納得がいくものが作れると、モチベーションが上がります。

よーし！また記事を書こうかな〜って思えるし、書いたものを見返して

「はぁぁぁぁ〜(*´꒳`*)ウキウキ」

ってなります（笑）

僕がこのブログを通して知り合った方は、みなさん自分のブログの見た目（デザイン性）とか、作り込み（WordPressの操作）に悩んでいる方が多かったです。

僕自身も初めはWordPressの管理画面からよく分からなくて、どこをいじったら何が変わるのか？もそうだし、

色を変えたり大きさ変えたり、基本的な内容でも何時間もかかったことがありました。

知り合った方のお悩みを聞いて改めて感じたことは、

そもそもWordPressでブログを作る＝WEBデザインの知識が多少なり必要になるということです。

デザイン知識然り、コーディング知識しかり。。

でも、WEBデザインの勉強と言ってもその範囲はめちゃくちゃ広いし、ぶっちゃけ終わりはありません。

専門用語も多いし、だからと言って初心者の人が幅広く手を出して勉強するのも大変です。（ゴールを見失います）

それなら、

WEBデザイン初心者の人でも、モチベーションが爆上がりできるような必要範囲を絞ったブログ制作の教材があったらいいんじゃないか？と思ったんですが、どうでしょうか？(*^^*)

具体的には、こんな内容を盛り込む予定です↓

WEBデザインの知識を活かして魅力的なメインビジュアル（ブログのメイン画像・アイキャッチ画像）を楽しみながら作れるようになれる
カスタマイズが一定レベルでできるようになれる
パソコン自体の知識も身に付く
程よい範囲のWEB知識がつくから、情報リテラシー（※）が高くなる
登録してくれた方それぞれのお悩みに特化した、特別コンテンツを受け取れる

※情報リテラシー：世の中にあふれる多くの情報を、適切に活用できる能力

これから作っていくことになるのですが、

提供開始まで先行登録してくれた方には別途プレゼントもお送りしたいと考えています。

最新の知識を受け取ることができますし、

登録してくれた方それぞれのお悩みに応じたコンテンツの提供ができることも、このLINEの一つの魅力かなと。

少しでも作れるよ〜って人にも、ためになる内容を盛り込む予定もあるので、興味がある方はLINE登録してもらえると嬉しいです^^

↓↓↓

おかぴー・公式LINEに登録してみる

よかったらシェアしてね！

URLをコピーしました！

コメントするコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

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

対応方法は２ステップ

「modernizr-custom.js」をダウンロード

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

WebP画像にするメリット

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル