Base64から画像へのデコード
Base64文字列やdata URIを画像にデコードし、バイトからPNG、JPEG、GIF、WebP、SVG、ICOを判別して、プレビューとファイルのダウンロードができます。
すべてブラウザ内で実行されます。データがアップロードされることはありません。
Base64から画像に変換とは？
Base64でエンコードされた画像を、data:image/...;base64, の接頭辞の有無にかかわらず貼り付けると、デコードし、デコードされたバイトから実際の画像の種類を判別して、寸法とファイルサイズ付きのプレビューを表示し、正しい拡張子でダウンロードできます。
Base64から画像に変換の使い方
- data URIまたは生のBase64文字列を入力欄に貼り付けます（改行とスペースは無視されます）。
- 検出された形式、寸法、サイズ、プレビューを確認します。
- ダウンロードボタンをクリックして、
decoded-image.pngのようなファイルを保存します。
例
iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAKklEQVR4nGM0TjvDQBvARCNzR40eNXrU6FGjR40eNXrU6FGjR40eEUYDACc1AaFANYRxAAAAAElFTkSuQmCC
Detected type: PNG (image/png), 30×30 px, 99 B – a solid #3366CC square
Base64から画像に変換を使うべき場面
HTML、CSS、JSON APIのレスポンス、ログ、メールに埋め込まれた画像の確認や、Base64で送られてきたファイルの復元に使います。途中で切れた文字列は修復できません。Base64の一部が欠けていると、画像は無効になります。
Base64から画像に変換の仕組み
ツールはdata URIの接頭辞を取り除き、空白を削除し、URLセーフなBase64（- と _）と欠けた = パディングを受け付け、atob でデコードします。バイトはシグネチャで識別されます：PNG、JPEG、GIF、WebP、AVIF、HEIC、BMP、ICO、TIFF、またはSVGテキストです。data URIが宣言するMIMEタイプとバイトが異なる場合は警告が表示されます。プレビューには、デコードされたバイトのオブジェクトURLを使います。
一般的な使用例
- REST APIがBase64で返した画像の表示
- HTMLメールやCSSファイルからのインライン画像の抽出
- data URIが主張どおりの形式かどうかの確認
- テストログのBase64スクリーンショットのPNGファイルとしての保存
セキュリティ注意事項
画像はブラウザ内でCanvas APIを使ってデコード、処理、エンコードされます。サーバーには何もアップロードされません。SVGの内容は <img> 要素の中でのみ表示されるため、SVG内のスクリプトは実行されません。
よくある質問
data:imageの接頭辞は必要ですか？
いいえ。生のBase64でも動作し、形式はデコードされたバイトから判別されます。
「有効なBase64ではありません」と表示されるのはなぜですか？
文字列にBase64のアルファベット以外の文字が含まれているか、長さが不正です。多くは、途中で切れているか、引用符やエスケープシーケンスが含まれているためです。Base64の部分だけを貼り付けてください。
データが画像でない場合はどうなりますか？
ツールは、Base64は正しくデコードできるが認識できる画像形式ではないことを伝え、誤解を招くプレビューは表示しません。