CodeKitHubこのツールとは？
Base64とは、画像の生のバイトデータのようなバイナリデータを、文字と数字といくつかの記号だけを使ったプレーンテキストとして表現する方式です。プレーンテキストであるため、Base64エンコードされた画像は別ファイルとして参照する代わりに、HTML、CSS、JSONに直接埋め込むことができます。
「data URL」は、そのBase64テキストにファイルの種類をブラウザに伝える短いプレフィックス（data:image/png;base64,）を付けたものです。これにより、追加のリクエストなしでsrcやurl()属性にそのまま入れて表示できます。
なぜこれを使うのか？
- 両方の形式を一度に取得——HTML/CSS用の完全なdata URLと、JSONや設定ファイルへの埋め込み用の生のBase64（プレフィックスなし）。
- サーバーとの往復が不要：小さなアイコン、アバター、インライン画像で1回のHTTPリクエストを節約できる。
- 画像を再デコード・再保存するツールと異なり、元のファイルのバイトデータを正確に保持し、再エンコードや画質劣化がない。
- サイズの差を表示するので、利便性と引き換えに何を負担するか一目でわかる。
- プライバシー保護：ファイルはブラウザのFileReader APIでローカルに読み込まれ、外部に送信されることはありません。
使い方
- アップロードエリアをクリックするか、画像ファイルをドラッグ＆ドロップする。
- <img src>やCSSのbackground-imageに貼り付ける場合は、完全なdata URLをコピーする。
- JSON、YAML、あるいはファイル種別がすでにわかっている他の設定形式に埋め込む場合は、data:プレフィックスなしの生のBase64をコピーする。
- サイズに関する注記を確認する——Base64テキストは元のバイナリファイルよりおよそ3分の1大きくなります。
例
入力
12KBのPNGアイコンファイル。出力
data:image/png;base64,iVBORw0KGgoAAAANSU...（約16KBのテキスト）と、data:プレフィックスを除いた同じ文字列。約33%のサイズ増加はBase64エンコードそのものに起因するもので（バイナリの3バイトがテキストの4文字になる）、ツールの不具合ではありません。
各形式が使われる場面
| 形式 | 主な用途 |
|---|---|
| 完全なdata URL | HTMLの<img src="...">、CSSのbackground-image: url(...)、メール内のインライン画像 |
| 生のBase64 | JSON APIペイロード、YAML/設定ファイル、データベースのBLOBフィールド、独自のバイナリプロトコル |
Base64と画像サイズ——実際のトレードオフ
約33%のオーバーヘッドがあるため、Base64埋め込みは小さなアセットに向いています。2KBのアイコンは無害な約2.7KBのインラインテキストになりますが、500KBの写真はHTML内に約665KBのテキストとして直接埋め込まれ、パース速度が低下し、ページとは別にキャッシュすることもできません。
多くの画像や大きな画像を埋め込む場合は、リクエスト削減のメリットとページの重さのコストを天秤にかけ、事前の圧縮も検討してください。
よくある質問
なぜBase64文字列は元の画像ファイルよりずっと大きくなるのですか？
Base64はバイナリデータの3バイトごとに4文字のテキストとしてエンコードするため、固定で約33%のオーバーヘッドが発生します。100KBの画像なら、およそ133KBのBase64テキストになると考えてください。これは正常かつ避けられないことで、バイナリデータを安全で可搬性のあるテキストとして表現するためのコストです。
data URLと生のBase64文字列の違いは何ですか？
data URLには、後続のテキストがどのMIMEタイプにデコードされるかをブラウザやレンダラーに伝えるdata:image/png;base64,というプレフィックスが含まれます。HTMLのsrcやCSSのurl()には完全なdata URLを貼り付けてください。生のBase64（カンマ以降の部分）は、システム側がファイルの種類を別途すでに把握している場合に使います。たとえば { "format": "png", "data": "<生のbase64>" } のようなJSONフィールドです。
ファイルをリンクする代わりに画像をBase64として埋め込むべきなのはどんなときですか？
Base64埋め込みは、1回のHTTPリクエスト削減が約33%のサイズ増加を上回る、小さく頻繁に再利用される画像（アイコン、ロゴ、小さなUI画像）に向いています。あるいは、インラインメールや単一ファイルのHTMLエクスポートなど、別ファイルにするのが現実的でない場面にも適しています。大きな写真や多くのページで再利用される画像には、ブラウザキャッシュが効く通常のリンクファイルの方がほぼ常に優れています。
Base64に変換すると画像が変化したり圧縮されたりしますか？
いいえ。Base64は元のバイトデータをそのまま表現するロスレスなテキストエンコーディングで、ピクセル、解像度、圧縮には一切手を加えません。ファイルサイズを小さくしたい場合は、まず画像圧縮ツールで圧縮してから、その結果をBase64に変換してください。
私の画像はどこかにアップロードされますか？
いいえ。ファイルはブラウザ内でFileReader APIを使って直接読み込まれ、ローカルでエンコードされます。ネットワーク経由で送信されることはありません。