データURIの基本と構文の解説

データURIスキームの理解

データURI（Uniform Resource Identifier）は、data:スキームを使用してファイルコンテンツをドキュメントに直接埋め込む方法です。リモートサーバーを指す従来のURLとは異なり、データURIは実際のデータをインラインで含みます。正式な構文は：

data:[<mediatype>][;base64],<data>

コンポーネントの内訳

• data: — URIスキーム識別子。次のコンテンツがフェッチするURLではなくインラインデータであることをブラウザに伝えます。
• <mediatype> — text/plain、image/png、application/jsonなどのオプションのMIMEタイプ文字列。省略した場合、デフォルトはtext/plain;charset=US-ASCII。
• ;base64 — データがBase64エンコードされていることを示すオプションのフラグ。このフラグがない場合、データはパーセントエンコード（URLエンコード）されていると見なされます。
• ,<data> — Base64エンコードされたバイナリまたはパーセントエンコードされたテキストの実際のコンテンツ。

有効なデータURIの例

シンプルなテキストデータURI：

data:text/plain;charset=utf-8,Hello%20World

Base64エンコードされたPNGピクセル：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

base64 vs パーセントエンコーディングの使い分け

HTML、CSS、SVGなどのテキストコンテンツでは、印刷可能なASCII文字がそのまま通過するため、パーセントエンコーディングの方が小さな結果を生成することがあります。画像、音声、フォントなどのバイナリコンテンツでは、バイナリバイトのパーセントエンコーディングは非常に冗長になる（各バイトが%FFのような3文字になる）ため、Base64が必要です。

RFCにおけるデータURI

データURIは1998年に公開されたRFC 2397で定義されています。古い規格ですが、すべてのモダンブラウザで広くサポートされており、HTTPリクエストを削減するパフォーマンス最適化に一般的に使用されています。