How to Use Base64 Data URIs in Web Development

A Base64 data URI embeds a file's contents directly into a document instead of referencing it by URL. The format is data:${mediatype};base64,${data}, where ${mediatype} is the file's MIME type (such as image/png or text/css), ;base64 declares the encoding, and ${data} is the Base64-encoded file contents. You use it when you want a page or stylesheet to be self-contained or to avoid an extra network request for a small asset.

The data URI format, piece by piece

Put together, an embedded PNG looks like:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...

The MIME type is not decorative — it tells the browser how to interpret the bytes. Common choices include image/jpeg, image/png, image/gif, text/javascript, text/css, font/opentype;charset=utf-8, application/font-woff;charset=utf-8, and application/font-ttf;charset=utf-8.

Where data URIs are useful

• Images, CSS, fonts, and JavaScript can be embedded wherever you would otherwise reference a URL.
• Removing dependencies on external files — the document no longer needs to fetch a separate asset.
• Reducing network requests — each embedded asset is one fewer round trip.
• Letting a document exist on its own — useful for single-file HTML, email templates, or offline artifacts.

How to build one

1. Get the Base64 text for your file. On base64.run you can drag and drop a file to convert it quickly, or paste content and let auto-detection decide whether to encode or decode. The site also accepts URL shortcuts: linking to https://base64.run/hello world encodes that input, and https://base64.run/aGVsbG8gd29ybGQ= decodes it. Encoded URI components are decoded automatically.
2. Identify the correct MIME type for the file you encoded.
3. Assemble the string as data:${mediatype};base64,${data}.
4. Paste it where the URL would go — for example, in an <img src="..."> attribute or a CSS url(...) value.

Verify it worked

Load the page and confirm the asset renders or executes. If it does not, check the three most common failure points:

• Wrong MIME type — a mismatched type can make the browser refuse to render the content.
• Truncated or corrupted Base64 — the payload must be the complete encoded file. base64.run reports "Not valid Base64 :(" when input cannot be decoded, which is a useful signal that the string is malformed.
• Missing ;base64 marker — without it, the browser will not treat the payload as Base64-encoded data.

When to embed and when to link

Embedding makes sense for small assets where the saved request outweighs the added document size. Because Base64 inflates the data, large files embedded this way bloat the document and can slow initial load. For big images, fonts, or scripts shared across many pages, a normal URL reference is usually the better choice.