Data URIの構造とコンポーネント
Data URI（data: URL）の構造を理解し、ファイルコンテンツをURLに直接埋め込む方法、コンポーネント部品、サイズ制限、Web開発での一般的なユースケースを学びます。
Special Formats
詳細な説明
Data URI
Data URIを使用すると、HTML、CSS、JavaScriptに小さなファイルをURL文字列として直接埋め込むことができ、個別のHTTPリクエストが不要になります。
構文
data:[<メディアタイプ>][;base64],<データ>
data:text/html;charset=utf-8,<h1>Hello</h1>
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
data:application/json,{"key":"value"}
コンポーネント
| コンポーネント | 必須 | 例 |
|---|---|---|
| スキーム | はい | data: |
| メディアタイプ | いいえ（デフォルトはtext/plain;charset=US-ASCII） |
image/png、text/html |
| Base64フラグ | いいえ | ;base64 |
| データ | はい | 実際のコンテンツ |
サイズに関する考慮事項
- 仕様に厳密な制限はないが、ブラウザには実用的な制限がある
- Internet ExplorerはData URIを32KBに制限していた
- モダンブラウザは数MBを処理できるがパフォーマンスは低下する
- Data URIはBase64エンコード時に元のバイナリより33%大きくなる
- 個別にキャッシュできない — 含むドキュメントと一緒にキャッシュされる
セキュリティ
data:URIはフィッシング攻撃に使用される可能性がある- モダンブラウザは
data:URIへのトップレベルナビゲーションをブロック - CSPは
default-srcや特定のディレクティブでdata: URIの使用を制限可能
ユースケース
Data URIはメールテンプレート（外部画像がブロックされる場合）、クリティカルCSS最適化（小さなアイコンのインライン化でHTTPリクエストを削減）、小さなアセットをインライン化するビルドツール、サーバーなしでJavaScriptでダウンロード可能なコンテンツを生成する場合に使用されます。その構造を理解することでレンダリング問題のデバッグとWebパフォーマンスの最適化に役立ちます。