画像を Base64 データ URL に変換

画像を選ぶと、そのバイト列を Base64 データ URL に変換します。Base64 はデータを文字列として表す方式で、画像を圧縮するものではなく、通常はデータ量が増えます。

ブラウザ内でローカルに実行

画像ファイルを Base64 データ URL にする手順

このツールは双方向に使えます。画像を選ぶとファイルのバイト列が data:image/…;base64,… URL として返り、そのような URL(または接頭辞のない Base64 データ)を貼り付けると中身を復号して表示します。

処理はすべてこのタブ内で、ブラウザーの FileReader と画像デコーダーだけを使って行われ、ファイルは送信されません。圧縮・リサイズ・メタデータ削除はここでは行えません。それには画像編集ソフトが必要です。

  1. 「画像を選択」を押してファイルを選びます。入力欄に data:image/…;base64,… URL が入り、下のプレビューに画像が表示されます。
  2. 「コピー」を押すと URL 全体を CSS(background-image:url("data:…"))、HTML(<img src="data:…">)、JSON などに貼り付けられます。
  3. 受け取ったデータを確認するときは、データ URL または接頭辞なしの Base64 を入力欄に貼り付け、「貼り付けた画像をプレビュー」を押します。先頭バイト(PNG・JPEG・GIF・WebP・BMP・ICO・SVG)を読み、足りない接頭辞を補って画像を描画します。
  4. 生の URL ではなく、そのまま貼れる <img src="…" alt="…" /> が必要なときは「img タグで囲む」を押します。
  5. 次の画像の前に「クリア」を押すと、入力欄・プレビュー・ファイル選択がすべて空に戻ります。途中で切れたデータ、Base64 でない文字列、画像でないバイト列は、壊れた画像を残さずに理由を表示します。

Base64 が変えるもの、変えないもの

Base64 は画像に何をするか

Base64 は 3 バイトを 4 文字の印字可能文字に置き換えるので、バイナリーデータを壊したり切ったりするテキスト経路(HTML・CSS・JSON・XML・メール本文)でも同じバイト列を保てます。圧縮は行われず、文字列はファイルより約 3 割長くなります。データ URL はページ解析時にブラウザーが復号するもので、画像だけを別ファイルとしてキャッシュすることはできません。

暗号化でもありません。ページやメールを入手した人は誰でも Base64 デコーダーで元のバイト列に戻せます。公開できない内容をデータ URL に入れないでください。

データ URL が向いている場面

小さなロゴ、リストのアイコン、背景テクスチャなど、ページごとに 1 回の HTTP リクエストがかかる素材は、スタイルシートに埋め込んで運べます。往復が 1 回減り、最初の描画前に画像が確実に存在します。

ファイルが大きくなるほど代償も増えます。マークアップは読めなくなり、HTML の圧縮効率は落ち、画像だけをキャッシュできません。データ URL は 10 KB を大きく下回る素材向けに留め、写真・スプライト・複数ページで使う画像は別ファイルのままにしてください。

自分で作っていないデータの確認

貼り付ける Base64 にはメディアタイプが付いていないことが普通です。このページは復号後の先頭バイト(PNG・JPEG・GIF・WebP・BMP・ICO のシグネチャー、または SVG 文書の <svg ルート)を読み、対応する data:image/…;base64, 接頭辞を補うので、接頭辞のないデータでも壊れた画像になりません。

既知の形式に一致しない、Base64 の文字種や詰め物が正しくない、復号結果をブラウザーが描画できない——どの場合もステータス行が理由を示します。まず画像が分かっている小さなファイルで試し、製品に組み込むデータは別のツールでも復号して確認してください。

最近使ったツール: