小さな素材を、そのまま埋め込む

Data URI変換

テキスト・ファイル・SVGからdata: URLを生成。既存URIは内容とメタデータを分けて確認できます。

Data URI変換

入力

結果

テキスト・ファイル・URIの内容はブラウザー内で処理し、送信やURLへの保存は行いません。

設定とメタデータ

パラメーターなしのtype/subtypeを指定。テキストはUTF-8、ファイルは元のバイト列を保持します。MIMEは形式判定ではありません。

上限:元データ・復元データ600,000バイト、URI 1,900,000文字、ヘッダー1,024文字。

MIME:text/plain;charset=utf-8 · 文字セット:utf-8 · エンコード:Base64

URI全体の長さ:Base64 65 · パーセント 80

20バイト · URI 65文字

CSSに埋め込んだアイコンが表示されないときは、画像より先にカンマや井桁のエスケープを確認すると原因が見つかることがあります。Data URI変換では、アドレスの構造と中身のバイト列を別々に調べられます。

Data URI変換を使う場面

同じSVGで二つの長さを比較

Data URI変換は、同一のバイト列についてBase64とパーセント形式のURI全長を示します。ASCIIが多いSVGでは後者が短くなる場合がありますが、記号や日本語の割合で逆転します。実際の数値で選べます。

同じSVGソースから二種類のURIへ枝分かれし、それぞれに長さの目盛りが付いている図。

表示せずに中身を取り出す

Data URIデコードでは、読みやすい文字列とバイナリを区別することが大切です。文字または16進数で内容を確認してから元のバイト列を保存できます。HTMLやSVGもソースとして表示し、実行しません。

URIがメタデータと元のバイトブロックを持つファイルに分かれる図。

見落としやすい三つの確認点

01

SVGモードは変換用のプリセット

SVGパーセントエンコードを初期選択し、MIMEタイプをimage/svg+xmlに固定します。Base64への切り替えも可能です。図形、色、改行、XML構造は変更せず、最適化や構文検証は別の作業として扱います。

02

出力が更新されたかを見る

自動変換は変更後350ミリ秒待って実行します。オフにすると変換ボタンとCtrl/Cmd + Enterが使えます。入力や設定の変更直後はコピー・保存が無効になり、古い結果の持ち出しを防ぎます。

03

コピーとバイト保存を使い分ける

解析結果にはテキストか16進数かを表示します。コピーはその表現、バイト列の保存は元の内容全体が対象です。サンプル・クリア・ファイル置換は数量を確認して適用し、一度取り消せます。

中身を変えずに扱う機能

テキストとファイルのData URI生成

テキストはUTF-8で符号化してcharsetを付けます。ファイルはブラウザーが返す種類を使い、不明ならapplication/octet-streamを選択します。MIMEを上書きしても実際のファイル形式は変換されません。

パーセント形式もバイト単位

%FFは有効な1バイトであり、UTF-8の文字として読めなくても復元できます。+は空白に置き換えません。生成時は引用符、括弧、井桁、空白、日本語などをバイトごとにエスケープします。

ヘッダーと本文を分けて検査

最初のカンマを境にMIMEとデータを分離します。charsetなどの重複しないパラメーター、末尾のbase64マーカー、エスケープされたパラメーター値に対応し、不正な構造は位置付きで報告します。

表示範囲に左右されない出力

元データまたは復元データのバイト数とURI全体の文字数を確認できます。結果は最初に20,000文字を表示し、続きを追加できます。コピーとダウンロードは常に最新の結果全体を使います。

受け付ける形式と制限

ブラウザーの寛容な補正は行わない
解析にはdata:とカンマが必要です。標準Base64の正しいパディングまたは省略は受け付けますが、不完全なパディング、未使用ビットの非ゼロ値、Base64URLは拒否します。生の空白や井桁もエラーです。
MIMEとパラメーターの範囲
生成用MIMEはパラメーターなし、ASCIIで127文字までです。解析ヘッダーは1,024文字までで、パラメーター名は重複できません。ASCIIの値はエスケープ可能ですが、charsetの重複やマーカー位置は修復しません。
文字セットを推測して変換しない
UTF-8とASCIIを表示できます。明示MIMEにcharsetがなければUTF-8を試し、MIME自体が省略された場合はUS-ASCIIです。その他の文字セット、無効な文字列、バイナリ制御文字は16進数で示します。
単一の小さなリソース向け
元データと復元後は600,000バイト、URIは1,900,000文字が上限です。32,768文字からの注意表示は埋め込み検討用で、ブラウザー共通の制限ではありません。複数ファイル、圧縮、外部URL取得は扱いません。
SVGを描画・最適化しない
SVGモードはソースを符号化するだけです。スクリプト除去、色変更、PNG化、SVG構造の検証は行いません。画像やiframeのプレビューも作成せず、解析成功を内容の安全性の証明には使えません。
貼り付け先の動作は別途確認
CSS・HTML・Markdownの包みを付けず、URIのみを出力します。サイトのCSPやメールソフトで利用できるかは確認が必要です。Data URIは暗号化ではなく、埋め込み素材だけを独立してキャッシュする仕組みでもありません。

Data URI変換のよくある質問

ファイルはサーバーにアップロードされますか?

いいえ。選択したファイルはブラウザー内で読み取ります。入力を送信したり共有URLに保存したりしません。ただし、保存したURIそのものには内容がすべて含まれるため、そのファイルを共有すると元データも共有されます。

ファイルは常にBase64でエンコードする必要がありますか?

必要ありません。ファイル入力をBase64に固定するツールもありますが、こちらではパーセント形式も選べます。どちらもバイト列を保ったまま表現できます。バイナリはBase64が扱いやすく、ASCII主体の内容は長さを比較して選べます。

サイズに制限はありますか?

はい。元ファイル・復元後ともに600,000バイト、URI全体は1,900,000文字までです。これは本ツールの処理予算です。埋め込み先の制限や保守性も考慮し、大きい素材は外部ファイルとして扱う方法も検討してください。

内容がBase64かどうか分かりますか?

ヘッダー末尾の;base64を読み取って判定します。データの見た目からは推測しません。マーカーがなければパーセント形式として処理するため、Base64文字列だけを貼り付けるのではなく完全なURIを入力してください。

デコードされた内容はいつテキストとして表示されますか?

対応するUTF-8またはASCIIの文字列として読める場合です。未対応のcharset、不正な文字バイト、バイナリ制御文字は16進数に切り替えます。表示できなくてもバイト列の保存はでき、置換文字への書き換えは行いません。

未対応のケースがありますか?

埋め込む前にひと確認

Data URI変換で二つの長さとメタデータを確認し、復元されたバイト列を調べてから素材を組み込みましょう。