Data URIは、ファイルの内容をdata:[タイプ];base64,[データ]という形でHTMLやCSSに直接埋め込み、サーバーへの別リクエストを不要にする仕組みだ。日本のフィーチャーフォン（ガラケー）時代のiモードメールでは添付画像のサイズ制限が厳しく、小さなアイコンを本文に直接埋め込むこの発想自体が、当時のメール文化に近いものだった。
なぜ小さいアイコンほど埋め込みが有利なのか
画像を1枚読み込むごとに1回のHTTPリクエストが発生し、モバイル回線ではその往復にかかる時間が画像自体のサイズより負担になることがある。小さなアイコンやスピナーをData URIとしてCSSに埋め込めば、この往復を丸ごと省略できる——ただし埋め込みすぎるとCSSファイル自体が肥大化し、かえって初回読み込みが遅くなる点は日本の高速な固定回線環境でも変わらない。
利点
- HTTPリクエストが減る——小さなアイコンや背景画像に便利。
- ファイルがドキュメントに「くっついている」ため、CDNのパスが変わっても壊れない。
- 本物の画像が読み込まれる前に即座に表示したいプレースホルダーに向いている。
制約
- Base64はバイナリファイルに比べてデータサイズを約3分の1増加させる。
- 大きなData URIはHTML/CSSファイル自体を肥大化させ、ページとは別にキャッシュできない。
- 大きな画像や頻繁に再利用される画像には、キャッシュ可能な別ファイルにするほうが再訪問時にほぼ常に効率的。
SVGはBase64ではなくテキストとして
ラスター形式とは異なり、SVGはテキスト（XML）であるため、必ずしもBase64でエンコードする必要はない——特殊文字をpercent-encodingで正しくエスケープするだけで十分だ（data:image/svg+xml,%3Csvg...）。この方法は結果がやや小さく、CSSファイル内でそのままテキストとして編集・レビューできる状態を保てる。