画像 Base64 変換ツール

画像を Base64 に変換するしくみ

Base64 は、画像ファイルのバイト列を 64 種類の文字からなるプレーンテキストに変換します。3 バイトごとに 4 文字になるため、テキストは元のファイルより約 33% 大きくなります。data URI では、data:image/png;base64, のように MIME タイプを含む短いプレフィックスを先頭に付けます。これにより、ブラウザは画像の URL を指定できる場所ならどこでも、このテキストを画像として表示できます。

画像の読み込みとエンコードは、お使いのブラウザ内でローカルに行われます。アップロードはされないため、非公開のスクリーンショットや未発表のデザインがデバイスの外に出ることはありません。

どの出力を使えばよいですか？

• Data URI：src 属性、JavaScript、URL を受け付ける JSON フィールドに使います。
• Base64 文字列のみ：エンコードしたバイト列だけを受け取る API 向けです。通常は MIME タイプやファイル名を別のフィールドで指定します。
• HTML の img タグ：ページやテンプレートにそのまま貼り付けられます。
• CSS の background-image：スタイルシートでアイコンや装飾画像に使います。
• Markdown：ドキュメントやメモ用です。GitHub をはじめ、一部のレンダラーは data URI の画像を表示しません。

対応形式の一覧

Base64 文字列の先頭の数文字を見ると、ファイルの種類がわかります。この部分に各形式のファイルシグネチャがエンコードされているためです。

画像のインライン化が効果的な場合

data URI を使うとネットワークリクエストを 1 回減らせ、ファイルを単体で完結させられます。数 KB 程度の小さなアイコンやロゴ、1 ファイルで完結する HTML レポート、ぼかした小さなプレースホルダー、JSON で送る画像などに適しています。一方、大きな写真には向きません。サイズが 3 分の 1 増え、ブラウザで個別にキャッシュできず、HTML や CSS のファイルも重くなり、それをダウンロードし終えるまで何も描画されません。こうしたコストは、節約できるリクエスト 1 回分を上回るのが普通です。サイトで Content-Security-Policy を送信している場合は、インライン画像のために img-src に data: を追加する必要もあります。