画像 → Base64 変換

機能

このツールは画像を Base64 テキストと、そのまま貼り付けられるデータ URI に変換します。データ URI を使うと画像を HTML、CSS、Markdown、JSON、メールに直接埋め込めるため、ページの HTTP リクエストが 1 つ減り、別ファイルをホスティングしなくてもスニペットが動作します。逆方向にも対応しており、Base64 やデータ URI を貼り付けると画像をプレビューしてダウンロードできます。

使い方

1. ドロップゾーンに画像をドロップするか、画像を選択 を押すか、サンプル を押して SVG のロゴを読み込みます。
2. プレビューに画像が表示され、種類、ファイルサイズ、Base64 のサイズ、寸法も表示されます。
3. 出力形式 を選びます：
   • データ URI：data:image/png;base64,…。src 属性や JSON 用です。
   • Base64 のみ：文字列だけです。MIME や PEM 形式で使う場合は 76 文字で折り返すこともできます。
   • CSS background：完全な background-image: url("…"); 宣言です。
   • HTML <img>：データ URI を src にした画像タグです。
   • Markdown：![image](data:…)。
4. 結果をコピーします。逆にデコードしたい場合は、入力欄に Base64 かデータ URI を貼り付けて 画像をダウンロード を押します。

例

2×1 ピクセルの PNG は次のようになります：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAADUlEQVR4nGP4zwAE/wEHAAH/4iOeWQAAAABJRU5ErkJggg==

CSS で使う場合：

.dot { background-image: url("data:image/png;base64,iVBORw0KGgo…"); }

画像をインライン化すべきとき

インライン化が役立つのは、アイコン、小さな背景、読み込み中のスピナー、メールの署名など、小さくてよく使われる画像です。写真や大きなグラフィックには向いていません：Base64 はサイズを約 3 分の 1 増やし、画像をページやスタイルシートとは別にキャッシュできなくなり、ファイルの残りの部分の解析も遅らせます。目安として、インライン化する画像は数 KB 以下にしましょう。SVG の場合、パーセントエンコードしたデータ URI（data:image/svg+xml,…）のほうが Base64 より小さくなることが多く、このツールはどちらも受け付けます。