CSSでBase64画像を使う方法

.icon {
  background-image: url('data:image/webp;base64,UklGR...');
  background-size: contain;
  background-repeat: no-repeat;
}

引用符で囲んだURLを使う

url()内の完全なData URLを引用符で囲むと、解析エラーを避け、宣言をコピーしやすくできます。

装飾画像を選ぶ

CSS背景にはaltテキストがありません。意味のある画像は通常HTMLのimg要素を使ってください。

トレードオフを測る

インライン化はリクエストを1つ減らせますが、スタイルシートが大きくなり個別キャッシュもできません。ページ専用の小さな素材に適しています。