CreaTools LogoCreaTools
Tech Notes
Base64

Data URIの使いどころ｜私が使う場面、使わない場面

2025-12-03

:::note ※Data URIを使うか迷っている人向けの「判断用」記事です :::

結論（私の判断基準）

  • 使う場面：10KB以下のアイコン、ファビコン、メールHTML
  • 使わない場面：写真、バナー、繰り返し使う画像
  • 迷ったら：外部ファイル

Data URIは便利だが、私は基本的に避けている。乱用すると痛い目に遭う。

🚀 Data URI生成 → Base64エンコーダー

私が「使わない」と決めた経緯

「外部リクエストなしで画像を表示できる」と聞いて、積極的に使っていた。

結果：

  • CSSが肥大化した
  • デバッグしにくくなった
  • キャッシュが効かなくなった

便利さに惹かれて乱用すると、後で苦労する。

今は「仕方なく使う技術」として位置づけている。

Data URIとは

ファイルをURLとして埋め込む仕組み。

data:[MIMEタイプ];base64,[Base64文字列]

外部ファイルを参照せず、HTML/CSS内に直接データを書ける。

私がData URIを「使う」場面

場面1：10KB以下のアイコン

<img src="data:image/png;base64,iVBORw0KGgo..." alt="icon">

小さいアイコンなら、リクエスト削減のメリットがある。

場面2：ファビコン

<link rel="icon" href="data:image/x-icon;base64,...">

ファビコンは小さいし、1回しか使わない。埋め込んでいい。

場面3：メールHTML

メールHTMLでは外部画像がブロックされることがある。Data URIなら確実に表示される（ただしメールクライアントによる）。

私がData URIを「使わない」場面

場面1：写真・バナー

写真は大きい。Base64化すると33%肥大化する。CDNに置いてキャッシュさせた方が速い。

場面2：繰り返し使う画像

同じ画像を複数箇所で使うなら、外部ファイルにして1回だけダウンロードさせる。Data URIだと毎回埋め込むことになる。

場面3：本番環境の重要な画像

Data URIは壊れたとき原因が分かりにくい。本番環境の重要な画像は外部ファイルにする。

HTMLでの使用

<img src="data:image/png;base64,iVBORw0KGgo..." alt="">

CSSでの使用

.icon {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB...');
}

SVGの場合（Base64不要）

SVGはテキストなのでBase64化せずに埋め込める。

background-image: url('data:image/svg+xml,<svg>...</svg>');

ただしURLエンコードが必要な文字（#など）に注意。確実に動かすならBase64化した方が安全。

注意点

  • IEは32KB制限があった（IE11でも）
  • メールHTML内では対応がまちまち
  • CSP（Content Security Policy）で data: がブロックされることがある

迷ったときの判断

迷い私の判断
Data URIを使うか10KB以下なら検討、それ以上は外部ファイル
SVGを埋め込むか小さいならData URI、大きいなら外部ファイル
本番環境で使うか重要な画像は外部ファイル

この記事で解決しない場合

Data URIは便利だが、乱用すると痛い目に遭う。小さいファイルに限定して使う。