画像をBase64文字列に変換したり、Base64を画像に復元します。
Base64はバイナリデータをASCII文字列に変換するエンコード方式です。画像、音声、動画などのバイナリファイルをテキスト形式で表現できるため、メール、JSON、XMLといったテキストベースのプロトコルでバイナリデータを送信できます。64種類のASCII文字(A-Z、a-z、0-9、+、/)だけを使ってあらゆるバイナリデータを表現します。HTMLでData URLとして画像をインライン挿入したり、APIレスポンスに画像を含めたりする際に便利です。ただし、元のサイズよりも約33%増加するという欠点があります。
Base64画像はさまざまなWeb開発の場面で活用されます。CSSのbackground-imageで小さなアイコンをインライン挿入すると、HTTPリクエスト数を減らしてページの読み込み速度を改善できます。メールテンプレートでは外部画像のブロックを回避するために使われます。単一のHTMLファイルとして完全なWebページを配布する場合、すべての画像をBase64として含めることができます。RESTful APIでは画像をJSONレスポンスに直接含め、別途ファイルアップロードなしで送信できます。Canvas APIで生成した画像をサーバーに送信する際にもBase64を使用します。
Data URLはファイルをURL形式で表現するスキーマです。形式はdata:[<mediatype>][;base64],<data>です。例: data:image/png;base64,iVBORw0KG... mediatypeはMIMEタイプで、image/png、image/jpeg、image/gifなどを指定します。;base64はエンコード方式を示し、その後に実際のBase64文字列が続きます。HTMLのimgタグで<img src="data:image/png;base64,...">のように直接使用できます。CSSでもbackground: url(data:image/svg+xml;base64,...)として活用されます。ブラウザはData URLを通常のURLと同じように処理して画像を表示します。
Base64画像を使用する際はパフォーマンスを考慮する必要があります。小さな画像(1〜2KB以下)は、HTTPリクエストのオーバーヘッドよりもインライン挿入が有利です。大きな画像はBase64による33%のサイズ増加とパース時のオーバーヘッドで、かえって遅くなることがあります。Base64画像はブラウザのキャッシュを活用できないため、毎回HTML/CSSと一緒にダウンロードされます。繰り返し使用される画像は、別ファイルとして提供しキャッシュさせるのが望ましいです。Gzip圧縮はBase64文字列にも効果的なので、サーバー側で有効にしてください。重要なコンテンツではなく、装飾用の画像やアイコンにBase64を使うのが適切です。
Base64画像にもセキュリティリスクがあります。ユーザーがアップロードした画像をBase64に変換して表示する際は、XSS攻撃に注意が必要です。SVG画像はJavaScriptを含むことができるため、特に危険です。Content-Security-Policyヘッダーでdata:スキーマの使用を制限できます。ファイルサイズの上限を設定して、メモリ枯渇攻撃を防いでください。画像タイプの検証を行い、許可されたMIMEタイプ(image/png、image/jpeg)のみを処理するようにします。サーバー側で実際の画像ファイルかどうかを検証し、悪意のあるコードが含まれていないか確認する必要があります。
ほとんどのプログラミング言語はBase64エンコードを標準で提供しています。JavaScriptはbtoa()でエンコード、atob()でデコードし、FileReader APIでファイルをBase64として読み込めます。Pythonはbase64モジュールのb64encode()とb64decode()を提供します。PHPはbase64_encode()とbase64_decode()関数を使用します。Javaはjava.util.Base64クラスでgetEncoder()とgetDecoder()を提供します。Node.jsはBuffer.from(data).toString("base64")でエンコードし、Buffer.from(base64, "base64")でデコードします。画像ファイルを読み込んでBase64に変換する処理は、すべての言語で標準ライブラリを使って簡単に実装できます。