Base64 DataURL Converter

Pure Base64
0 characters

Online Base64 DataURL tool to convert between plain Base64 and full data URL format with automatic MIME detection.

Related

Base64 Encode

Base64 Decode

Base64 Multi-line Merge

Base64 to Image

Image to Base64

Base64 Cleaner

What is a Base64 DataURL?

A DataURL is a URI scheme that embeds data directly in the URL, in the form data:[<MIME type>];base64,<Base64 data>. It lets you inline small resources like images, PDFs, and fonts inside HTML, CSS, or JavaScript without extra HTTP requests.

**Plain Base64 vs DataURL:** Plain Base64 is only the encoded string (e.g. iVBORw0KGgo...); a DataURL is a full URI with the data: prefix and a MIME type, ready to use as the value of src, href, url(), and more.

**What this tool does:** Converts between "plain Base64 strings" and "complete DataURLs" — it can automatically prepend the data: prefix and a MIME type to existing Base64, or extract the plain Base64 portion from a DataURL.

**Typical uses:** ① CSS background image embedding; ② HTML <img> inline src; ③ Markdown image inlining; ④ pasting images into rich text editors; ⑤ debugging the data URI scheme.

Use Cases

  • Add the data: prefix and a MIME type to existing Base64 to get a DataURL ready to embed in HTML
  • Extract the plain Base64 portion from a DataURL for reassembly or transfer
  • Verify that the Base64 payload of a front-end data: URI is complete during debugging
  • Auto-detect the MIME type of Base64 copied from the clipboard (PNG/JPEG/PDF, etc.)
  • Prepare a data URL for CSS background-image or HTML <img src>
  • Turn an image Base64 into a paste-ready DataURL inside a Markdown rich text editor

How to Use

  1. Pick a direction: "Add prefix" (plain Base64 → DataURL) or "Strip prefix" (DataURL → plain Base64).
  2. Paste your content into the left input: plain Base64 in Add mode, or a data:... string in Strip mode.
  3. In Add mode you can keep "Auto detect" or pick a specific MIME type from the dropdown.
  4. The tool converts live and shows the result on the right, ready to copy or download as txt.

Features

  • Two-way conversion: plain Base64 ↔ DataURL
  • 11 MIME type presets: image, document, audio, video, text
  • Auto MIME detection via magic bytes for PNG/JPEG/GIF/WEBP/PDF
  • Whitespace stripping: automatically removes newlines, spaces, and stray chars
  • Live conversion: input is recomputed automatically after 300ms
  • Auto-swap direction: input and output swap when toggling direction
  • One-click copy: copy the converted result to clipboard
  • Download as txt: save the result to dataurl-result.txt
  • Responsive layout: draggable split view on desktop, tab switch on mobile
  • Fully browser-side: no content uploaded to a server

Best Practices

Start with auto-detect

when unsure of the MIME type, keep the default "Auto detect" and only pick manually if detection fails.

Mind size limits

browsers cap DataURLs around 2–4MB, so reference larger files via URL instead of embedding.

Strip stray characters

pasted Base64 often contains newlines which the tool removes automatically; use the Base64 Cleaner if you need a stricter cleanup.

Cross-check the result

after conversion, validate the DataURL with the Base64 Validator or browser DevTools to confirm it loads.

Inspect after pasting

check the decoded result in the browser console after pasting it into the target location to make sure it matches your expectation.

FAQ

Is auto-detect already enabled in Add mode?

Yes. Auto-detect is on by default and inspects the first bytes of the Base64 (magic bytes) to identify PNG, JPEG, GIF, WEBP, or PDF. For other MIME types (e.g. application/json, video/mp4), pick one manually from the dropdown.

What happens if my input already has the data: prefix?

In Add mode, if the input already starts with data: the tool returns it unchanged instead of duplicating the prefix. In Strip mode, if the input isn't a DataURL, the tool strips whitespace and returns plain Base64.

What if auto-detect fails?

If the Base64 doesn't match any PNG/JPEG/GIF/WEBP/PDF magic bytes, auto-detect falls back to application/octet-stream. Pick another MIME type manually if you need something different.

Which MIME types are supported?

image/png, image/jpeg, image/gif, image/webp, image/svg+xml, application/pdf, application/json, text/plain, text/html, audio/mpeg, and video/mp4 — 11 common types in total.

Are there size limits on DataURLs in browsers?

Yes. Most browsers cap total DataURL length (roughly 2MB–4MB), and exceeding it makes the resource fail to load. For larger files, link to a normal URL instead.

Where can DataURLs be used?

HTML <img src>, CSS url(), <a href> downloads, JavaScript fetch, Markdown image syntax, embedded resources in JSON data, and similar places.

Are newlines and spaces in Base64 removed automatically?

Yes. In Add mode newlines and spaces are stripped before the prefix is added; in Strip mode whitespace is also stripped after extraction from the DataURL.

Does the input change when I switch direction?

Yes. When you switch direction, the tool uses the current output as the new input so you can keep working without re-pasting.

Is my content uploaded to a server?

No. Every conversion runs locally in your browser; input and output never leave your device.

Glossary

DataURL
The data URI scheme defined by RFC 2397, with the form data:[<mime>];base64,<data>; usable as the value of src, href, url(), and more.
MIME type
A media type identifier such as image/png or application/pdf. This tool supports 11 common MIME types and can auto-detect them.
Magic Bytes
Fixed bytes at the start of a file used to identify its type. This tool detects PNG/JPEG/GIF/WEBP/PDF by inspecting magic bytes.
Base64
An encoding that represents binary data using 64 printable characters. The payload portion of a DataURL is Base64.
Data URI Scheme
The official data: URI protocol defined by RFC 2397, which is the formal specification name for DataURL.

Authoritative References