データURLとは：data:text/html;base64などを解説
データURL（data: URI）
Data URIとdata:text/html;base64の解説（エンコーダー付き）| We.Inc
data: URLの仕組みを解説。構文、base64とパーセントエンコードの違い、約3分の1のサイズ増加、data:text/htmlがタブで開けない理由。エンコーダーとデコーダー付き。
データURLは、ファイル全体をアドレスそのものの中に含めます。構成は、data:、任意のメディアタイプ、バイト列がbase64エンコードされている場合は;base64、カンマ、そして内容です。data:text/html;base64,PGgxPkhpPC9oMT4=は小さなWebページです。base64にするとデータは約3分の1大きくなり、ブラウザーはdata:ページをトップレベルのタブとして開くことを拒否します。
データURLの構造
- メディアタイプ
- image/svg+xml
- 任意。デフォルトはtext/plain;charset=US-ASCII
- パラメーター
- ;charset=utf-8
- 任意。メディアタイプの後に置く
- エンコードの指定
- ;base64
- データがbase64の場合のみ
- データ
- PHN2Zz4uLi48L3N2Zz4=
- base64、またはパーセントエンコードしたテキスト
データURLは、小さなアイコン、CSSの背景、テスト用のデータ、生成したダウンロードファイルに便利です。一方で、長いdata:text/htmlの文字列をアドレスバーに貼り付けても何も起きず、混乱の元になることもよくあります。下のツールでは、任意のテキストをデータURLにエンコードしたり、元に戻したりでき、元のデータと比べて何バイト増えるかも正確にわかります。
- 内容を入力または貼り付け、メディアタイプを選びます。base64形式とパーセントエンコード形式の両方が、それぞれの長さとともに表示されます。
- サイズを比べます。base64は3バイトにつきほぼ4文字です。プレーンテキストやSVGでは、パーセントエンコードのほうが短くなることがあります。
- 任意のデータURLをデコーダーに貼り付けると、メディアタイプ、エンコード、内容を確認できます。画像タイプはプレビューが表示されます。
- data:ページは単独のタブとして開けないため、HTMLの結果はサンドボックス化されたフレーム内に表示されます。
- CSS内のSVGには、たいていbase64よりパーセントエンコードのほうが小さく、読みやすさも保てます。#は%23にエンコードするのを忘れずに。
- インライン化するのは小さなファイルだけにしましょう。データURLは個別にキャッシュできないため、大きなものは、それを含むページやスタイルシートのたびに再ダウンロードされます。
- メディアタイプをまったく指定しない場合、デフォルトはtext/plain;charset=US-ASCIIになります。アクセント記号や絵文字を含むテキストでは、タイプを明記してcharset=utf-8を追加しましょう。
- データURLはクエリ文字列に対応していません。カンマ以降は疑問符も含め、すべてデータとして扱われます。
- ページ内で訪問者が生成するファイルには、URL.createObjectURLによるblob: URLを使えば、巨大な文字列を組み立てずに済みます。
よくある質問
data:text/html;base64をアドレスバーに貼り付けても開かないのはなぜですか？
最近のブラウザーは、フィッシング対策としてdata: URLへのトップレベルの遷移をブロックしています。dataページは本当のオリジンを隠したまま、どんなサイトにもなりすませるからです。iframe、img要素、ダウンロードリンクの中であれば、内容は引き続き機能します。
base64にするとファイルはどれくらい大きくなりますか？
およそ3分の1です。base64は3バイトごとに4文字で表すため、30 KBの画像は圧縮前で約40 KBのテキストになります。正確な増加量は長さとパディングによって変わります。
base64のデータURLを画像に戻すには？
このページのデコーダーに貼り付けてプレビューするか、そのままimgのsrcに入れます。ファイルとして保存するには、画像をbase64に変換するツールを逆向きに使うか、JavaScriptでデータURLをfetchして得られたBlobを保存します。
サイズの上限はありますか？
MDNによると、ChromiumとFirefoxは512 MB、Safariは2,048 MBです。ただしそれよりずっと手前から、巨大なデータURLはHTMLやCSSの解析を遅くし、キャッシュもできなくなるため、数キロバイトに抑えましょう。
データURLのページはどのオリジンになりますか？
作成元ページのオリジンではなく、独自の不透明なオリジンになります。そのため、data: iframe内のスクリプトは、それを含むページから同じサイトの一部ではなく、外部のものとして扱われます。
インライン化が役立つときと逆効果なとき
- インライン化するとリクエストを1つ減らせます。これは、読み込み中のスピナーや単一ファイルのデモのファビコンなど、ごく小さなアセットがいくつかある場合に効果があります。アセットが大きい場合や多くのページで使う場合は逆効果です。一度キャッシュされる代わりに、HTMLファイルやスタイルシートのたびにそのバイト列が一緒に送られるからです。
- 妥当な目安は、数キロバイト未満で一度しか出てこないものはインライン化し、それ以外は通常のファイルとしてリンクすることです。
base64とパーセントエンコード、どちらを使う？
- PNG、JPEG、フォントなどのバイナリファイルにはbase64が必要です。テキスト形式、特にSVGではパーセントエンコードが使えます。エスケープが必要なのは#、%、<、>や空白などの文字だけなので、結果は短くなることが多く、人が読める状態も保てます。
- 下のエンコーダーは両方の長さを並べて表示するので、自分の内容に合った小さいほうを選べます。
よくある間違い
- base64の打ち間違い、余計な改行、誤ったメディアタイプは、何のエラーも出さずに失敗します。画像が表示されないだけです。壊れた文字列をデコーダーに通すと、どこがおかしいかがわかります。
- もう1つよくあるミスは、メディアタイプがないときにカンマを忘れることです。data:,Helloは有効ですが、data:Helloは使えるデータURLではありません。
実際のコードでのデータURL
パーセントエンコードしたCSSのSVG背景
SVG内で一重引用符を使うと、url()を囲む二重引用符と衝突しません。色の#は%23と書きます。
小さなインライン画像
imgタグでも同じ考え方が使えます。他の画像と同様に、代替テキストを付けましょう。
JavaScriptでファイルからデータURLを作る
FileReader.readAsDataURLは、訪問者が選んだファイルから、メディアタイプを含む完全なdata:文字列を生成します。
データURLをBlobに戻す
fetchはdata: URLを理解するため、バイト列を取り出す最短の方法です。
データURLエンコーダー・デコーダー
エンコードする内容
メディアタイプ
base64のデータURL
パーセントエンコードのデータURL
元のサイズ{n}バイト、base64のURLは{v}文字
パーセントエンコードのURLは{v}文字
サンドボックス化されたフレームで表示
データURLをデコード
データURLを貼り付け
メディアタイプ：{v}
エンコード：{v}
デコード後のサイズ：{n}バイト
有効なデータURLではないようです。data:、任意のタイプ、カンマ、データが必要です。
画像のプレビュー
デコードしたテキスト
コピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る