画像⇔Base64変換
画像ファイルをBase64のData URIに変換します。HTMLやCSSに直接埋め込むコードをワンクリックでコピーでき、逆にBase64文字列から画像を復元して保存もできます。画像は端末内だけで処理され、サーバーには一切送信されません。
画像 → Base64
Base64 → 画像
このツールの3つの強み
端末内処理で画像が外に出ない
FileReader APIとCanvas 2D APIだけで動くため、未公開ロゴや社内スクショもネットに通さずBase64化できます。
Data URI付き／Base64のみを切替
HTML／CSS用には data:image/png;base64,... の完全形を、API送信用にはBase64中身のみを出力できます。
逆変換も先頭バイトから自動判定
Base64文字列を貼ると先頭のマジックナンバーから5形式を自動判定してプレビュー・保存できます。
かんたん4ステップ
- 1. 上の枠に画像をドラッグ＆ドロップ（JPG・PNG・GIF・WebP・SVG）。
- 2. 「Data URI付き」か「Base64のみ」かを選ぶ。
- 3. 「コピー」または「保存」を押す。
- 4. HTMLのimg src／CSSのurl()／JSONフィールドに貼り付けて使う。
使い方・仕組み（4ステップ詳細）
1. 画像をドラッグ＆ドロップで入れる
上の枠に画像をドラッグ＆ドロップするか、クリックしてファイル選択ダイアログから選びます。JPG・PNG・GIF・WebP・SVGに対応。読み込みはMDN準拠の FileReader.readAsDataURLで行われ、結果は data:image/png;base64,... のDataURI形式（RFC 2397）として返ってきます。画像はあなたのブラウザのメモリに展開されるだけで、ネットには一切流れません。
2. 出力形式を選ぶ
「Data URI付き」を選ぶと data:image/png;base64,iVBORw0KGgo... の完全形が出ます。HTMLのimg srcやCSSのurl()にそのまま貼れる形式です。「Base64のみ」を選ぶと iVBORw0KGgo... のように中身のBase64だけが出ます。APIに画像payloadを送るときや、JSONフィールドにMIMEを別キーで持たせるときはこちらが定石です。
3. コピー or 保存
「コピー」を押すとクリップボードへ。「保存」を押すと .txt ファイルとして書き出されます。逆方向は左下の入力欄にBase64文字列（または data:URI）を貼ると、先頭バイトのマジックナンバー（JPG=FFD8FF／PNG=89504E47／GIF=47494638／WebP=RIFF…WEBP／SVG=<svg）から5形式を自動判定し、プレビューと「画像として保存」ボタンが現れます。
4. HTML／CSS／JSONへ貼り付ける
<img src="data:image/png;base64,..." /> や background-image: url("data:image/svg+xml;base64,..."); のように貼り付ければ、追加のHTTPリクエストなしで画像が表示されます。CSSスプライト代わりのアイコン、Markdownへの直接埋め込み、JSON APIの画像payload送信、開発者ツールでAPIレスポンスに来たBase64の中身確認まで一通り使えます。逆変換は本ページの貼り付け欄、JPG変換はHEIC→JPG変換、軽量化は画像圧縮で対応できます。
こんな場面で便利
CSSにアイコンを直接埋め込む
数百バイトのSVG/PNGアイコンをCSSのbackground-image url()で埋め込み、追加リクエストをゼロに。リスト・ボタンの装飾アイコンに最適。
HTMLメールに画像をインライン埋め込み
Gmail・Apple MailではData URIがそのまま表示されます。Outlookは非対応なので、配信先を絞った社内通知やマーケメールに有効。
JSON APIの画像payload送信
multipart/form-dataが使えない環境で、Base64文字列をJSONフィールドに入れて送る。サーバー側でデコードして保存する設計と組み合わせる。
APIレスポンスのBase64中身確認
開発者ツールで取得したログのBase64文字列を貼り付けると、何の画像かが即わかる。デバッグや障害対応の時短に。
日本のWeb制作・社内ツール現場でよく使う設定
- ・Data URI付き／Base64のみの切替：HTML/CSS埋込はData URI付き、API送信はBase64のみ。
- ・サイズ膨張+33%：RFC 4648の仕様。元1KBのPNGは約1.33KBのBase64になる。数十KB以下推奨。
- ・CSSのurl()内の改行：Base64を改行で折り返すと一部の古いCSSパーサが解釈に失敗するため、1行で書く。
- ・SVGのData URI：
image/svg+xml;base64形式。image/svg+xml,<svg>...</svg>（非Base64）の方が短い場合もある。 - ・Outlook対応の必要性：B2B案件はOutlookシェアが高い。Data URIが映らないので、cid:参照のMIMEマルチパート方式と併用するか、配信先を確認する。
注意：本ツールは RFC 4648 標準Base64（§4）を出力します。URL/Filename Safe版（§5）は出力しません。GoogleドライブのファイルIDやJWT（JSON Web Token）のヘッダ部などURL Safe Base64が必要な場面では、文字列を自分で +→-、/→_、末尾の=除去で変換してください。また、HTMLメールへの埋め込みはOutlookでは表示されません（Word.exeレンダラがData URIを解釈しないため）。
よくある質問
Q1. Base64にするとファイルサイズはどうなりますか？
RFC 4648の仕様上、入力3バイトを出力4文字に変換するため、元のバイナリより約33%（=4/3倍）大きくなります。さらに改行を入れる場合は数バイト/76文字の上乗せがあります。Base64で埋め込んだ画像はHTTPキャッシュが効きにくいため、数十KB以下のアイコン・ロゴ用途に向きます。大きな写真は通常のhttps URL参照のままが軽量です。
Q2. 「Data URI」と「Base64部分のみ」の違いは？
Data URIはRFC 2397で定義された data:[<mediatype>][;base64],<data> 形式の完全なURLで、HTMLのsrcやCSSのurl()にそのまま貼れます。Base64部分のみは中身のデータだけで、JSON APIの画像payload送信などプログラム側でMIMEを別フィールドで指定するときに使います。HTMLメールやCSS用途はData URI付き、サーバー側で形式を知っているAPI送信はBase64のみが定石。
Q3. Base64から画像に戻すとき、形式の指定は必要ですか？
不要です。「data:」から始まるData URIはそのまま、裸のBase64文字列の場合は先頭の数バイト（マジックナンバー：JPG=FFD8FF、PNG=89504E47、GIF=47494638、WebP=RIFF+WEBP、SVG=<svg）からMIMEを自動判定してプレビューと保存を行います。デバッグでAPIレスポンスから抜き出したBase64の中身確認にも使えます。
Q4. 対応している画像形式は？
JPG（image/jpeg）・PNG（image/png）・GIF（image/gif）・WebP（image/webp）・SVG（image/svg+xml）に対応。AVIFやHEICはFileReaderで読めますが、ブラウザのレンダリング対応にばらつきがあるため、iPhoneのHEICは先にHEIC→JPG変換でJPGにしてから扱うのが安全です。
Q5. Base64エンコードのアルファベットは何ですか？
RFC 4648 §4の標準Base64アルファベット（A-Z／a-z／0-9／+／/）を使用し、3バイト境界で揃わない末尾は「=」でパディングします。URL/Filename Safe版（§5）は+を-、/を_に置き換えた別形式で、ファイル名やクエリ文字列に安全ですが、HTMLのimg srcやCSSのurl()で使う標準Data URIは§4の標準Base64です。本ツールは§4のみを出力します。
Q6. btoa／atob との関係は？
Window.btoa()／Window.atob()（MDN）はASCII文字列⇔Base64の相互変換APIで、バイナリには直接使えません（Latin-1範囲外の文字でInvalidCharacterError例外）。本ツールはバイナリ画像を扱うため、FileReader.readAsDataURL（バイナリ→Data URI）と、URL.createObjectURL／Imageオブジェクト（Base64→画像復元）を使い、btoa/atobの制約を回避しています。
Q7. HTMLメールに埋め込んでも表示されますか？
Gmail・iOS Mail・Apple Mail・Yahoo!メール等の現行クライアントはData URIをimg srcで表示します。一方、Outlook 2007以降（Word.exeレンダリング）はData URIを表示しません。Outlookも見せたい場合は、cid:参照（HTMLメールに画像をMIME multipartで添付し、本文からsrc="cid:logo.png"で参照する方式）を使ってください。本ツールはData URI生成までを担当します。
Q8. 画像はどこかにアップロードされますか？
いいえ。エンコード・デコードはすべてあなたのブラウザの中（FileReader API・Canvas 2D・Blob API）で行われ、画像が外部サーバーに送信・保存されることはありません。社内資料のスクショ、未公開ロゴ、機微情報を含むスクリーンショットの埋め込み用Base64生成にも安心して使えます。ブラウザの開発者ツール「Network」タブを開いて変換しても通信ゼロを確認できます。
Q9. ブラウザのData URI長さに上限はありますか？
現行のChrome／Firefox／Safari／Edgeは数MB〜数十MBのData URIを処理できますが、HTMLのimg srcやCSSのurl()に書く場合、HTML/CSSパーサの行長制限やソースマップでの取り回しの面から、数百KB以下に収めるのが現実的です。大きい画像はBase64ではなく通常のhttps URL参照に戻す方が、HTTPキャッシュも効いて高速です。