Data URI 生成ツール

data URI を作成する手順

1. モードを選びます。テキストから（既定）は入力または貼り付けたものをエンコードします。ファイルから は、ドロップ、貼り付け、選択した任意の種類のファイルを扱います。解析 は逆方向で、URI を分解します。
2. テキストから では、MIME タイプ（たとえば text/css や application/json）、文字コード、エンコード方式（Base64 か URL エンコード）を設定します。ファイルから では、MIME タイプはファイルから自動で入力され、編集もできます。
3. 出力形式 を選びます。Data URI、CSS の url()、ダウンロード名付きの HTML <a>、Markdown があり、画像なら HTML <img>、フォントなら @font-face も表示されます。
4. 出力をコピー を押します。ファイルをダウンロード でペイロードそのものを保存し、.txt で保存 で出力テキストを保存します。

ボタンの下の ペイロード はデータのサイズ、URI の長さ は結果のサイズ、オーバーヘッド はその差をパーセントで表します。

data URI の構文

data URI はファイル全体を 1 つの URL に詰め込みます。

data:[<media type>][;charset=<charset>][;base64],<data>

例をいくつか示します。

データが空でもカンマは必須です。data:, は有効な空の URI です。

Base64 か URL エンコードか

どちらのエンコード方式でも有効な URI になりますが、サイズと読みやすさが異なります。

プレーンな ASCII テキストは URL エンコードのほうが短く、ソース上でも読めます。ASCII 以外のバイトはそれぞれ 3 文字かかる（é は %C3%A9）ので、日本語などほかの文字体系のテキストではすぐに Base64 のほうが有利になります。画像、フォント、PDF などのバイナリファイルには Base64 を使ってください。バイナリデータに URL エンコードを選ぶと、生成ツールが警告します。

ここでの URL エンコードは控えめです。英字、数字、- . _ ~ ! $ * + , ; = : @ / ? はそのまま残し、#、%、引用符、括弧、空白を含むそれ以外はすべてエスケープします。エスケープしない # があると、ブラウザはそれをフラグメントの始まりと読むため、URI がそこで終わってしまいます。SVG には、さらに短い 3 つ目の選択肢が SVG から Data URI へ にあります。

data URI が使える場所

• 画像：<img src>、CSS の background-image、<link rel="icon">、動画の poster。
• フォント：@font-face の src。小さなアイコンフォント 1 つに便利です。MIME タイプがフォントなら、生成ツールがルールを組み立てます。
• ダウンロード：<a href="data:..." download="report.csv"> で、サーバーなしでページ内で生成したファイルを渡せます。
• スタイルシートとスクリプト：ページの Content Security Policy がそれらに data: を許可していれば、<link href> や <script src> で読み込めます。
• テスト用のフィクスチャや JSON ペイロード：小さなファイルをインラインで入れたい場合です。

どこでも使えるわけではありません。Chrome と Firefox は、ページから始まるタブ全体の data: URL への遷移をブロックするので、data:text/html,... へのリンクはクリックしても何も起きません。Content Security Policy では、img-src、font-src など該当するディレクティブに data: を含める必要があります。Gmail をはじめ多くの Web メールクライアントは data URI の画像を完全に取り除きます。メールの Base64 をご覧ください。

サイズとパフォーマンス

Base64 はバイナリデータを約 33% 大きくします。さらに URI はそれを含むページやスタイルシートのたびに繰り返され、独自のキャッシュエントリを持ちません。数キロバイトの小さなアセットなら割に合いますが、写真には向きません。具体的な数値は data URI のパフォーマンス で説明しています。特に画像なら、画像から Base64 へ でエンコード前にリサイズや変換ができます。

コードで data URI を作る

JavaScript で URL エンコードしたテキスト：

const uri = "data:text/plain;charset=utf-8," + encodeURIComponent("Prices: 5 € & up");
// data:text/plain;charset=utf-8,Prices%3A%205%20%E2%82%AC%20%26%20up

Python で Base64 の JSON：

import base64, json

obj = {"name": "Ada", "langs": ["en", "fr"]}
uri = "data:application/json;base64," + base64.b64encode(json.dumps(obj).encode()).decode()
# data:application/json;base64,eyJuYW1lIjogIkFkYSIsICJsYW5ncyI6IFsiZW4iLCAiZnIiXX0=

詳しくは JavaScript での Base64 と Python での Base64 をご覧ください。どこかで見つけた data URI を調べるには、Data URI パーサー を使ってください。

よくある質問