画像ファイル
ここに画像をドロップするか、クリックして選択
JPEG、PNG、WebP、GIF、SVG、BMP、ICO —ローカルで処理
画像 Base64 変換とは？
画像 Base64 変換は、ブラウザ内蔵の FileReader API を使用して画像ファイルを Base64 エンコード文字列に変換します。出力は、未加工の Base64 文字列、完全なデータ URI、CSS background-image 宣言、HTML img タグのいずれかとして、用途に応じて整形できます。
画像 Base64 変換の使い方
- 画像ファイルをドロップゾーンにドロップするか、クリックして参照します。
- 出力形式を選択します：データ URI、未加工の Base64、CSS background-image、HTML img タグ。
- ワンクリックで結果をクリップボードにコピーします。
- HTML、CSS、JSON、その他の任意の場所に直接貼り付けます。
Base64画像エンコーディングを理解する ▾
例
入力
logo.png（2 KB）
出力
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
一般的な使用例
- HTMLメールに小さなロゴを埋め込む
- CSSファイルにスピナーやアイコンをインラインで埋め込む
- 画像データをJSON文字列としてAPIに渡す
- 画像を埋め込んだ自己完結型HTMLファイルを作成する
このツールを使う理由
- 4つの出力形式 — data URI、raw Base64、CSS、HTML。
- 元のサイズとエンコード後のサイズ、および増加率（%）を表示します。
- 画像がページパフォーマンスに影響するほど大きい場合に警告します。
- ファイルのアップロードは不要 — すべてブラウザ内で実行されます。
よくある質問
Base64画像とは？
Base64は、バイナリデータ（画像など）をプレーンテキストのASCII文字列にエンコードする方法です。data URIは、MIMEタイプを先頭に付けたBase64文字列で、data:image/png;base64,... の形式になります。これはimgタグのsrc属性やCSSのbackground-imageに直接指定できるため、別途ファイルをリクエストせずに画像を埋め込めます。
data URIはどのような場合に使うべきですか？
data URIは、外部ファイル参照がブロックされる可能性があるHTMLメール内の小さなアイコン、ロゴ、インライン画像に最適です。大きな画像ではページの重さが増し、パフォーマンスを低下させる可能性があるため、使用は控えめにしてください。
画像はサーバーにアップロードされますか？
いいえ。FileReader API が画像をブラウザ内で直接エンコードします。画像がデバイス外に出ることはありません。
Base64 画像はどれくらい大きくなりますか？
Base64 エンコードではデータサイズが約 33% 増加します。バイナリデータの 3 バイトごとに 4 つの ASCII 文字になるためです。100 KB の画像は Base64 文字列として約 133 KB になります。