Data URI Generator: Convert Files to Base64 Data URIs for Inline HTML and CSS

Every web developer eventually hits the same set of annoyances: a tiny icon that costs an extra HTTP request, a logo in an HTML email that never renders, or a single-file demo that refuses to work without a folder of assets. The classic fix is the data URI — a way to embed a file's contents directly into your HTML or CSS as a self-contained URL. Our Data URI Generator turns that normally tedious, manual process into a single step: drop in any file, get a ready-to-paste base64 data URI, and copy it straight into your code.

This free, browser-based tool converts text and files — images, PDFs, fonts, audio, and video — into RFC 2397-compliant data URIs, and it also works in reverse as a data URI decoder, turning a base64 string back into readable text. Because everything runs 100% client-side, your files never leave your machine. There is no upload, no sign-up, and no usage limit.

Whether you want to embed an image in CSS, build a self-contained prototype, or reverse-engineer a mysterious base64 blob you found in a stylesheet, this guide explains how the data URI scheme works, when inlining is a good idea, and how to get the most out of the generator.

Why Use the Data URI Generator?

• Eliminate extra requests for tiny assets. Inlining small icons and logos removes round trips to the server, which is especially valuable on high-latency connections and in single-file documents.
• 100% private, client-side conversion. The tool base64-encodes files entirely in your browser. Nothing is uploaded to a server, making it safe for confidential designs, client work, and internal documents.
• Automatic MIME type detection. The generator sniffs the correct media type offline from the filename extension — from image/png, image/jpeg, image/webp, and image/svg+xml to font/woff2, application/pdf, and text/csv — so your data URI is valid without manual lookup.
• Encode and decode in one place. Switch between modes instantly: base64 encode a file into a data URI, or paste an existing data URI to extract its text and see its detected media type.
• Copy or download in one click. Grab the finished data URI for pasting into HTML or CSS, or download the encoded file back to disk to verify the round trip.
• Free with no sign-up. No accounts, no watermarks, no artificial limits — just a fast data url generator that works whenever you need it.

Key Features

• The MIME table covers the assets developers actually inline: every common image format (PNG, JPEG, GIF, WebP, BMP, ICO, SVG, AVIF), audio and video containers, documents, structured text formats like JSON, XML, CSV, and Markdown, plus all four major web font formats (WOFF, WOFF2, TTF, OTF).
• Decode mode is genuinely useful for auditing: paste any base64 data URI from a codebase and the detected-MIME chip tells you whether it is really an image, a font, or something unexpected hiding in your bundle.
• Because detection happens from the filename alone, the tool works fully offline and never needs to read file contents on a server to guess the type.

How to Use

1. Open the tool. Navigate to the Data URI Generator — it loads instantly and needs no account or installation.
2. Add your input. Drag and drop any file into the drop zone, or switch to text mode and paste the content you want to encode.
3. Check the MIME type. The detected media type appears automatically; override it with a custom value only if you know the file needs a different type or charset.
4. Copy your data URI. Click copy and paste the result into an src attribute, a CSS url(), or an @font-face rule.
5. Decode when needed. Switch to decode mode, paste an existing data URI, inspect the detected MIME chip, then read the decoded text or download the original file.

Understanding Data URIs

The data URI scheme is defined by RFC 2397 and follows a compact syntax:

data:[<mediatype>][;base64],<data>

• data: — the scheme that marks the URL as inline data rather than a network location.
• <mediatype> — an optional MIME type such as image/png or text/plain;charset=utf-8. If omitted, it defaults to text/plain;charset=US-ASCII.
• ;base64 — an optional token meaning the payload is base64-encoded. Binary files like images and fonts always use this; plain text may instead be percent-encoded.
• <data> — the payload itself, either base64 characters or URL-escaped text.

A base64 data URI carries a size cost: base64 encodes every 3 bytes of binary data into 4 ASCII characters, adding roughly 33% overhead before you count the scheme prefix. A 3 KB icon becomes about 4 KB of text. That trade is worth it for small assets, but it scales against you quickly on large files.

When should you inline, and when should you not?

• Inline small, ubiquitous assets. Icons, bullets, tiny logos, and critical above-the-fold graphics under roughly 1–2 KB benefit most, since you trade a request for a modest size increase.
• Remember HTTP/2 changed the math. Multiplexing means many small files can share one connection, so the request-saving argument for inlining is weaker than it was under HTTP/1.1. Inlining still wins for assets needed by a single page, but less clearly for sprites reused everywhere.
• Mind the caching trade-off. A normal image file is cached independently and reused across pages. A CSS background data URI, by contrast, lives inside your stylesheet: it re-downloads every time the CSS is fetched and cannot be cached on its own.
• Know email constraints. HTML email is inconsistent: many clients strip or block data URIs, and Outlook ignores them entirely. Test before relying on inline images in email signatures and newsletters.

Practical Use Cases

Inline icons and logos in CSS

The most common job for a data uri generator is producing a css background data uri for small graphics. Generate the URI from an SVG or PNG, then drop it into your stylesheet:

.icon-download {
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmci...');
  background-repeat: no-repeat;
  background-size: contain;
}

No extra request, no sprite sheet, and the icon travels with the stylesheet.

Self-contained HTML emails and single-file demos

For a signature, a landing-page mockup, or a demo you want to send as one attachment, an inline image in HTML keeps everything in a single file:

<img
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..."
  alt="Company logo"
  width="120"
  height="40"
/>

The document renders even with no server, no build step, and no asset folder — ideal for prototypes and bug reports.

Embedding custom web fonts for prototypes

When sharing a quick prototype, hosting a font file is friction. Encode the WOFF2 and embed it directly:

@font-face {
  font-family: 'ProtoSans';
  src: url('data:font/woff2;base64,d09GMgABAAAAAA...') format('woff2');
  font-weight: 400;
  font-style: normal;
}

The generator's font MIME detection handles font/woff, font/woff2, font/ttf, and font/otf automatically. For production, switch back to hosted, subsetted fonts to keep payloads down.

Decoding data URIs found in code

Inherited a stylesheet with a 40 KB mystery string? Paste it into decode mode. The detected-MIME chip reveals the media type, the decoded text appears for inspection, and you can download the original file — turning an opaque blob back into a real asset you can edit and re-export.

Best Practices

• Inline small, keep large files external. Use data URIs for assets under about 1–2 KB; serve photographs, videos, and full font families as normal files.
• Always verify the MIME type. A wrong media type can silently break rendering; trust the detected chip, and override it only deliberately.
• Prefer SVG for icons. SVG data URIs are resolution-independent and often smaller than raster equivalents, especially for flat, single-color graphics.
• Watch your stylesheet weight. Every embedded asset inflates your CSS permanently and defeats independent caching, so audit inlined assets before shipping.
• Test email clients first. If you embed images in HTML email, confirm support in your target clients and provide hosted fallbacks where needed.
• Keep originals alongside. Data URIs are awkward to edit; store the source file so you can regenerate the URI after changes.

Ready to Embed Anything?

Stop hand-rolling base64 in terminal scripts or trusting shady upload sites with your files. The Data URI Generator converts images, fonts, PDFs, and text into valid RFC 2397 data URIs in one drag-and-drop, decodes any data URI back to its source, and does it all privately in your browser — free, with no sign-up. Bookmark it and keep your next prototype, email, or stylesheet truly self-contained.

Related Tools You Might Like

• Base64 Encoder/Decoder
• HTML Encoder
• URL Encoder

Happy embedding!