【CSSの便利機能】image-setプロパティでRetinaディスプレイにも対応した高画質画像を実現

image-set プロパティは、CSSで複数の画像を指定し、ブラウザに最適な画像を選択させる機能です。これは、高解像度ディスプレイや様々なデバイスに対応したレスポンシブな画像配信に役立ちます。

構文

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

上記の例では、image1.jpg は 1 倍の解像度、image1-2x.jpg は 2 倍の解像度で用意されています。ブラウザは、デバイスの解像度や表示サイズに基づいて、最適な画像を選択します。

主な機能

パフォーマンス向上
ブラウザが適切な画像を選択することで、ページの読み込み速度を向上できます。
レスポンシブな画像配信
画面サイズや解像度に応じて、適切な画像を表示できます。
ブラウザによる自動選択
ブラウザは、デバイスやネットワーク環境に合わせて、最適な画像を自動的に選択します。
複数の画像を指定可能
異なる解像度、ファイル形式、サイズなどの画像を複数指定できます。

image-set プロパティは、background-image プロパティと組み合わせて使用します。
image-set プロパティは、比較的新しい機能であり、すべてのブラウザで完全にはサポートされていません。

例

.image {
  background-image: image-set(
    url(image-small.jpg) 400w,
    url(image-medium.jpg) 800w,
    url(image-large.jpg) 1200w
  );
  background-size: cover;
}

この例では、画面幅が 400px 以下の場合は image-small.jpg、400px ～ 800px 以下の場合は image-medium.jpg、800px を超える場合は image-large.jpg を表示します。

"Miscellaneous" における役割

image-set プロパティは、CSS の "Miscellaneous" カテゴリに属します。このカテゴリは、装飾やレイアウト以外の、様々な機能を提供するプロパティを格納しています。image-set プロパティは、画像の表示方法を制御することで、Web ページの外観とパフォーマンスを向上させるのに役立ちます。

Retina ディスプレイ対応

この例では、Retina ディスプレイ向けに高解像度の画像を自動的に選択します。

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

メディアクエリと組み合わせたレスポンシブ画像

この例では、メディアクエリを使用して、画面サイズに応じて異なる画像を表示します。

/* デスクトップ向け */
@media (min-width: 768px) {
  .image {
    background-image: image-set(
      url(image-large.jpg) 1x,
      url(image-large-2x.jpg) 2x
    );
  }
}

/* スマートフォン向け */
@media (max-width: 767px) {
  .image {
    background-image: image-set(
      url(image-small.jpg) 1x,
      url(image-small-2x.jpg) 2x
    );
  }
}

複数のファイル形式に対応

この例では、WebP 形式と JPEG 形式の画像を、ブラウザのサポート状況に応じて選択します。

.image {
  background-image: image-set(
    url(image.webp) 1x,
    url(image.jpg) 1x
  );
}

アートディレクション

この例では、デバイスピクセル比 (dppx) に基づいて、異なる画像を表示します。

.image {
  background-image: image-set(
    url(image-low-res.jpg) 1.5dppx,
    url(image-mid-res.jpg) 2dppx,
    url(image-high-res.jpg) 3dppx
  );
}

カスタムファイル名

この例では、ファイル名の命名規則を使用して、解像度を指定します。

.image {
  background-image: image-set(
    url(image-1200.jpg) 1x,
    url(image-2400.jpg) 2x
  );
}

これらの例はほんの一例であり、image-set プロパティを使用して様々なバリエーションを作成することができます。

複数の画像を指定する場合は、ファイルサイズが大きくなることに注意する必要があります。
古いブラウザでは、image-set プロパティを認識できない可能性があります。
image-set プロパティは、比較的新しい機能であり、すべてのブラウザで完全にはサポートされていません。

そこで、image-set の代替方法として以下の3つの方法をご紹介します。

picture 要素

picture 要素は、ブラウザがサポートする最適な画像ソースを自動的に選択する機能を提供します。構文は以下の通りです。

<picture>
  <source srcset="image-small.jpg" sizes="(max-width: 400px) 100vw">
  <source srcset="image-medium.jpg" sizes="(max-width: 800px) 100vw">
  <source srcset="image-large.jpg" sizes="(min-width: 801px) 100vw">
  <img src="image-large.jpg" alt="画像の説明">
</picture>

srcset 属性と sizes 属性

<img> 要素に srcset 属性と sizes 属性を組み合わせることで、picture 要素と同様の機能を実現できます。

<img src="image-large.jpg"
     srcset="image-small.jpg 400w,
            image-medium.jpg 800w,
            image-large.jpg 1200w"
     sizes="(max-width: 400px) 100vw,
            (max-width: 800px) 50vw,
            100vw">

この例は、picture 要素の例と同様の動作をします。

JavaScript による画像差し替え

JavaScript を使用して、ブラウザの情報を取得し、それに応じて適切な画像を挿入する方法もあります。

const img = document.querySelector('img');
const width = window.innerWidth;

if (width <= 400) {
  img.src = 'image-small.jpg';
} else if (width <= 800) {
  img.src = 'image-medium.jpg';
} else {
  img.src = 'image-large.jpg';
}

この方法は、より柔軟な制御が可能ですが、JavaScript の知識が必要となります。

方法	利点	欠点
`picture` 要素	ブラウザサポートが良好	コードが冗長になる
`srcset` 属性と `sizes` 属性	コードが簡潔	古いブラウザでのサポートが限られている
JavaScript による画像差し替え	柔軟性が高い	JavaScript の知識が必要