無料Webツール

画像とBase64 Data URLを相互変換

画像ファイルとBase64形式のData URLを相互に変換します。

変換する

🔒 画像やテキストはこのブラウザ内で処理され、サーバーへ送信されません。

使い方と確認ポイント

画像をData URL形式のBase64文字列へ変換したり、画像Data URLを画像ファイルへ戻したりします。HTMLやCSSへ小さな画像を埋め込む前の確認や、受け取った画像Data URLの中身確認に使えます。

  1. 画像→Base64では8MB以下の画像を選び、「Base64へ変換」を押します。
  2. Base64→画像では data:image/...;base64,... 形式を入力欄へ貼り付けます。
  3. プレビューを確認し、必要なら文字列をコピーまたは復元画像を保存します。
画像→Base64
入力画像は8MB以下
Base64→画像
画像のData URL形式が必要
復元サイズ
デコード後12MB以下
出力
元の画像MIMEタイプに応じた画像ファイル

PNGをHTMLへ埋め込む前にData URLへ変換する

小さなPNGを選ぶと、data:image/png;base64,... で始まる文字列を作れます。そのまま src などへ使う前に、プレビューで画像が正しく見えるか確認できます。

Base64は元画像より文字列サイズが大きくなるため、大きな画像を大量に埋め込む用途には向きません。また、この復元欄は「Base64本体だけ」ではなく画像Data URL全体を前提にしています。

小さな画像を1ファイル内へ埋め込みたいときに便利

メールテンプレートの検証用HTML、単独デモ、CSSの小さなアイコンなど、外部画像ファイルを持たせたくない場面でData URLが役立つことがあります。

一般的なBase64テキスト変換とは用途が違う

このページは画像専用です。JSONや文章など普通のテキストをBase64へ変換したい場合は、テキスト用Base64ツールの方が分かりやすく使えます。

復元時は先頭の画像形式も確認する

Data URL先頭の image/png や image/jpeg が復元ファイルの種類に使われます。コピー途中でヘッダーを欠かすと復元できません。

大きな画像は通常ファイルのまま扱う方が軽い

Base64化すると転送量やHTML/CSSの可読性が悪くなりやすいため、写真や大きな図は通常の画像URLで配信する方が扱いやすいことが多いです。

機密画像は貼り付け先にも注意する

変換後のBase64文字列には画像内容そのものが含まれます。公開ソースや共有チャットへ貼れば画像を共有したのと同じなので、機密性は別途判断してください。

関連リファレンス: DPI・PPI・px · 用紙サイズ · アスペクト比