画像 ↔ Base64 変換ツール

画像ファイルをBase64エンコードしてdata URI形式で出力、またはBase64文字列から画像ファイルを生成するツールです。CSSやHTMLへの直接埋め込み、受け取ったBase64データの確認・保存に使えます。

ブラウザ上で処理するため、ファイルデータが外部サーバーへ送信されることは一切ありません。

画像ファイルをドロップすると、data URI形式のBase64文字列を生成します。HTMLの <img src=""> やCSSの url() にそのまま貼り付けて使えます。

🖼️
画像ファイルをドラッグ&ドロップ
JPG・PNG・WebP・SVGなど。またはクリックして選択(複数可)

Base64文字列を貼り付けて画像ファイルとしてダウンロードできます。data:image/png;base64,... のdata URI形式と、生のBase64文字列のどちらにも対応しています。

💡 このツールの使いどころ

Base64はバイナリデータをテキストで表現する形式です。画像をBase64化することで、HTMLやCSSに画像を直接埋め込むことができます。

  • HTMLへの埋め込み:<img src="data:image/png;base64,..."> の形式でHTMLに直接記述できます。外部ファイルなしでアイコンや小さな画像を扱いたいときに。
  • CSSへの埋め込み:background-image: url("data:image/...") としてCSSに埋め込めます。
  • Base64→画像の確認:APIレスポンスやログに含まれるBase64文字列が実際にどんな画像か確認・保存したいときに。

🛠️ 使い方

画像 → Base64(エンコード):
① 「📷 画像 → Base64」タブを選択します。
② 画像ファイルをドロップ(またはクリックして選択)します。
③ data URI形式のBase64文字列が生成されます。「📋 コピー」ボタンでクリップボードにコピーできます。

Base64 → 画像(デコード):
① 「📄 Base64 → 画像」タブを選択します。
② テキストエリアにBase64文字列を貼り付けます。
③ 「📷 画像を生成してダウンロード」ボタンで画像ファイルをダウンロードできます。

⚠️ 注意点

  • 大きい画像をBase64化すると非常に長い文字列になります。埋め込み用途では小さい画像(アイコン・ロゴ等)の使用を推奨します。
  • デコード時、生のBase64文字列(data URI形式でない場合)は画像の種類を自動判定します。判定に失敗した場合はPNG形式として出力します。
  • 一部の画像形式(HEIC等)はブラウザが対応していないため正しく変換できない場合があります。
  • 変換はすべてブラウザ内で完結します。ファイルデータが外部サーバーへ送信されることは一切ありません。

🖼️ 関連する変換ツール

他の変換ツールは変換ツールトップからまとめて確認できます。