Data URI 変換ツール｜ファイルと Base64 Data URI の双方向変換

画像やフォント、PDF などのファイルを data: スキームの Base64 Data URI に変換し、逆に Data URI 文字列を元のファイルへデコードできるツールです。MIME タイプ、ファイルサイズ、Base64 文字数を表示し、画像はその場でプレビュー表示します。

💡 このツールについて

小さなアイコンやロゴを Data URI として HTML や CSS に直接埋め込むと、その分の HTTP リクエストを減らせます。CSS の background-image やメール HTML の画像など、外部ファイルを持ちたくない場面で重宝します。一方で、すでにある Data URI が何のファイルなのか確認したい、元の画像として保存し直したい、という逆方向のニーズもあります。

このツールはエンコードとデコードの両方をタブで切り替えられます。エンコード側はドラッグ&ドロップに対応し、変換後すぐに Base64 が何文字になったか分かるので、埋め込みすぎによる肥大化を判断できます。デコード側は Data URI を貼り付けると MIME とサイズを解析し、画像ならプレビュー、ボタン一つで拡張子付きファイルとして書き出します。

🧐 よくある質問

Q. どんなファイル形式に対応していますか? 画像・フォント・PDF・テキストなど、ブラウザが読み込めるあらゆるバイナリに対応します。Data URI 自体はファイル形式を問いません。

Q. Base64 にするとサイズはどう変わりますか? Base64 はバイナリを約 4/3 倍に膨らませます。表示される Base64 文字数で増加分を確認できます。数 KB 程度の小さなアセット向けです。

Q. ;base64 が付かない Data URI も読めますか? 読み取れます。data:text/plain,Hello のようなパーセントエンコード形式も MIME を解析して表示します。

Q. デコード時のファイル名はどうなりますか? MIME タイプから拡張子を判定し decoded-file.png のような名前で書き出します。判定できない場合は .bin になります。

📚 Data URI の豆知識

Data URI スキームは RFC 2397 で定義され、data:[<mediatype>][;base64],<data> という構造を持ちます。国内のウェブ制作では、HTML メールのインライン画像や CSS スプライトの代替として古くから使われてきました。とくにアイコンフォントが普及する前は、小さな装飾画像を CSS に埋め込んで読み込みを速くする手法が定番でした。現在も SVG をそのまま Data URI 化してインライン背景に使うテクニックは現役で、ファイル分割とインライン化のトレードオフを意識する場面は今も多くあります。

ファイルの読み込みと変換はすべてブラウザ内で完結し、サーバーには送信されません。