メインコンテンツへスキップ

画像⇔Base64 変換

画像ファイル(PNG/JPEG/GIF/SVG/WebP)をBase64文字列・Data URIにブラウザで変換、または Base64 から画像を復元・ダウンロードできる無料オンラインツール。ドラッグ&ドロップ対応、MIMEタイプ自動判定、HTML/CSSへの画像埋め込みや小型アイコンのインライン化に最適、サーバー送信なし。

画像ファイルとBase64/Data URIを相互変換するツールです。ドラッグ&ドロップ対応で、HTML・CSS・メールテンプレートへの画像インライン埋め込みに便利です。

画像⇔Base64 変換
📁画像をドラッグ&ドロップ または クリックで選択PNG, JPEG, GIF, SVG, WebP

// 画像⇔Base64 変換の機能と特徴

画像→Base64変換

画像ファイルをドラッグ&ドロップまたはファイル選択でアップロードすると、Base64文字列とData URI形式に変換します。画像プレビュー、ファイル情報（名前・サイズ・MIME・解像度）、Base64サイズの比較も表示されます。Base64文字列とData URIそれぞれにコピーボタンが用意されています。

Base64→画像変換

Base64文字列またはData URIを貼り付けると、画像として復元・プレビューできます。生のBase64文字列の場合はマジックバイトからMIMEタイプを自動推定します。ダウンロードボタンで画像ファイルとして保存できます。

対応画像形式

PNG、JPEG、GIF、SVG、WebPの5形式に対応しています。Base64→画像変換時はマジックバイト（ファイルの先頭バイト列）からMIMEタイプを自動判定するため、形式を指定する必要はありません。

実務での活用シーン

小さなアイコンやロゴをHTMLやCSSに直接Base64で埋め込む場合、APIレスポンスに含まれるBase64画像データのプレビュー確認、メールテンプレート（HTML メール）への画像埋め込み、CSP（Content Security Policy）で外部リソースを制限している環境のインライン画像対応、データURIスキームの生成などに活用できます。

// 画像⇔Base64 変換に関するよくある質問

最大ファイルサイズに制限はありますか？
ブラウザのメモリに依存しますが、一般的に数MB（最大10MB程度）までの画像であれば問題なく変換できます。大きな画像の場合はBase64文字列が元のファイルサイズの約133%になることにご注意ください。例えば3MBの画像は約4MBのBase64文字列になります。HTML・CSSにインライン化する場合は数十KB程度に抑えるのが現実的です。
Data URIとBase64の違いは何ですか？
Base64は画像データのエンコード形式そのもので、Data URIはそれに `data:image/png;base64,` のようなMIMEタイプのプレフィックスを付けた完全なURLです。HTML の `<img src="data:image/png;base64,...">` や CSS の `background-image: url('data:image/...');` にはData URI形式を使用します。本ツールは両方を出力するので、用途に合わせて使い分けてください。
データはサーバーに送信されますか？
いいえ、すべての処理はブラウザ内のJavaScriptで完結します。画像データがサーバーに送信されることはありません。社内ロゴ・未公開デザイン・機密文書のスキャン画像なども安全に変換できます。`FileReader` API でブラウザのメモリ上で直接処理しています。
Base64から画像のMIMEタイプはどう判定していますか？
Base64文字列をデコードした先頭バイト（マジックバイト）を解析して判定しています。PNG（`89 50 4E 47`）、JPEG（`FF D8 FF`）、GIF（`47 49 46 38`）、WebP（`52 49 46 46` + `57 45 42 50`）、SVG（XML の `<` タグ）を識別します。Data URI 形式で MIME タイプが明示されている場合はそれを優先します。
SVGをBase64化するメリット・デメリットは？
メリット: HTTPリクエスト削減、外部依存ゼロ、CSS の `background-image` で簡単に使える。デメリット: ファイルサイズが約33%増、SVGがインライン展開できなくなる（CSS で `currentColor` 等が効かなくなる）。SVG の場合は Base64 ではなく URL エンコード形式（`data:image/svg+xml;utf8,<svg>...</svg>`）の方がサイズが小さく済むことが多いです。
HTMLメールに画像を埋め込むのに使えますか？
使えますが注意が必要です。HTMLメールで Data URI を使うと、Gmail・Yahooメール等の主要クライアントがブロックする場合があります。代わりに CID（Content-ID）埋め込みやサーバーホスティング画像の利用が確実です。一部のニュースレターサービス（Mailchimp 等）では Data URI が機能する場合もあるため、配信前にテスト送信で確認してください。
画像をBase64化することのSEOへの影響は？
Base64化された画像は `<img alt="...">` の alt 属性は使えますが、画像ファイル名による検索流入は失います。検索エンジンも Data URI 内の画像をインデックス化しない場合があります。SEO 重要な画像（ヒーロー画像・商品画像等）は通常通りファイル配信、装飾用の小さなアイコンのみ Base64 化するのが推奨です。
透過PNGも変換できますか？
はい、透過情報を保ったまま Base64 化・復元できます。Data URI でも透過は維持されるため、CSS の `background-image` に透過 PNG/WebP を埋め込んで重ね合わせデザインを行えます。透過部分はBase64文字列としてもエンコードされ、復元時に正しく再生されます。
画像のサイズや形式を変換する機能はありますか？
本ツールには画像のリサイズ・形式変換機能はありません。事前にリサイズが必要な場合は[画像最適化ツール](/tools/image-optimizer/)を使い、サイズ・品質を調整してから Base64 化することを推奨します。WebP 化や JPEG 圧縮で容量を減らせば、Base64 後のサイズも小さくなります。
巨大なBase64文字列をCSSやHTMLに貼ると遅くなる？
はい、HTML・CSSのファイルサイズが膨らみ、初期ロード時間が遅くなる可能性があります。目安として個々の画像が 10KB を超えるなら別ファイル配信、それ以下の小さなアイコン・ロゴだけ Base64 化するのが推奨です。LCP・FCP のパフォーマンス指標への影響を Lighthouse で確認することをおすすめします。

// 画像⇔Base64 変換の使い方

  1. モードを選択

    `IMAGE → BASE64`（画像から Base64 生成）または `BASE64 → IMAGE`（Base64 から画像復元）のモードを選択します。

  2. データを入力

    `IMAGE → BASE64` モードでは画像をドラッグ&ドロップまたはクリックでファイル選択します。`BASE64 → IMAGE` モードでは Base64 文字列または Data URI を貼り付けて DECODE ボタンをクリックします。

  3. 結果を取得

    `IMAGE → BASE64` モードでは Base64 文字列と Data URI それぞれをコピーできます。`BASE64 → IMAGE` モードではプレビューを確認し、ダウンロードボタンで画像をローカルに保存できます。

カテゴリ エンコード

// 画像⇔Base64 変換の関連ツール

Base64 エンコード/デコード URL エンコード/デコード JSON フォーマッター

すべてのツールを見る >>