データURLとは
- MDN Web Docsによると
「データ URL は data: スキームが先頭についた URL で、小さなファイルをインラインで文書に埋め込むことができます。」とのこと
形式
- data:[＜mediatype＞][;base64],＜data＞
※Base64：バイナリデータをテキストデータとして扱う手法（エンコード）の１つ
何が嬉しいのか
- 通信が発生しない！
背景
- 小さいデータはHTTPリクエストのオーバーヘッドが無視できない
例えば大量のアイコンなど - CSSスプライトという手法で対策するのも手だが、開発工程が煩雑になる
- データURLであればHTML（やJSON）に埋め込むことができるので手軽に通信回数を減らせる
使い所
- （先の例）大量の小さいデータを扱いたい
- File API
ユーザが選択した画像の表示をブラウザ内で完結させられる（※重要！） - AJAXで取得したバイナリデータをURL表現に変換（※重要！）
- imgタグで表示
- ファイルダウンロード
弱点
- 最大サイズの制限
ブラウザによって最大サイズが異なっているようだが、せいぜい数十MBと考えておくのが無難 - キャッシュが効かなくなる
最後に
- 知っておくと確実に実装の幅が広がります
- 特にAJAXとの組み合わせで重要です
- 使いすぎには注意。使い所を見極めましょう