画像Base64変換(エンコード・デコード)

この画像Base64変換ツールは、画像をBase64文字列にして、Data URL、HTMLタグ、CSSの背景、Markdown、JSONの形ですぐにコピーできるようにします。必要なら先に縮小したり、PNG・JPG・WebPに変えたりできます。逆方向では、貼り付けたBase64文字列から画像を表示し、ファイルとして保存します。

出典:RFC 2397, RFC 2397 – The "data" URL scheme。更新日:

ここにファイルをドラッグ&ドロップ または

画像1枚(JPG・PNG・GIF・WebP・SVG・ICOなど)、10 MBまで

ヒント:画像はCtrl+Vで貼り付けることもできます。

ファイルはブラウザー内だけで処理され、アップロードされません。お使いの端末の外に出ることはありません。

Base64コード

画像を選ぶと、ここにBase64コードが表示されます。

マイツールボックス

結果

計算方法

画像をBase64に変換する手順

  1. 画像をドラッグするか、選ぶか、Ctrl + Vで貼り付けます。すぐにBase64コードが表示されます。
  2. 出力を選びます。srcやurl()用のData URL、API用のBase64のみ、幅と高さ入りのHTMLのimgタグ、background-image用のCSS、Markdown、JSONです。
  3. コピーするか、テキストファイルとして保存します。

Data URLはRFC 2397の形式で、data:image/png;base64,のあとにRFC 4648のBase64で書いた画像データが続きます。MIMEタイプは拡張子ではなくファイルの中身から判定するので、名前が.jpgのPNGでも正しくimage/pngになります。

Base64にするとサイズはどうなる?

Base64は3バイトを4文字で表すため、文字列はファイルより約33%大きくなります。30 KBの画像ならおよそ4万文字です。そのためBase64はアイコン、ロゴ、メール内の画像、単体で完結するHTMLファイルやCSSなど、小さな画像に向いています。大きな写真は「幅を縮小」で小さくするか、WebPやJPGに変換してからにしましょう。

Base64から画像に戻す

「Base64 → 画像」では、Data URL、CSSの1行、imgタグ、またはBase64文字列だけを貼り付けます。改行入り、末尾の「=」なし、-と_を使うURL向けの形式でも読み取れます。JPG・PNG・GIF・WebP・BMP・TIFF・AVIF・HEIC・SVG・ICOを判別し、サイズと縦横のピクセル数を表示して、正しい拡張子で保存します。Data URLに書かれた形式と中身が違う場合は注意を表示します。

プライバシーと制限

画像も貼り付けた文字列もブラウザの中だけで扱い、アップロードや保存はしません。エンコードできる画像は10 MBまでで、SVGとICOはそのまま扱います。任意のテキストやファイルはBase64エンコード・デコード、画像の形式変更は画像形式の変換、容量を減らすなら画像圧縮を使ってください。

よくある質問

画像をBase64に変換するには?

ここで画像を選ぶと、すぐにコードが表示されます。Data URLは data:image/…;base64, で始まり、そのままHTMLやCSSで使えます。

Base64の画像をHTMLに埋め込むには?

出力で「HTML <img>」を選んでコピーします(<img src="data:image/png;base64,…" alt="…">)。幅と高さは自動で入ります。

Base64文字列を画像に戻すには?

「Base64 → 画像」に切り替えて文字列を貼り付け、「画像を表示」を押します。表示された画像は正しい拡張子で保存できます。

Base64にするとなぜ大きくなるのですか?

Base64は3バイトを4文字で表すため、元のファイルより約3分の1大きくなります。

SVGもBase64にできますか?

はい。SVGはそのまま image/svg+xml としてエンコードされ、CSSの背景などに使えます。

画像はアップロードされますか?

いいえ。エンコードもデコードもブラウザ内で行い、何も保存しません。

出典・根拠

更新日: · 編集方針

関連ツール