CSSで背景画像を使用する理由と画像遅延読み込み＋メディアクエリ対応

弊社はページスピードインサイト対策を施したホームページ制作を提供しています。普通にコーディングしただけでは合格点に届かないケースがあるため一般的なホームページ制作とは異なる作り方をする箇所もあります。特にCSS絡みの部分はそうですね。HTML・CSSを軽量化するためにも不要な記述は限りなく少なくします。そして今回テーマとなるのが背景画像です。

IMGタグと背景画像の違い

IMGタグは画像を表示するためのHTMLタグです。IMGタグを使用していればユーザーにも検索エンジンのクローラーにも画像であることを明示できます。対して背景画像は要素の背景としての画像です。文書構造の観点からすると正しく使い分けるべきといえます。

IMGタグはalt属性があるので画像の情報を文字で補完できます。なので画像が情報としての役割があるのでしたら当然IMGタグとすべきでしょう。ただ画像自体に意味を見出さないような使い方をする場合は背景画像でも問題ないのかなと考えます。

ページスピードインサイト対策としての背景画像

さて、これがページスピードインサイト対策が絡んでくると前提条件が変わります。ページスピードインサイト対策の点からいうと画像が多い場合、IMGタグで設置すると減点対象となります。これはLCPの読み込み遅延に影響するためです。全てのIMGタグを遅延読み込みしても影響します。これはHTMLのレンダリングの仕様によるからです。

そのため弊社では画像が多い場合は画像の意味合いに応じて可能な限り背景画像とします。特にイメージ用途の画像の場合は背景画像の方が適切だったりします。そういう場合は背景画像をstyle属性でHTML内に記述します。その方が保守管理の観点からもメリットがあります。

<div style="background-image: url("xxx.webp");">〜</div>

背景画像の遅延読み込み

前回の記事にもある通りJavaScriptで背景画像の遅延読み込みを実装しています。style属性で下記のような書き方をすれば遅延読み込みができます。

<div data-background-image="xxx.webp" class="lozad">〜</div>

ただここで一つ問題が発生します。このままではレスポンシブ対応ができません。「CSSでメディアクエリで切り替えればいいのでは？」と思うかもしれませんが、この場合は遅延読み込みができなくなります。

画像遅延読み込み、かつメディアクエリ対応

結論から言うと弊社ではこの問題を解決できました。JavaScriptにて画像ファイルパスを書き換えることで実現しました。

setTimeout(() => {
document.querySelectorAll(".wide .change .lozad").forEach(function (element) {
let bgImage = element.getAttribute("data-background-image");
if (bgImage) {
let newBgImage = bgImage.replace("_sp", "");
element.setAttribute("data-background-image", newBgImage);
}
});
}, 10);

これだけ見ると簡単な話かもしれませんが到達するまで結構悩みました。美しいやり方かはわかりませんが、目的は達成できました。背景画像の遅延読み込みをした上でデバイス別に画像を切り替えています。

最後に画像遅延読み込み＋メディアクエリ対応についてまとめました。

1. 画像ファイルパスをルールに則ってデバイス別に用意する（弊社の場合はスマホ用は「_sp」を追加）
2. JavaScriptで画面サイズにより任意のCLASSを付け替える（弊社の場合はPCの時は「.wide」、スマホの時は「.narrow」）
3. lozad.jsを使用して背景画像の遅延読み込みを行う（画像はスマホ用とする／ページスピードインサイト対策）
4. JavaScriptでPCの時は画像ファイルパスから「_sp」を削除

弊社の基本的なコーディングで②の対応を行っていたので上記対応がやりやすかったのですが、作り方によっては別の方法があるかもしれません。サーバー上でデバイス別にHTMLを生成できるのならこのような苦労は要りませんので。