解像度を最適化した疑似要素

ウェブ機能: image-set()

CSS 疑似要素（::before や ::after など）で解像度を最適化した画像を使用すると、余分な DOM ノードで HTML を煩雑にすることなく、装飾的なアイコンや構造的なグラフィックを追加できます。疑似要素と image-set() CSS 関数を組み合わせることで、複数の形式（AVIF や WebP など）と解像度（1x や 2x など）をブラウザに提供できます。ブラウザは、ユーザーのデバイスの機能に最適な画像を自動的に選択します。

実装

image-set() 関数は、疑似要素の content プロパティ内で直接使用することも、background-image プロパティ内で使用することもできます（content: "" を設定する場合）。type() で画像形式を指定し、解像度（1x や 2x など）を指定すると、最適な結果が得られますが、どちらの引数も省略可能です。

.icon-button::before {
  /* Using image-set directly in the content property */
  /* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG). 
     The browser will stop at the first supported format. */
  content: image-set(
    url("icon.avif") type("image/avif") 1x,
    url("icon-2x.avif") type("image/avif") 2x,
    url("icon.webp") type("image/webp") 1x,
    url("icon-2x.webp") type("image/webp") 2x,
    url("icon.png") type("image/png") 1x,
    url("icon-2x.png") type("image/png") 2x
  );
  
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

代替戦略

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

.icon-button::before {
  /* MANDATORY: Fallback for browsers that do not support image-set() */
  content: url("icon.png");
  
  /* Modern browsers will apply this and override the fallback */
  content: image-set(
    url("icon.avif") type("image/avif") 1x,
    url("icon-2x.avif") type("image/avif") 2x,
    url("icon.png") type("image/png") 1x,
    url("icon-2x.png") type("image/png") 2x
  );
}