Convert text or files into Base64 data URIs you can embed directly in HTML and CSS.
The Data URI Generator encodes content into a data: URI — a self-contained string that carries the data itself, so you can embed an image, font, SVG, or snippet of text inline in HTML and CSS without a separate file request. Provide your input and copy a ready-to-use data URI you can drop straight into a src or url() value.
A data URI packs three things into one string: the MIME type (what kind of content it is), an encoding marker (usually base64), and the encoded data. The browser reads the whole asset from that string with no extra network round-trip. This is why data URIs are popular for tiny, frequently used assets like icons and inline SVGs where an extra HTTP request would cost more than the bytes themselves.
Most data URIs use Base64, an encoding that represents arbitrary binary data using only safe text characters. That matters because HTML and CSS are text formats and cannot hold raw binary bytes directly. Base64 makes any file — an image, a font, an icon — expressible as a plain string that pastes cleanly into your markup. The trade-off is size: Base64 output is roughly one-third larger than the original bytes, which is fine for small assets but wasteful for large ones.
Encode a short piece of text:
Hellodata:text/plain;base64,SGVsbG8=Here text/plain is the MIME type, base64 is the encoding, and SGVsbG8= is Hello encoded. Paste that string into a browser address bar and it renders the text directly — no file needed. For an image, the MIME type would be something like image/png and the data would be the Base64 of the image bytes.
background: url(...) declaration.Data URIs are best for small assets. Because Base64 inflates size by roughly a third and inlined data cannot be cached separately from the page, embedding a large image bloats your HTML or CSS and forces the browser to re-download it on every page rather than reusing a cached file. As a rule of thumb, inline tiny, ubiquitous assets like a logo mark or a handful of icons, and keep larger or reused images as normal files with proper caching. Measuring real page performance beats guessing when you are unsure.
A data URI follows the pattern data:[mimetype];base64,[data] and can be used directly in src or url().
For small, frequently used assets where avoiding an extra request outweighs the size overhead.
No — it re-encodes the same bytes into a text-safe form. The decoded result is identical to the original.
Base64 adds about a third to the size because it represents binary data using a limited set of text characters.
No. Encoding happens locally in your browser.
Yes — SVGs are a common and efficient candidate for data URIs.
Explore the ASCII to Hex Converter for byte-level encoding, or the AES Encryption tool for securing text.
How to Use Data URI Generator
Enter the text or choose the content you want to encode.
The Base64 data URI is created instantly with the right MIME type.
Copy the data URI into your HTML, CSS, or JavaScript.
Convert text or files into Base64 data URIs you can embed directly in HTML and CSS.
Tool Use:
0Added:
Sep 11, 2026Type:
Free ToolPrivacy:
Client SideGenerate custom QR codes for URLs, vCards, Wi-Fi, text, and more — high-resolution PNG and SVG download, free.
Convert byte arrays to strings online. Decode space- or comma-separated bytes (decimal, hex, or binary) to UTF-8 text. Free browser-based byte-to-string converter.
Decode Base64-encoded image strings back to viewable PNG / JPG / GIF / WebP images — free and instant.
Generate stylish text images with custom fonts, colors, gradients, shadows, and strokes. Download as PNG instantly — perfect for social media, logos, and banners.
Encode text or files to Base64 and decode Base64 strings back to text. Free, instant, browser-only — no upload, no logging.