Base64 を画像に変換する
ソースコードやログの中で見つけた `data:image/png;base64,...` のような文字列を貼り付けると、その場で画像として表示します。形式(PNG / JPEG / WebP など)と画素サイズを自動で判定し、正しい拡張子を付けてダウンロードできます。
貼り付け方
`data:` から始まる完全なデータ URL でも、Base64 の本体部分だけでも構いません。改行やスペースが混じっていても自動で無視します。データ URL の形式指定がない場合は、先頭のバイト列(マジックナンバー)から形式を判定します。
表示されない場合
文字列の途中が欠けている、コピー時に一部が省略されている、そもそも画像ではないデータ(PDF やフォントなど)である、といった原因が考えられます。表示できない場合は、判定された形式と長さを表示するので手がかりにしてください。
開発時の使いどころ
API のレスポンスに埋め込まれた画像の中身を確認したい、CSS の中の巨大なデータ URL が何の画像なのか知りたい、テスト用のフィクスチャを目視で確認したい — といった場面で、ファイルに書き出さずに素早く確認できます。
よくある質問
`data:image/png;base64,` の部分は必要ですか?
不要です。付いていればその形式を使い、付いていなければバイト列から形式を判定します。どちらの貼り方でも動作します。
画像の形式やサイズは分かりますか?
分かります。判定した形式(PNG / JPEG / WebP など)、デコード後のバイト数、画像の幅と高さを表示します。
SVG も表示できますか?
Base64 で符号化された SVG も表示できます。ただし SVG は外部リソースの読み込みやスクリプトを含む場合があるため、信頼できない SVG の取り扱いには注意してください。
写真はアップロードされますか?
されません。このページを開いた時点で必要なプログラムはすべてブラウザに読み込まれており、選んだ写真はあなたのパソコンやスマートフォンの中だけで処理されます。ネットワークに画像が流れることはないため、通信を監視されていても写真の中身が漏れることはありません。