本文へスキップ
SPCXTools

Base64 画像変換

Base64文字列やデータURIをデコードし、ブラウザ上で即座に表示・ダウンロード可能な画像に復元します。

ローカルで動作 — ファイルは端末から出ません

ツールを読み込み中…

Base64 画像変換の使い方

  1. 1テキストエリアにBase64文字列、データURI、またはCSSスニペットを貼り付けます。
  2. 2ツールが自動的に入力をクリーンアップし、余分な空白やCSSラッパーを削除してテキストをデコードします。
  3. 3復元された画像をプレビューし、検出されたファイル形式、正確なファイルサイズ、ピクセルサイズを確認します。
  4. 4「ダウンロード」をクリックして、適切なファイル拡張子で画像をデバイスに保存します。

高速・安全なBase64画像デコーダー

Web開発やAPI、メールの埋め込み素材などを扱う際、長い文字列にエンコードされた画像データによく遭遇します。このBase64画像変換ツールに文字列を貼り付けるだけで、元の画像を即座に表示できます。

Base64からPNGへの変換、JSONデータからのJPEGの復元、スタイルシートからのSVG抽出など、あらゆる変換を瞬時に処理します。処理はすべてブラウザ上で完結するため、データが外部サーバーにアップロードされたり保存されたりすることは一切ありません。プライバシーを心配することなく、社外秘の素材、個人の写真、機密性の高いモックアップなどを安全にデコードできます。

このBase64画像デコーダーの仕組み

Base64は、画像などのバイナリデータをASCII文字列に変換するエンコード方式です。テキストベースの通信プロトコルでのファイル転送には非常に便利ですが、そのままでは人間が画像として認識することはできません。

本ツールは、開発者向けに設計された以下の便利な機能を備え、この変換プロセスを逆転（デコード）します。

スマートな入力解析: 入力データを完璧に整形する必要はありません。空白や改行は自動的に除去されます。スタイルシートから画像を抽出する場合、url('data:image/png;base64,...') のようなコードをそのまま貼り付けても、CSSラッパーやデータURIプレフィックスを自動で取り除き、生のBase64文字列のみを抽出します。また、- や _ を自動修正し、URLセーフなBase64にも対応しています。

マジックナンバーによる形式判定: データURIで指定されたMIMEタイプ（欠落や誤りの可能性があります）を鵜呑みにせず、デコードしたバイナリデータの先頭にある特定のバイト列（マジックナンバー）を読み取ってファイル形式を識別します。これにより、Base64をJPG、WebP、GIF、AVIF、BMP、ICO、SVGに変換する際にも、幅広いフォーマットを正確に検出します。

メタデータの即時表示: デコード後、画像のプレビューを表示するだけではありません。正確なファイルサイズ（バイト数）を計算し、画像の本来のピクセル寸法（幅と高さ）を読み取るため、ダウンロード前に画像データが期待通りであるかを確実にチェックできます。

Base64デコードの主な利用シーン

Web開発とデバッグ: HTTPリクエストを減らすため、小さなアイコンやロゴをData URIとしてHTMLやCSSに直接埋め込むことがよくあります。元のファイルがない状態でこれらのインライン画像を更新・確認したい場合でも、Data URIをこのデコーダーに貼り付ければ、数秒で元の画像ファイルを復元できます。

API連携: 本人確認、ドキュメントスキャン、モバイルアプリのバックエンドなどを扱う最近のAPIの多くは、JSONペイロード内に画像をBase64エンコード文字列として送信します。APIレスポンスのデバッグ時にその文字列をコピーしてここでデコードすれば、専用のスクリプトを書かなくても、APIが正しい画像を返しているか簡単に確認できます。

メールテンプレート作成: HTMLメールでは、メールソフトによる外部画像のブロックを回避するため、Base64で画像を埋め込む手法がよく使われます。古いメールテンプレートの解析や更新を行う際、このツールを使えば、埋め込まれた画像データを通常の画像ファイルとして簡単に抽出できます。

データURIと生のBase64

Base64画像は通常、次の2つのいずれかの形式で扱われます。

  1. 生のBase64: 文字、数字、プラス記号、スラッシュからなる連続した文字列で、末尾に1〜2個の等号が付くことがよくあります（例: iVBORw0KGgoAAAANSUhEUg...）。これは純粋なファイルデータです。
  2. データURI: ブラウザにデータの解釈方法を伝えるメタデータヘッダーを含む文字列です（例: data:image/png;base64,iVBORw0KGgo...）。

当ツールはどちらの形式にも対応しています。生の文字列が入力された場合は、ファイルシグネチャを解析してフォーマットを特定します。データURIが入力された場合は、指定されているMIMEタイプをフォールバックとして使用し、最大限の互換性を確保します。

エンコードされた画像を扱う際のヒント

  • ファイルサイズの肥大化: Base64エンコードを行うと、画像のファイルサイズが約33%増加することに注意してください。画像をインライン化することでネットワークリクエストを削減できますが、サイズの大きい写真で行うとHTMLやCSSファイルが大幅に肥大化する可能性があります。アイコンやプレースホルダーなどの小さな画像のみをエンコードするのが一般的なベストプラクティスです。
  • 画像のエンコード: 逆に、画像ファイルをコード用のテキスト文字列に変換したい場合は、画像 Base64 変換ツールをご利用ください。
  • その他のテキストエンコード: バイナリファイルではなく標準のテキストデータを扱う場合は、通常のBase64 エンコード/デコードやURL エンコード/デコードツールも便利です。

よくある質問

対応している画像フォーマットは何ですか？
このツールは、PNG、JPEG (JPG)、GIF、WebP、BMP、ICO、AVIF、SVGなど、最新のブラウザがサポートするすべての画像フォーマットのデコードとプレビューに対応しています。ファイルのバイナリシグネチャを読み取ることで、ファイルの種類を自動的に検出します。
Base64からPNG、またはBase64からJPGへ指定して変換することは可能ですか？
このツールは、エンコードされた元の画像フォーマットをそのまま復元します。PNGがBase64にエンコードされていた場合、PNGとしてデコードされます。デコード時にフォーマットを変更することはできませんが、復元したファイルをダウンロードした後、一般的な画像変換ツールを使用してフォーマットを変更することは可能です。
Base64データはサーバーに送信されますか？
いいえ。すべてのデコード処理はJavaScriptを使用してお使いのブラウザ上でローカルに行われます。データがサーバーにアップロードされることは一切ないため、機密性の高い画像や独自の画像でもプライバシーが完全に保護されます。
「Invalid Base64」や「Not an image」というエラーが出るのはなぜですか？
このエラーは、テキストにBase64エンコードとして無効な文字が含まれている場合、文字列が途切れている場合、またはデコードされたバイナリデータが既知の画像ファイルのシグネチャと一致しない場合に発生します。Base64の画像データは非常に長くなることがあるため、文字列全体をコピーしているか確認してください。
CSSのbackground-imageのコードでも使えますか？
はい。このツールは url('...') のラッパーや data:image/...;base64, のプレフィックスを自動的に取り除くため、事前に文字列を手動で整理することなく、CSSのスニペットをそのまま貼り付けることができます。

関連ツール

画像 Base64 変換画像をBase64データURIに変換し、プレーンなBase64、CSS背景、HTMLのimgタグ、Markdown形式でコピーできます。Base64エンコード＆デコードテキストとファイルをBase64に双方向変換。UTF-8とBase64URLに完全対応。URLエンコード・デコードテキストをURL用にパーセントエンコーディングしたり、エンコードされたURLやクエリ文字列を読みやすいテキストにデコード（復元）したりできます。Chmod 計算ツールチェックボックス、8進数（755など）、記号表記（rwxr-xr-xなど）間でパーミッションを相互変換します。Cron式ジェネレーターcrontabのスケジュールを作成し、分かりやすい文章で確認して、次回の正確な実行日時をチェックしましょう。CSS ミニファイアスタイルシートを軽量化。空白、コメント、不要なルールを削除し、削減されたサイズをひと目で確認できます。