CSSにBase64を埋め込む方法

CSSでは url() 関数が使用されるすべての場所でdata URIがサポートされており、画像、フォント、その他のアセットをスタイルシートに直接埋め込むことができます。追加のHTTPリクエストは不要になりますが、CSSファイルのサイズは増加します。

背景画像：

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

.hero-pattern {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAA...);
  background-repeat: repeat;
}

カスタムフォント：

@font-face {
  font-family: "MyFont";
  src: url(data:font/woff2;base64,d09GMgABAAAAAAR...) format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

カスタムカーソル：

.custom-cursor {
  cursor: url(data:image/png;base64,iVBORw0KGgo...) 16 16, auto;
}

リストスタイル画像：

ul.custom-bullets {
  list-style-image: url(data:image/svg+xml;base64,PHN2Zy...);
}

SVGの特殊なケース： CSSでのSVGはBase64を使わず、URLエンコードで埋め込むこともできます：

.icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='...'%3E...");
}

URLエンコードされたSVGは、Base64エンコードされた同等のものより小さくなることが多いです。SVGは元々テキストであるため、Base64は33%のオーバーヘッドを追加しますが、URLエンコードは特殊文字のみをエスケープします。SVGOMGなどのツールで埋め込み前にSVGを最適化できます。

パフォーマンスガイドライン：

• 4KB未満のアセットをBase64としてCSSに埋め込む。大きなアセットは個別ファイルにすべきです。
• 埋め込みフォントはCSSの初期パース時間を増加させます。フォントファイルが50KBを超える場合は、適切なキャッシュヘッダーで個別ファイルとして配信しましょう。
• Base64データを含むCSSファイルがレンダリングブロッキングの場合、サイズの増加がFirst Contentful Paintに直接影響します。重要でない埋め込みアセットは非同期読み込みの別スタイルシートに移動することを検討してください。
• ビルドツールで閾値を自動化できます。Vite、Webpack、PostCSSプラグインは、設定可能なサイズ制限以下のアセットをインライン化できます。

よくある間違い： 同じBase64画像を複数のCSSルールに埋め込むこと。CSSカスタムプロパティや共有クラスに抽出して、重複データによるスタイルシートの肥大化を防ぎましょう。