Base64から画像へ変換
Base64文字列、Data URL、CSSのurl()、HTMLのimgタグ、Markdownの画像記法から画像データを取り出し、プレビューやダウンロードができる形に復元します。入力形式と画像MIMEを自動で判別するため、APIのデバッグ、メール内画像の確認、埋め込みアセットの回収、フロントエンドの表示検証に役立ちます。
- 生のBase64、Data URL、CSS、HTML、Markdownの画像入力に対応
- 入力を自動解析し、すぐにプレビューしてエンコードの問題を見つけやすくします
- 入力形式、画像MIME、推定サイズ、ピクセル寸法を表示
- 復元した画像をワンクリックでダウンロード
- デコード、プレビュー、ダウンロードはすべてブラウザ内で完結
概要
貼り付ける、判別する、プレビューする、保存する。ブラウザだけで完結するシンプルな流れです。
- 01
さまざまな入力形式を解析
HTML、CSS、Markdown内のエンコード済み画像を抽出でき、生のBase64もそのまま扱えます。
- 02
Data URLと生のBase64に対応
MIME付きのData URLも、プレフィックスのないBase64文字列も処理できるため、手作業で整える手間を減らせます。
- 03
MIMEとペイロードの確認
MIMEタイプを読み取りまたは推定し、復元後のバイナリサイズを見積もって、データが揃っているか判断しやすくします。
- 04
リアルタイム画像プレビュー
復元した画像をすぐに表示するので、破損、途中切れ、MIMEの不一致にすばやく気づけます。
- 05
画像寸法の表示
自然幅と高さを読み取り、想定しているアセット仕様と一致しているか確認できます。
- 06
そのままダウンロード
復元した画像をファイルとして書き出し、編集、圧縮、共有など次の作業に進めます。
使い方
おすすめの流れは、貼り付け、解析結果の確認、プレビュー確認、書き出しです。
- 01
Base64文字列、または画像が埋め込まれたHTML、CSS、Markdownテキストを貼り付けます。
- 02
自動解析と入力形式の判別が完了するまで待ちます。
- 03
プレビューが正しく表示されるか確認し、MIME、画像サイズ、寸法もあわせてチェックします。
- 04
プレビューできない場合は、入力が途中で切れていないか、不要な文字やエスケープの問題がないか確認します。
- 05
画像をダウンロードをクリックして、復元したファイルを書き出します。
詳細
Base64画像の復元、Data URLのデコード、フロントエンドの埋め込み画像トラブル調査に向けた機能です。
- デコード処理はサーバーへ送信せず、ブラウザ内で実行されます
- HTML img、CSS url()、Markdown画像記法からエンコード済みペイロードを自動抽出します
- Data URL文字列と生のBase64の両方に対応します
- JPEG、PNG、WebP、GIF、SVG、AVIF、BMPを認識します
- Base64の文字種とパディングを検証し、壊れている場合はわかりやすく通知します
- 復元した画像をすぐに表示し、目視で確認できます
- 自然幅と高さを読み取り、API診断に使えます
- 復元後の画像サイズを推定し、大きすぎる・小さすぎるペイロードに気づきやすくします
- ワンクリックで復元画像をダウンロードし、編集、圧縮、保管に回せます
- APIデバッグ、メールのトラブルシューティング、Data URIの調査に便利です
活用シーン
APIの検証、メールテンプレートの修正、CSSアセットの回収、Markdown内画像の抽出、インシデント再現に役立ちます。
-
APIレスポンスの確認
APIから返されたBase64画像フィールドが、実際に有効な画像として復元できるかをすばやく確認できます。
-
メールテンプレートの調査
HTMLメール内のインライン画像を確認し、破損や途中切れがないか調べられます。
-
CSS背景画像の回収
スタイルシートに埋め込まれたインライン背景画像を取り出して復元できます。
-
Markdown画像の抽出
Markdownに埋め込まれた画像データをファイル化し、移行や再利用に使えます。
-
ログやチケットの再現
チケットやログに残されたエンコード済みペイロードを画像として再構築し、デバッグに活用できます。
-
プライバシーに配慮した作業
第三者サービスに送らず、ブラウザ内で機密性の高い画像データをデコードできます。
関連情報
元画像を用意できる場合は、まず 画像 to Base64 で基準となるペイロードを作成し、APIレスポンスと比較します。復元した画像をページ、CMS、サポートチケットなどに軽量なアセットとして載せたい場合は、続けて 画像圧縮 に通すと便利です。
使い方のヒント
検証、プレビュー、書き出しを同じ手順で行うと、原因の切り分けが早くなります。
- 見えない整形や余計な文字の混入を避けるため、できるだけ元のペイロードをそのまま貼り付けてください。
- JSONから取り出した入力の場合は、デコード前にエスケープが解除されているか確認してください。
- MIMEが実際の内容と一致しない場合は、Base64本体とMIMEを別々に扱うほうが確実です。
- 復元後はまずピクセル寸法を確認し、デコードの問題なのか、上流のリサイズやクロップの問題なのかを切り分けます。
- 長いペイロードを確認するときは全画面表示を使うと、末尾の欠落に気づきやすくなります。
- さらに加工が必要なアセットは、復元後に圧縮や形式変換へ進めると作業がスムーズです。
制限事項
このツールは画像データをデコードして復元するためのものです。画質補正や欠損データの推測復元は行いません。
- 途中で切れたペイロードは完全には復元できません。
- 無効な文字、不正なパディング、画像ではないデータは検証に失敗します。
- 生のBase64に対するMIME推定はヒューリスティックです。特殊なケースでは手動で確認してください。
- 非常に大きなエンコード入力は、ブラウザのメモリや描画性能に負荷をかける場合があります。
- SVGの表示は、ブラウザのセキュリティルールや実装に左右されます。
- ノイズ除去、アップスケール、画質改善は行いません。
よくある質問
入力形式、ローカル処理、エラー時の見方、このツールの役割についての質問です。
どの入力形式に対応していますか？
生のBase64、Data URL、CSS url()、HTML img、Markdown画像記法に対応しています。
Data URLのデコードとBase64から画像への変換はどう関係していますか？
Data URLは、MIMEプレフィックス付きのBase64画像データです。このツールでは、Data URL形式とBase64単体のどちらも扱えます。
invalid Base64エラーが出るのはなぜですか？
無効な文字が含まれている、パディングが足りない、またはペイロードが途中で切れている可能性があります。元の文字列を加工せずに貼り付けると解決しやすくなります。
データはどこかにアップロードされますか？
いいえ。解析、プレビュー、ダウンロードはすべてブラウザ内で行われます。
画像形式は自動で判別できますか？
はい。Data URLではMIMEを明示的に読み取り、生のBase64では一般的な形式のヘッダーシグネチャから推定します。
Base64のように見えるのにプレビューできないのはなぜですか？
実際には画像データではない、またはMIMEと内容が一致していない可能性があります。
復元した画像をそのままダウンロードできますか？
はい。解析に成功したら、画像をダウンロードからファイルを書き出せます。
非常に大きなペイロードでも使えますか？
利用できます。ただし長い文字列ほどメモリを使うため、性能の高い端末のほうが安定して動作します。
これは画像圧縮ツールですか？
いいえ。Base64を画像に戻すためのツールです。画素の変更やファイルサイズの削減は行いません。
開発ではどんな場面で役立ちますか？
APIデバッグ、Data URIの調査、メールテンプレートの修正、ログやチケットの再現、フロントエンド表示の検証に役立ちます。
ペイロードが最後まで揃っているかはどう判断できますか？
プレビューが成功するか、ファイルサイズが自然か、想定どおりのピクセル寸法になっているかを組み合わせて確認します。
元はJPGなのにPNGとして検出されました。問題ですか？
生のBase64ではヘッダーシグネチャから形式を推定します。判別しづらいペイロードではPNGにフォールバックする場合があります。正確に扱いたい場合は、明示的なMIMEを含むData URLを貼り付けてください。
関連ツール
Image to Base64、画像圧縮、画像形式変換と組み合わせると、エンコードから復元までの一連の作業をまとめて進められます。