🖼️ 画像 → Base64 変換ツール

概要

このツールはブラウザのFileReader APIを使って画像をデバイス上のみでBase64文字列にエンコードします。結果はraw データURI（URLが使える場所ならどこでも利用可能）・CSSのbackground-image スニペット・完全なHTMLのimgタグの3形式でコピーできます。元のファイルサイズとエンコード後のサイズも並べて表示するので、容量の変化をすぐに確認できます。処理はすべてローカルで行われるため、ロゴや個人の写真などの機密画像も安全に扱えます。

使い方

1. アップロードエリアに画像をドラッグ＆ドロップするか、クリックしてファイルを選択してください。
2. ツールがブラウザ内で即座に画像をエンコードし、元のファイルサイズとエンコード後のサイズを表示します。
3. コピー形式を選択してください: raw Base64データURI・CSSのbackground-imageルール・HTMLのimgタグ。
4. 「コピー」ボタンをクリックすると、エンコードされた文字列がクリップボードにコピーされ、コードにすぐ貼り付けられます。

よくある質問

Base64データURIとは何ですか？

Base64データURIはバイナリファイルの内容をdata:[mime];base64,[encoded]形式のプレーンテキストとしてエンコードし、別ファイルへのリクエストなしにHTML・CSS・JSONへ画像を直接埋め込めます。

画像はサーバーにアップロードされますか？

いいえ。エンコードはブラウザのFileReader APIを使用し、完全にデバイス上で実行されます。画像がブラウザの外に出ることはありません。

Base64出力が元の画像よりずっと大きく見えるのはなぜですか？

Base64エンコーディングは3バイトを4つのASCII文字で表現するため、バイナリデータが約33%大きくなります。これは正常な動作です。

どの画像形式をBase64に変換できますか？

ブラウザが読み込めるすべての画像に対応: PNG・JPEG・WebP・GIF・SVG・BMP・AVIFなど。MIMEタイプはファイルから自動検出されます。

通常の画像ファイルの代わりにBase64画像を使うべきタイミングはいつですか？

Base64は、HTTPリクエストがレイテンシを生じさせたり許可されない場面——単一ファイルHTMLメール・インラインCSS・JSON APIペイロードなど——で小さなアイコンやロゴを埋め込むのに最適です。大きな画像には通常のファイルURLの方が効率的です。