HTMLにBase64を埋め込む方法

HTMLにBase64データを埋め込むことで、画像、音声、フォントなどのリソースを個別のファイルリクエストなしにHTMLドキュメントに直接含めることができます。これはURLを受け付ける要素属性でdata URIスキームを使って行います。

画像：

<!-- Inline PNG image -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..."
     alt="Small icon" width="20" height="20" />

<!-- Inline JPEG -->
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ..."
     alt="Photo thumbnail" />

<!-- Inline SVG (can also be Base64-encoded) -->
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL..."
     alt="Vector graphic" />

ファビコン：

<link rel="icon" href="data:image/png;base64,iVBORw0KGgo..." />

埋め込みオーディオ：

<audio controls>
  <source src="data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAA..."
          type="audio/mp3" />
</audio>

アンカーダウンロードリンク：

<a href="data:text/csv;base64,TmFtZSxBZ2UKSm9obiwzMAo="
   download="data.csv">Download CSV</a>

パフォーマンスに関する考慮事項：

• Base64画像は元のバイナリファイルより約33%大きくなります。ただし、HTTPリクエストを1つ削減できるため、非常に小さな画像（2-5KB未満）では正味でプラスになることがあります。
• Base64で埋め込まれたリソースはブラウザが個別にキャッシュできません。HTMLページが読み込まれるたびに、埋め込みデータもドキュメントの一部として再ダウンロードされます。
• 大きなBase64文字列はHTMLドキュメントサイズと初期パース時間を増加させます。ブラウザはレンダリング前にBase64文字列全体をデコードする必要があります。
• gzip/Brotli圧縮により、Base64テキストは効果的に圧縮されるため、サイズ増加は部分的に軽減されます。

ビルドプロセスでのBase64 HTML生成： Webpackの url-loader やViteの ?inline クエリのようなツールは、ビルドステップで小さなアセットをBase64 data URIに自動変換できます。サイズ閾値を適用して、例えば4KB未満のファイルをインライン化し、大きなアセットには個別ファイルを使用します。

アクセシビリティ： 外部参照の画像と同様に、Base64埋め込み画像にも必ず意味のある alt テキストを提供してください。スクリーンリーダーはBase64画像データを分析できません。