🔍 data URI デコーダー

data URI（データURI）は、ファイルの中身をURL文字列そのものに埋め込む仕組みで、data:[<mime>][;charset=..][;base64],<データ> という構造をしています。先頭が data: で、最初のカンマの前がヘッダ（MIMEタイプ・文字コード・エンコード指定）、カンマの後ろが実データです。本ツールは、この構造を解析してMIMEタイプとエンコード種別を判定し、中身をデコードして表示します。「画像→データURI変換」の逆方向にあたるツールです。

データ部のエンコードには2種類あります。ヘッダに ;base64 が付いていればBase64（3バイトを4文字で表す方式）で、画像などのバイナリを含められます。;base64 が無ければパーセントエンコード（%20 のように1バイトを %＋16進2桁で表す方式）で、主にテキストやSVGなどに使われます。本ツールは両方を自動判定し、Base64は atob、パーセントエンコードは %XX の復号で、それぞれ元のバイト列に戻します。

MIMEタイプが image/png・image/jpeg・image/gif・image/webp・image/svg+xml などの画像なら、デコード結果を <img> で直接プレビューし、「保存」ボタンで Blob 化して適切な拡張子のファイルとしてダウンロードできます。text/*・application/json・SVGのソースなどテキスト系なら、charset（既定はUTF-8）に従って文字列に復号し、そのまま表示・コピーできます。それ以外のバイナリはファイルとして保存できます。

用途としては、HTMLやCSSに貼られた data URI の中身を確認したい、埋め込まれた画像を取り出したい、壊れていないか検証したい、といった場面で役立ちます。注意点として、data URI はBase64で約1.37倍に膨らむため、巨大なデータを貼るとブラウザのメモリを圧迫したり、動作が重くなったりすることがあります。極端に長い文字列の処理には向きません。すべての処理は端末内（ブラウザ内）で完結し、貼り付けた内容が外部に送信されることはありません。

data URI とは何ですか？

ファイルの中身をURL文字列そのものに埋め込む仕組みです。data:image/png;base64,iVBORw0K... のような形で、外部ファイルを読み込まずにHTMLやCSSの中に画像やテキストを直接書き込めます。本ツールはその文字列を解析して中身を取り出します。

Base64 とパーセントエンコードの両方に対応していますか？

はい。ヘッダに ;base64 があればBase64として、無ければパーセントエンコード（%20 など）として自動判定してデコードします。どちらの形式かは結果の「エンコード種別」に表示します。

画像を取り出して保存できますか？

はい。MIMEタイプが画像（image/png など）の場合はプレビューを表示し、「画像を保存」ボタンでMIMEに応じた拡張子（png・jpg・gif・webp・svg など）のファイルとしてダウンロードできます。保存もブラウザ内で完結します。

入力した data URI はサーバーに送られますか？

送られません。解析・デコード・保存はすべてお使いの端末内（ブラウザ内）で行われ、貼り付けた内容やデコードしたデータが外部に送信されることはありません。オフラインでも動作します。

「復元後のサイズ」はどう計算していますか？

デコードして得られた実際のバイト列の長さ（バイト数）です。Base64は3バイトを4文字で表すため、元データは data URI の文字列よりおおむね小さくなります。データ部の文字数と復元後のバイト数の両方を表示します。

壊れた data URI を入れるとどうなりますか？

data: で始まっていない、カンマが無い、Base64として不正な文字が含まれる、といった場合はエラーメッセージを表示します。どこがおかしいかの目安になるので、入力を見直してください。

SVG はどう扱われますか？

SVG（image/svg+xml）は画像でもあり、中身はテキストでもあります。本ツールでは画像プレビューを表示すると同時に、SVGのソースコードをテキストとしても表示・コピーできるようにしています。

逆に、画像から data URI を作りたいときは？

エンコード（画像→data URI）は「画像→データURI（Base64）変換」ツールをご利用ください。本ツールはその逆で、既にある data URI をデコードして中身を確認・取り出すためのものです。