データURIにおけるBase64エンコーディング

データURIにおけるBase64の仕組み

Base64は、64個の印刷可能なASCII文字（A-Z、a-z、0-9、+、/）を使用してバイナリデータを表現するバイナリからテキストへのエンコーディングです。データURIでは、;base64フラグがブラウザにカンマ以降のペイロードがBase64エンコードされていることを伝えます。

エンコーディングプロセス

1. ファイルの生のバイナリバイトを取得
2. 3バイト（24ビット）のグループに分割
3. 各24ビットグループを4つの6ビット値に分割
4. 各6ビット値をBase64文字にマッピング
5. 入力長が3の倍数でない場合、=でパディング

なぜ33%のオーバーヘッドか？

3バイトの入力が4文字のBase64出力を生成するため、エンコードサイズは常に元の4/3（約133%）です。10 KBの画像の場合、Base64表現は約13.3 KBです。データURIプレフィックス（data:image/png;base64,）を追加すると、合計オーバーヘッドはやや大きくなります。

元のファイル:     10,000 バイト
Base64エンコード: 13,336 バイト  (+33.4%)
データURIプレフィックス: 22 バイト
合計データURI:    13,358 バイト  (+33.6%)

Base64が必要な場合

バイナリファイルタイプにはBase64が必要です：

• 画像: PNG, JPEG, GIF, WebP, ICO
• フォント: WOFF, WOFF2, TTF
• 音声/動画ファイル
• PDFドキュメント
• その他の非テキストバイナリデータ

Base64がオプションの場合

テキストベースのコンテンツでは、代わりにパーセントエンコーディングを使用できます：

• SVG画像 (data:image/svg+xml,...)
• プレーンテキスト (data:text/plain,...)
• HTML (data:text/html,...)
• CSS (data:text/css,...)

SVGの場合、ほとんどのSVGコンテンツがエンコード不要な印刷可能ASCIIであるため、パーセントエンコーディングの方がBase64より小さなデータURIを生成することが多いです。