image-set()

概要

デバイスの画面解像度に応じて適切な画像を自動選択するためのCSS関数です。高DPIディスプレイには高解像度画像を、通常のディスプレイには標準解像度画像を提供でき、パフォーマンスと表示品質のバランスを最適化します。背景画像でのレスポンシブ画像対応に特に有用です。

対応ブラウザ

基本構文

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

実務での使いどころ

• 高DPIディスプレイ向け背景画像の最適化

  Retinaディスプレイには2x画像を、通常のディスプレイには1x画像を自動提供し、帯域幅を節約しながら高品質な表示を実現します。

注意点

アクセシビリティ

• 背景画像に重要な情報が含まれる場合は、テキストによる代替情報を提供してください。

参考リンク

• MDN Web Docs — image-set()
• Can I use — image-set()