A Blob URL is a temporary address that lets browser-native features access a Blob or File. It looks like blob:https://example.com/..., but does not identify a public server file.
Object URLs bridge JavaScript-managed binary data and URL-based interfaces such as img, video, iframe, workers, and download links without converting every byte into Base64 text.
What createObjectURL creates
URL.createObjectURL(blob) registers a Blob in the current browser context and returns an opaque token. When an element requests that token, the browser resolves it to registered bytes and MIME type.
The string is a capability reference, not an encoding or filesystem path. It should not be parsed or persisted as a permanent address.
Preview and download flow
An image tool assigns a generated WebP Blob URL to img.src. A ZIP tool assigns an archive Blob URL to an anchor with a download filename. Creating the URL is synchronous; consuming or decoding content may still be asynchronous.
const url = URL.createObjectURL(blob);
preview.src = url;
download.href = url;
download.download = 'result.zip';
URL.revokeObjectURL(url);Lifetime and cleanup
The browser keeps a Blob reachable while its URL remains registered. Replacing previews without revoking old URLs can retain large outputs and grow memory.
Do not revoke before an image loads or download can consume it. Revoke the previous URL when replaced, during component cleanup, or after the intended operation starts. Downloaded files are unaffected.
Blob URL versus Data URL
A Data URL embeds content in the URL string, usually as Base64. A Blob URL keeps bytes in browser-managed storage and passes a short token, avoiding Base64 size expansion and giant strings.
Data URLs are portable and useful for tiny embedded assets. Blob URLs are session-local and better for temporary large previews and downloads.
| Property | Blob URL | Data URL |
|---|---|---|
| Payload | Browser-managed Blob | Inside URL string |
| Overhead | No Base64 expansion | Usually 4/3 |
| Lifetime | Until revoked/context ends | As long as string exists |
| Portable | No | Yes |
| Best use | Large preview/download | Tiny embedded asset |
Security and privacy
A Blob URL is hard to guess but is not authentication. Code in an authorized context may access it, so sensitive URLs should not be exposed to untrusted scripts.
Creating a Blob URL does not upload data. Passing the Blob to fetch or FormData would; privacy depends on the complete code path.
Common mistakes
Typical bugs include never revoking URLs, revoking too early, retaining stale URLs after Blob replacement, storing them in a database, or expecting them to survive reload.
- Keep the Blob if regeneration is needed.
- Revoke old URLs on replacement.
- Use persistent server URLs only when sharing is required.
- Avoid Base64 for large previews.
Key takeaways
createObjectURL does not encode or upload a file. It creates a temporary browser-managed reference to an existing Blob; use it for previews and downloads and revoke stale URLs.