CSSのimage-set()関数で解像度に合わせた背景画像やフォーマット（形式）を最適化する



image-set()はCSSの関数で、画像オプションをセットして背景画像を適応させることができる便利な関数になります。
ユーザーの端末にあった解像度の画像や、軽量化したフォーマット（形式）の画像の適応など、Webに最適化した画像を適応させることができます。

image-set()はCSSの関数で、画像オプションをセットして背景画像を適応させることができる便利な関数になります。
ユーザーの端末にあった解像度の画像や、軽量化したフォーマット（形式）の画像の適応など、Webに最適化した画像を適用させることができます。

Webで利用する画像を最適化させる方法はいろいろありますが、CSSで画像最適化を行う場合はimage-set関数を利用していくことになるでしょう。
おもにbackground-imageプロパティで背景画像を指定するときに使います。
背景画像はわりと大きいサイズの画像を利用していくことが多いので、画像最適化はWebページのパフォーマンスの向上に影響してきます。
しっかり対応していきたいところです。

以下、image-set関数のWebブラウザのサポート状況になります。

Can I use (image-set)
https://caniuse.com/?search=image-set()

主要ブラウザはすべてサポートされております。
まだベンダープレフィックスが必要なWebブラウザもありますが、サポートされている部分とされていない部分を踏まえてご紹介しています。

今回ご紹介するサンプルのHTML構造になります。

HTML

<div class="container"></div>



CSSクラス「container」のブロックに背景画像を適応させていきます。

解像度で背景画像を切り分ける


まずは、ユーザーの端末に適した解像度の画像を適応させます。
Apple製品のMacやiPadなどで採用されているRetinaディスプレイや、高解像度のモニターでは、2倍サイズの画像を適応させる必要があります。その他のデバイスについては等倍サイズの画像で十分なので、等倍サイズと2倍サイズと解像度に合わせた画像を切り分けて表示させれば、ユーザーが利用している端末ごとに最適化できます。

以下、CSSのサンプルです。

CSS

.container {
  width: 100vw;
  height: 100vh;
  background-image: -webkit-image-set(
    url("../images/bg-sample_1x.jpg") 1x,
    url("../images/bg-sample_2x.jpg") 2x);
  background-image: image-set(
    url("../images/bg-sample_1x.jpg") 1x,
    url("../images/bg-sample_2x.jpg") 2x);
  background-size: cover;
  background-position: left top;
}



background-imageプロパティにて、image-set関数を使ってカンマ区切りで等倍サイズと2倍サイズの画像をセットしています。ベンダープレフィックスを指定すればChrome、Edge、Safariを含めた多くのブラウザで適応させることができます。
これで端末に合った解像度の画像を適応させることができます。

widthとheightで幅と高さ、 background-sizeプロパティで背景画像を表示領域全体に表示されるようにしています。
ほか、background-positionプロパティでは、画像のポジションを左上からとしています。

画像形式で切り分ける


image-set()関数では解像度だけでなく、ユーザーの端末に合わせながらより軽量なフォーマットの画像を適応させることができます。
しかし、まだサポートされていないWebブラウザもあるため、それを踏まえてサンプルをご紹介します。

JPEGやPNG形式の画像は、WebPやAVIFなどの軽い画像フォーマットとして利用していくと、Webページのパフォーマンスが向上します。
画質を落とすことなく軽い画像フォーマットに変換する方法としては、Googleが提供しているWebツール「Squoosh」がおすすめです。

Squoosh
https://squoosh.app/

Squooshの使い方については、以下の2記事の中でご紹介しています。

WebP（ウェッピー）を利用して画像を軽量化する
劣化が少なく画像を軽量化できる画像フォーマット「AVIF」の利用



実装の注意点として、image-set関数にはフォールバックの動作がないので、フォールバック用のbackground-imageプロパティを、image-set関数の処理の前に記述しておく必要があります。
フォールバック用のbackground-imageプロパティがないと、サポートされていないWebブラウザでは背景画像が表示されません。
主要ブラウザでは、Google Chrome、Microsoft Edge、Safariあたりがimage-set()関数による画像形式の指定に対応しておりません。
Firefoxはサポートされています。

以下、サンプルコードになります。

CSS

.container {
  width: 100vw;
  height: 100vh;
  background-image: url("../images/bg-sample.jpg"); /* Fallback */
  background-image: image-set(
    url("../images/bg-sample.avif") type("image/avif"),
    url("../images/bg-sample.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: left top;
}



上記のサンプルでは、AVIFとJPEGの2つの画像をセットしました。
先に記述した形式から優先的に、サポートされている形式の画像が適応されます。
サポートされていないブラウザでのフォールバック用の画像は、JPEG形式の画像としています。

カンマ区切りで複数の画像をセットできますので、必要であればWebP形式も含めて、最適な画像を表示するようにもできます。今後サポートが進む、JPEGと比較しても変わらない高品質で、50%のサイズ削減ができるHEIC形式の画像をセットしてもいいでしょう。

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



また、Internet Explorerを無視するのであれば、フォールバック用のbackground-imageプロパティはWebP形式の画像を指定してもいいでしょう。

background-image: url("../images/bg-sample.webp");



以下、これまでの実装の動作になります。
動画（3分20秒ほど）

余談


もし世の中のすべてのWebブラウザに対応する必要がある場合は、JavaScriptライブラリ「Modernizr」が便利です。
JavaScriptライブラリ「Modernizr」はWebP形式のみならず、カスタマイズ次第ではいろんな切り分けをすることができます。

JavaScriptライブラリ「Modernizr」の使い方については、以下の記事でご紹介しています。

CSSのbackgroundプロパティで対応ブラウザを判別してWebP画像を利用する

まとめ


image-set()は画像オプションをセットすることができ、CSSのみで背景画像を切り分けることができる便利な関数です。
うまく使えばWebページのパフォーマンスを向上させることができます。

主要ブラウザが画像形式も含めて、完璧にサポートしてくれたら問題なく利用できるでしょう。
利用される際はサポート状況も踏まえて、ベンダープレフィックスやフォールバックを忘れずに使用してください。