最適化された装飾画像を配信する

ウェブ機能: image-set()

CSS を介して最適化された装飾画像を配信すると、視覚的な品質を損なうことなく、知覚されるパフォーマンスが向上します。image-set() CSS 関数を使用すると、1 つの背景画像またはマスク画像に対して複数のオプションをブラウザに提供できます。最新の形式（AVIF や WebP など）を、さまざまな解像度（1x や 2x など）とともに指定できます。ブラウザは、ユーザーのデバイスに適切なピクセル密度を提供する、互換性のある最小の画像を動的に選択します。

注意: 画像が Largest Contentful Paint（LCP）要素（大きなヒーローバナーなど）である可能性が高い場合、CSS で image-set() を介して参照される画像は、ブラウザのプリロード スキャナで検出できないことに注意してください。これにより、画像の読み込みが大幅に遅れ、LCP に悪影響を及ぼす可能性があります。LCP 候補については、代わりに標準の HTML <img> タグまたは <picture> タグを使用するか、media 属性を指定した <link rel=preload> オプションを使用して画像をプリロードすることを検討してください。

実装

image-set() 関数は、CSS が <image> 値を想定する場所（最も一般的には background-image、content、mask-image）で使用されます。type() で画像形式を指定し、解像度（1x や 2x など）を指定すると、最適な結果が得られますが、どちらの引数も省略可能です。

.gallery-item {
  /* Provide multiple resolutions and formats using image-set() */
  /* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG). 
     The browser will stop at the first supported format. */
  background-image: image-set(
    url("gallery.avif") type("image/avif") 1x,
    url("gallery-2x.avif") type("image/avif") 2x,
    url("gallery.webp") type("image/webp") 1x,
    url("gallery-2x.webp") type("image/webp") 2x,
    url("gallery.jpg") type("image/jpeg") 1x,
    url("gallery-2x.jpg") type("image/jpeg") 2x
  );
  
  /* Standard decorative properties */
  background-size: cover;
  background-position: center;
}

代替戦略

image-set() 関数をサポートしていない古いブラウザの場合は、image-set() ルールの前に標準の画像宣言を指定しなければなりません。このプログレッシブ エンハンスメント戦略は、CSS のカスケード特性に依存しています。サポートされていないルールは無視されます。

.gallery-item {
  /* MANDATORY: Fallback for browsers that do not support image-set() */
  background-image: url("gallery.jpg");
  
  /* Modern browsers will apply this and override the fallback */
  background-image: image-set(
    url("gallery.avif") type("image/avif") 1x,
    url("gallery-2x.avif") type("image/avif") 2x,
    url("gallery.jpg") type("image/jpeg") 1x,
    url("gallery-2x.jpg") type("image/jpeg") 2x
  );
}