BlobとBase64
Blob（Binary Large OBject）は、バイナリデータ（コンピューターが内部的に処理する「0」と「1」の2進数で表現されたデータ）をそのまま保持する形式で圧縮されていない生のデータである。
そのため、サイズが小さく、処理が速いといったメリットがある反面、テキストベースではないので、直接埋め込んだり、メールやJSONにそのまま含めにくい。
Webブラウザで扱いやすく、オブジェクトURL（URL.createObjectURL(blob)）にして表示可能である。
※直接バイナリデータを埋め込むと、Webブラウザの場合はバイナリを直接扱う形式になっていないため使用できない。また文字コードとバイナリの不整合によってそのまま埋め込むことでデータが壊れてしまう。ネットワーク通信時にはセキュリティの制約などでそもそも変換を行わない場合は埋め込むことができない仕様となっている
Base64はバイナリデータを文字列（ASCII文字）に変換する形式の共通規格で、「data:image/png;base64,…」のように、データを文字列として埋め込めるため、よくHTMLやCSS、JSON、メールなど「文字列しか扱えない場所」にバイナリデータを埋め込むために使用する。
テキストデータとしてどこでも使えるため、送信・保存がしやすい（JSON/XMLなど。またデータを埋め込むことでリクエスト数を減らすことができるため、それを目的で使用することもある）が、元のデータより約33%サイズが大きくなり、エンコード・デコードに時間がかかるといったデメリットもある。
それぞれの場面ごとに適切な使い分けは以下となる。
| シーン | 適切な形式 |
|---|---|
| Webブラウザで画像を一時的に表示 | Blob（URL.createObjectURL(blob)） ※URL.revokeObjectURL() で解放が必要 |
| JSONで画像データを送信 | Base64（文字列で送ることができる） |
| ファイルをAPIにアップロード | Blob（FormData で送信） |
| HTMLに画像を直接埋め込む | Base64（<img src=”data:image/png;base64,…”>） |
ちなみにJavaScriptにおいて、FileオブジェクトはBlob を拡張したもので、Blobオブジェクトは純粋なバイナリデータを扱うインターフェースがあるのに対して、Fileオブジェクトはファイル名、最終更新日時などのメタ情報も扱うことができる。
Base64とDataURIの違い
Base64とDataURIはしばしば一緒に使われるため混同されがちだが、目的と役割が異なる。
前述のとおり、バイナリデータを文字列（ASCII）に変換する方式で、メールやWebでバイナリを直接送れない環境で使用される（バイナリ → テキストにするエンコード方法）。
それに対して、DataURIはデータを直接埋め込むURIスキームのことであり、具体的には「data:[MIMEタイプ][;base64],<データ> 」の形式で書く「URI（リソースの識別子）」の一種であり、データ部にはBase64以外も使用できる。
つまり、Base64はエンコード方式であり、DataURIは表現形式となり、DataURIの中でBase64が使われることがあるが、Data URI = Base64 ではない。
Base64（単なるエンコード済み文字列）
SGVsbG8gV29ybGQh → "Hello World!" をBase64にした文字列Data URI（Base64を使った埋め込み）
data:text/plain;base64,SGVsbG8gV29ybGQh
↑text/plain のデータをBase64でエンコードして埋め込んだURIData URI（Base64なし＝プレーンテキスト）
data:text/plain,Hello%20World!
↑Base64は使っていない、URLエンコードされたプレーンテキスト