手軽屋
ツール一覧

Data URLの使い所と落とし穴

Base64の出力先として一番よく使われる Data URL（data:スキーム）について、本来効くシーンと、よくある落とし穴を実用ベースで整理しました。

Data URLの仕様（RFC 2397）

Data URLは1998年制定のRFC 2397「The 'data' URL scheme」で定義された仕組みで、書式は
data:[<mediatype>][;base64],<data>
です。<mediatype> はMIMEタイプ（例：image/png）、;base64 は中身がBase64でエンコードされていることを示すフラグ、<data> が実データです。;base64 を省略するとパーセントエンコーディングのURL文字列として解釈されます。

本当に効く5シーン

  1. 1〜2KBの装飾アイコン：HTTPリクエスト1回のオーバーヘッドより小さい。
  2. HTMLメールのインライン画像：外部URLは「画像の表示」クリック必須でブロックされる。
  3. 動的生成した画像をすぐ表示：Canvas.toDataURL()でその場でプレビュー。
  4. JSON APIで画像を1フィールドに収める：multipart/form-dataが使えない環境向け。
  5. Service Worker未対応環境でのオフライン表示：CSSにアイコンを焼き込む。

落とし穴1：HTTPキャッシュが効かない

通常のhttps URL参照の画像はCache-Controlヘッダで長期キャッシュでき、2回目以降は通信ゼロで表示されます。Data URLは「URLそのものが画像」なので、HTTPキャッシュの対象になりません。同じ画像を100ページで使うと100回分の転送量が発生します（CSSに埋め込めばCSSのキャッシュには乗りますが、画像専用キャッシュより効率は落ちます）。

落とし穴2：+33%サイズ膨張

RFC 4648のBase64は3バイト→4文字に変換するため、出力は元バイナリの4/3倍。1MBの写真は1.33MBのBase64になります。改行ありなら数バイト上乗せ。「Base64にすれば軽くなる」は誤解で、必ず大きくなります。

落とし穴3：Content Security Policy（CSP）でブロック

CSPヘッダでimg-src 'self'だけを許可していると、Data URLは「セルフホスト由来ではない」と判定されてブロックされます。

/* NG: Data URLが弾かれる */
Content-Security-Policy: img-src 'self';

/* OK: data:を明示的に許可 */
Content-Security-Policy: img-src 'self' data:;

ローカル開発では映っていたのに本番のCSPで弾かれる、というのが典型的な事故パターン。本番投入前に本番と同じCSP設定で確認する習慣を。

落とし穴4：SVGはBase64より「非Base64」が短い

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

/* Base64版（長い） */
data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...

/* 非Base64版（短い・推奨） */
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...

ただし、#は%23に、"は%22にエスケープが必要。URLエンコードを使うと自動でやってくれます。

落とし穴5：ブラウザのURL長制限

現行のChrome／Firefox／Safari／Edgeは数MB〜数十MBのData URLを処理できますが、HTML属性内で書く場合、HTMLパーサの行長制限やソースマップでの取り回しの面から、数百KB以下に収めるのが現実的です。大きい画像はBase64ではなく通常のhttps URL参照に戻す方が、HTTPキャッシュも効いて高速です。

用途別の判断フロー

本ツールの使い方

  1. 画像圧縮で対象画像を最小化（Base64化で+33%膨張前提）。
  2. 画像⇔Base64変換で「Data URI付き」を選択。
  3. 「コピー」を押してクリップボードへ。
  4. HTML/CSS/JSONに1行で貼り付け。

関連ツール