CSS背景画像にデータURIを使用する

CSSバックグラウンド画像とデータURI

データURIの最も一般的な用途の1つは、小さな画像をCSSのbackground-image宣言に直接埋め込むことです。この手法により、背景テクスチャ、アイコン、UIパターンに対する追加のラウンドトリップが必要なHTTPリクエストを排除できます。

基本的なCSS構文

.icon-search {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxu...');
  background-size: 16px 16px;
  background-repeat: no-repeat;
}

パーセントエンコードされたSVGを使用する場合（多くの場合より小さい）：

.icon-arrow {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
}

CSSデータURIが効果的な理由

ブラウザがCSSを解析すると、外部のurl()参照を発見し、レンダリングを完了する前にそれらをフェッチする必要があります。小さな画像をインライン化することで：

1. レンダーブロッキングリクエストを排除 — 画像データはCSSと同時に利用可能
2. 総接続数を削減 — 必要なTCP接続が少ない
3. CORSの問題を回避 — データがインラインなのでクロスオリジンの懸念なし
4. オフラインで動作 — 埋め込みアセットにネットワーク不要

サイズとキャッシュのトレードオフ

CSSファイルにデータURIを埋め込むと、CSSファイル自体が大きくなります。CSSがキャッシュされると、埋め込まれた画像もキャッシュされます。ただし、1つの画像を変更すると、CSSファイル全体のキャッシュが無効になります。頻繁に変更される画像には、代わりに外部ファイルを使用してください。