【Web開発】「Data URL Schema」と「Blob URL Schema」の違い

Data URL Schema

• 「data:」で始まるURL
• imgタグのsrcに埋め込める。

仕組み

• Blob URL Schemaと異なり直接バイナリデータをURLに埋め込める。

メリット

• Blob URL Schemaと異なり静的にも利用できる。
• 多くのブラウザで対応している。(Blob URL Schemaに比べてレガシーブラウザにも対応しています。）

デメリット

• キャッシュされないためリロードするたび画像データを読み直さないといけない。
• 100Mを超えるようなサイズだと、メモリが逼迫して非常に処理が重たい。（ブラウザが応答不能になる）
• HTMLにとても長い文字列を記述しないといけない。

ユースケース

• APIでのファイルの送信
• ファイルの読み込みを少なくする。
• CSSでの小画像読み込み

Blob URL Schema

• HTML5世代の機能(File APIのFileReaderを使う。)
• 「blob:」で始まるURLの一種、blob以降はランダムな文字列
• imgタグのsrcに埋め込める。

仕組み

• JavaScriptから動的にしか生成できない。
• 文字列にバイナリデータが保持されているのではなく、ローカルのストレージなどに保持されている。
• ローカルのストレージ（ブラウザのローカルストレージでのことではなく、ユーザーのPCのストレージ）に保持しており非同期に通信するのでユーザーのローカル環境が許す限りデータを保持でき、ブラウザメモリも逼迫しない。
• 「URL.createObjectURL()」を使用することで簡単にBlobから生成できる。

破棄するには？

• 現在のページがアンロードされるとBlob URL Schemaが自動消滅する。
• 手動でも削除は可能。

メリット

• Data URL Schemaと異なり文字列ではなくブラウザにバイナリを保持しているので、大容量のバイナリデータを扱うことが可能。(100MBを超えるファイルでも実用に耐える。)
• ランダムな文字列なのでユーザーの個人情報が開発者側に漏洩しない。（ユーザーのアップロードしたファイル名、ディレクトリ名など）

デメリット

• あくまでメモリではなくブラウザに保持するので、他の端末や他のブラウザで見るとアクセスできない。
• また、現在のページをリロードするとBlob URL Schemaも消滅します。
• Data URL Schemaに比べてレガシーブラウザには対応していません。（HTML5なので新しめの技術です。）