Base64 → 画像変換ツール

Base64エンコードされたデータURIを画像としてプレビュー・ダウンロードします。

Base64 → 画像変換ツールとは

Base64エンコードされた文字列やData URIを画像としてプレビュー・ダウンロードできるオンラインツールです。PNG・JPEG・WebP・GIFなどあらゆる形式のBase64画像変換に対応しています。Data URI画像表示の確認やbase64 PNG表示のデバッグにも役立ちます。ブラウザ上で処理されるため画像データが外部に送信されません。

使い方

  1. 1Base64文字列またはdata:URI形式のデータを入力欄に貼り付けます。
  2. 2「画像に変換」ボタンをクリックします。
  3. 3プレビューエリアに画像が表示されます。内容を確認してください。
  4. 4ダウンロードボタンをクリックして画像ファイルとして保存します。

メリット・特徴

  • data:URI形式とBase64のみどちらの入力にも対応
  • PNG・JPEG・WebP・GIF・SVGなど主要な画像形式をサポート
  • ブラウザ上でプレビューしてからダウンロード可能
  • 入力データがサーバーに送信されないため安全
  • デバッグ用途にも対応できる詳細な変換情報を表示
  • 登録・インストール不要で即座に利用可能
01

Base64画像変換の仕組みと用途

Base64は画像などのバイナリデータをテキスト文字列に変換するエンコーディング方式です。HTMLやCSS、JSONなどテキストのみを扱う環境でも画像データを直接埋め込めるようになります。Webフロントエンド開発・API設計・メールシステムなど幅広い場面で使われています。

Data URIとBase64の関係

Data URIは「data:[MIMEタイプ];base64,[Base64エンコードされたデータ]」という形式でリソースをURLとして表現する仕組みです。HTMLの<img src="data:image/png;base64,...">やCSSのbackground-image: url("data:image/svg+xml;base64,...")のように、外部ファイルを参照せずに画像を埋め込む場合に使われます。このツールはData URIのBase64部分をデコードして元の画像を復元します。

Base64画像が使われる主なシーン

メールHTML（一部のクライアントは外部画像をブロックするためインライン埋め込みが必要）、PWAのオフライン対応（Service Workerでキャッシュする画像のプリロード）、APIレスポンス（画像URLの代わりにBase64で返すサーバーがある）、Canvasから書き出したスクリーンショット（toDataURL()メソッドの出力）などでBase64画像が登場します。

変換時の画質について

Base64エンコード・デコードは可逆変換であるため、元の画像データに変化はありません。ただしダウンロード時に別の形式（例: PNGをJPEGに変換）を指定した場合は再圧縮が行われ、JPEGの場合は非可逆圧縮による画質変化が生じます。元と同じ形式でダウンロードする限り画質は完全に保たれます。

02

Base64画像変換でよくある問題と解決方法

Base64の文字列を扱う際には文字列の切り詰め・改行・不正文字など複数のトラブルポイントがあります。変換がうまくいかない場合の対処法を解説します。

よくある変換エラーとその原因

Base64文字列の末尾が「=」「==」で終わっていない場合はパディングが不足しています。また「+」が「%2B」、「/」が「%2F」にURLエンコードされた状態でコピーされている場合も変換に失敗します。このツールは多くのケースで自動補正しますが、変換エラーが出た場合は文字列全体が正しくコピーされているか確認してください。

画像が崩れて表示される場合

データの途中で改行や空白が混入するとBase64として正しく解析されません。プログラムがBase64文字列を76文字ごとに改行するMIMEエンコード形式で出力している場合があります。このような場合は改行をすべて除去してから貼り付けてください。ほとんどのブラウザの開発者ツールでコピーした場合は問題ありません。

SVGのData URIを使う場合の注意点

SVGはBase64でなくURLエンコード（%エンコーディング）でData URIとして使うこともできます。「data:image/svg+xml,%3Csvg...」形式のものはBase64ではないため、このツールでは変換できません。Base64形式（data:image/svg+xml;base64,...）のみ対応しています。SVGを直接URLエンコードしたい場合はData URLパーサーツールをご使用ください。

よくある質問（FAQ）

data:image/…のプレフィックスは必要ですか？
プレフィックスあり・なし、どちらの入力にも対応しています。「data:image/png;base64,」のようなData URI形式でも、Base64文字列のみでも変換できます。Base64のみ入力の場合はツールが自動でPNGとして処理します。
変換できる画像形式は何ですか？
JPEG、PNG、WebP、GIF、SVGなどのBase64エンコード済み画像に対応しています。Data URIにMIMEタイプが含まれている場合（data:image/jpeg;base64,...）はその形式で復元されます。
ダウンロードした画像は元のファイルと同じですか？
はい、Base64エンコード前のファイルと完全に同じ内容で復元されます。Base64は可逆変換であるため、デコードした画像は元ファイルとビットレベルで一致します。
大きなBase64文字列でも処理できますか？
ブラウザのメモリ制限内であれば大きなファイルも処理可能ですが、数MB以上のBase64文字列はブラウザのタブがメモリ不足になることがあります。実用的には5MB（Base64で約6.7MB）以下を目安にしてください。
不正なBase64文字列を入力するとどうなりますか？
Base64として解析できない文字列が含まれている場合はエラーメッセージが表示されます。改行や空白が含まれていても自動でトリムされるため、多くのケースでそのまま貼り付けることができます。
このツールはどんな場面で役立ちますか？
APIのレスポンスに含まれるBase64エンコード画像の確認、CSSやHTMLに埋め込んだData URI画像のデバッグ、メール送信システムで添付画像をBase64で処理する際の確認作業、デザインツールからエクスポートされたSVGのData URIチェックなどに役立ちます。

不具合や動作がおかしい点を見つけたら教えてください。

不具合報告はこちら →