画像 → データ URI・Base64 変換ツール

このツールについて

データ URI とは

データ URI は、data:image/png;base64,iVBORw0KGgo… のように、アドレスそのものにファイルを埋め込んだものです。data: の後にメディアタイプが続き、次に内容のエンコード方式を示す省略可能な ;base64 マーカー、そしてカンマの後に内容が続きます。HTML の src や CSS の url() など、ブラウザが画像の URL を受け付ける場所ならどこでもデータ URI を使え、追加のリクエストなしで画像が表示されます。この形式は RFC 2397 で定義されています。

インライン化のコスト

Base64 は 3 バイトごとに 4 文字で表すため、エンコードした画像は元のファイルより約 33% 大きくなります。また、インライン化した画像はそれを含むドキュメントと一体になるため、ブラウザは画像を個別にキャッシュできず、同じ画像を含むページやスタイルシートごとに毎回転送されます。

そのため、データ URI は 1〜2 KB のアイコンやプレースホルダーなど、少数の小さな画像には向いていますが、写真には向いていません。このツールは、結果が約 10 KB を超えると警告を表示します。

SVG に Base64 は不要

SVG ファイルはテキストなので、data:image/svg+xml;charset=utf-8,… のようにテキストのままデータ URI に入れられます。パーセントエンコードが必要なのは一部の文字だけで、URL やそれを囲む引用符を終わらせてしまう文字と、URL にそのままでは含められない文字です。色の値によく使われる # をエスケープしないと、URL のフラグメントの開始とみなされ、画像が途中で切れてしまいます。このツールは %、#、<、>、"、&、バックスラッシュ、空白文字、制御文字をエスケープし、ASCII 以外の文字は UTF-8 のエスケープシーケンスで書き出します。結果をデコードすると、元と同じ SVG テキストに戻ります。テキスト形式は、ファイルが有効な UTF-8 の場合に選べます。

URL エンコード形式は読みやすいままで、プレーンテキストであることに変わりはないため、gzip や Brotli では通常 Base64 よりよく圧縮されます。圧縮前にどちらが短くなるかはファイルによって異なるため、このツールは両方のサイズを表示します。

動作のしくみ

画像はブラウザが読み込み、お使いの端末上の JavaScript がエンコードします。逆方向も同じで、貼り付けたデータ URI はページ内でデコードされ、ファイルとして提供されます。画像もデータ URI もアップロードされません。