Data URIスキームの解説

data URI（data URLとも呼ばれます）は、Webドキュメント内にファイルコンテンツを直接インラインで埋め込むためのURIスキームです。外部ファイルを指すのではなく、URI自体にプレーンテキストまたはBase64としてエンコードされた実際のデータが含まれます。

構文：

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

• data: -- スキーム識別子（必須）
• <mediatype> -- データのMIMEタイプ。例：image/png、text/html、application/pdf。省略した場合、デフォルトは text/plain;charset=US-ASCII
• ;base64 -- データがBase64エンコードされていることを示すオプションのフラグ。このフラグがない場合、データはURLエンコードされたテキストとして扱われます
• <data> -- 実際のコンテンツ。URLエンコードまたはBase64エンコードされたもの

使用例：

<!-- Plain text -->
<a href="data:text/plain;charset=utf-8,Hello%20World">Download</a>

<!-- Base64-encoded PNG image -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />

<!-- Base64-encoded SVG -->
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i..." />

<!-- Inline CSS font -->
@font-face {
  font-family: 'MyFont';
  src: url(data:font/woff2;base64,d09GMgABAA...) format('woff2');
}

ブラウザサポート： 現代のブラウザはすべてdata URIに対応しています。ただし、実用上のサイズ制限があります。Internet Explorer 8には32KBの制限がありました。現代のブラウザは数メガバイトまで処理できますが、大きなdata URIではパフォーマンスが著しく低下します。コンテンツを個別にキャッシュできず、インラインでパースする必要があるためです。

セキュリティ上の注意： 一部のブラウザは特定のコンテキストでdata URIを制限しています。例えば、ChromeはHTMLコンテンツのdata URIへのトップレベルナビゲーションをブロックします（アドレスバーにdata URIを入力できません）。<script> タグ内のdata URIは、Content Security Policy（CSP）ディレクティブによってブロックされる場合があります。

data URIを使うべきケース：

• 4KB未満の小さなアセットでHTTPリクエスト数を削減したい場合
• 自己完結型でなければならない単一ファイルのHTMLドキュメント
• 小さなアイコンのCSSスプライト代替
• 外部リソースの読み込みが不安定なメールテンプレート