CSSにBase64画像を埋め込むメリット・デメリット

background-image url() の中にBase64でアイコン画像を直接書き込むのが効くのはどんな時か。逆にやってはいけないケースは何か。HTTPリクエスト削減と+33%膨張のトレードオフを実用ベースで整理しました。

CSS埋込が効くシーン3つ

数百バイト〜数KBの小さなアイコン：リストの先頭マーカー、ボタンの装飾、矢印やチェックマーク等。1リクエストにかかるTCP/TLSのコストの方が画像本体より重い領域。
クリティカルレンダリングパスに乗せたい画像：ファーストビューのロゴ／背景。CSSと一緒にBase64として送り込めば、追加の通信なしでDOM構築と同時に描画できる。
オフラインで動く必要があるWebアプリ：Service Workerでキャッシュする手間を省き、CSS自体に画像を埋め込んでしまう。

逆にやってはいけない4ケース

数十KBを超える写真：+33%膨張でCSSバンドルが太り、初回ロードを逆に遅くする。
複数ページで使い回す画像：通常URL参照ならブラウザキャッシュが効くが、CSS埋込は各CSSファイルに毎回入る。
CDNで配信して圧縮率を稼ぎたい画像：CDNの画像最適化（WebP変換・サイズ別配信）の効力を失う。
CSPで img-src 'self' しか許可しない環境：Data URIは img-src data: 許可が必要。設定上の見落としで弾かれる事故が起きやすい。

具体的な書き方

PNGアイコンを背景にする場合の書き方は次の通り。data:image/png;base64, の prefix と、改行なしの1行で書きます（古いCSSパーサが行折りを誤認することがあるため）。

.check-icon {
  width: 16px;
  height: 16px;
  background-image: url("data:image/png;base64,iVBORw0KGgo...AAAANSUhEUgAAEA...");
  background-size: contain;
}

SVGはBase64より「非Base64」の方が短い

SVGはテキスト形式なので、Base64化するとサイズが+33%増えるだけで何の得もありません。RFC 2397はBase64必須ではないので、SVGはエスケープしてそのまま埋め込む方が短くなります。

/* Base64版（長い） */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");

/* 非Base64版（短い） */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");

ただし、CSSのurl()内で%と"と#はパーセントエンコードが必要です。SVGの<svg fill="#000">の#は%23に置換しないとURLパーサに食われます。

ブラウザキャッシュとの関係

通常URL参照の画像は Cache-Controlヘッダで長期キャッシュできるため、2回目以降のページロードは画像を取りに行きません。CSS埋込のBase64画像はCSSの一部なので、CSSのCache-Controlに連動します。CSSは比較的短いキャッシュ期間（数時間〜数日）にしているサイトが多く、長期間有効な画像専用キャッシュより効率が落ちます。

本ツールの使い方

画像リサイズでアイコンを16px〜32px等に整える。
画像圧縮で容量を最小化（+33%膨張前提なので元を小さく）。
画像⇔Base64変換で「Data URI付き」を選択してコピー。
CSSのbackground-image: url("...")に1行で貼り付け。