CSSのimage-setの使いどころ｜背景画像レスポンシブの最適解

ここまで、レスポンシブ画像の仕組みとして次の2つを整理しました。

• srcset → 画像サイズの最適化
• picture → 画像フォーマットの切り替え

しかし、これらはすべてimgタグの画像を対象とした技術です。

Web制作では、もう一つ重要な画像の使い方があります。それがCSSの背景画像（background-image）です。

背景画像にはsrcsetやpictureは使えません。
そこで使われるのがimage-setです。

image-setとは何か

image-setは、CSSで複数の画像候補を指定する仕組みです。

background-image: image-set(
url(image.jpg) 1x,
url(image@2x.jpg) 2x
);

この指定では、ブラウザが環境に応じて画像を選択します。

つまりimage-setは、ディスプレイ解像度に応じた画像切替を行う仕組みです。

なぜbackground-imageでも最適化が必要なのか

Web制作では、装飾画像が背景として使われることが多くあります。

例えば次のようなケースです。

• メイン背景
• セクション背景
• バナー背景
• パターン画像

これらは imgタグではなくCSS背景画像として実装されることが一般的です。

しかし背景画像も、読み込まれる以上はページのパフォーマンスに影響します。

特にメイン背景などでは、LCPに影響するケースもあります。

そのため、background-imageでも画像最適化が重要になります。

image-setでできること

image-setでは主に次のような最適化が可能です。

高解像度ディスプレイ対応

Retinaディスプレイなどでは通常の画像ではぼやけて表示されます。
image-setを使えば、「通常解像度」「高解像度」の画像を切り替えられます。

フォーマット切り替え

image-setはフォーマット指定にも対応しています。

background-image: image-set(
url(image.avif) type("image/avif"),
url(image.webp) type("image/webp"),
url(image.jpg) type("image/jpeg")
);

この場合、ブラウザは対応フォーマットを選択します。つまりCSSでも、次世代画像フォーマットの配信が可能になります。

img画像とbackground画像の役割

Web制作では、画像の役割によって実装方法が変わります。

一般的には次のように整理されます。

このように整理すると、レスポンシブ画像の構造が理解しやすくなります。

background-imageを使う理由

そもそも、なぜbackground-imageが使われるのでしょうか。

主な理由は次の通りです。

• レイアウト装飾として使う
• CSSで制御しやすい
• object-fitの代替として使える

つまり背景画像は、コンテンツではなくデザイン要素として使われます。そのため、imgタグとは役割が異なります。

レスポンシブ画像の3つの役割

レスポンシブ画像には次の3つの技術があります。

• srcset → 画像サイズ最適化
• picture → フォーマット切替
• image-set → 背景画像最適化

それぞれ対象が異なるため、役割を整理して使うことが重要です。

画像レスポンシブは、単に画像サイズを減らすだけではありません。画像の役割に合わせて最適な技術を使うこと。それがWebパフォーマンス改善の基本になります。