画像をBase64にエンコードする方法

画像をBase64にエンコードするとは、画像ファイル（PNG、JPEG、GIF、SVG、WebPなど）の生のバイナリデータを読み取り、Base64テキスト文字列に変換することです。この文字列はHTML、CSS、JSONに直接埋め込むことができ、画像を読み込むための個別のHTTPリクエストが不要になります。

ブラウザでのJavaScript：

const input = document.querySelector('input[type="file"]');
input.addEventListener("change", () => {
  const reader = new FileReader();
  reader.onload = () => {
    const base64String = reader.result;
    // result is a data URI like "data:image/png;base64,iVBOR..."
  };
  reader.readAsDataURL(input.files[0]);
});

FileReader.readAsDataURL() メソッドはブラウザ側で最も簡単な方法です。MIMEタイプのプレフィックスを含む完全なdata URIが返され、<img> タグの src 属性にそのまま使用できます。

Node.jsの場合：

const fs = require("fs");
const imageBuffer = fs.readFileSync("photo.png");
const base64String = imageBuffer.toString("base64");
const dataUri = `data:image/png;base64,${base64String}`;

画像のBase64変換が適切なケース：

• 10KB未満の小さなアイコンやロゴで、HTTPリクエスト削減がパフォーマンス向上につながる場合。
• メールHTMLテンプレートで、外部画像リンクがメールクライアントにブロックされる可能性がある場合。
• 単一ファイルのHTMLエクスポートや自己完結型ドキュメントが必要な場合。

使用すべきでないケース：

• 大きな画像。500KBのJPEGはBase64にすると約667KBになり、ブラウザが個別にキャッシュできません。
• 複数ページで使用される画像。適切なキャッシュヘッダーで配信する個別ファイルの方がはるかに効率的です。
• 複数サイズが必要なレスポンシブ画像。Base64では srcset を使用できません。

Base64エンコードによる33%のサイズ増加は、HTML/CSSファイルがgzipやBrotli圧縮で配信される場合に部分的に相殺されます。Base64テキストは効果的に圧縮されるためです。ただし、ブラウザはレンダリング前にBase64文字列全体をデコードする必要があります。