Image to Data URI

A data URI is a scheme that embeds resource bytes directly in a URL string. For images, the format is data:image/png;base64, followed by encoded content. Browsers treat it like any other URL when assigned to src or background-image.

The MIME segment — image/jpeg, image/png, image/webp — tells the decoder which format to expect. Incorrect MIME labels can cause render failures even if bytes are valid.

Unlike relative file paths, data URIs travel with the HTML or CSS that references them. That makes prototypes portable and email self-contained, but also couples image updates to document edits unless you regenerate from a tracked source file.

Prototype branches that inline data URIs should regenerate strings before merge so production HTML does not carry stale embedded icons.

Benefits: fewer HTTP requests for tiny assets, no separate hosting for single-use graphics, and easy portability in HTML email where external images are blocked.

Costs: roughly 33% size overhead from Base64, no separate browser cache entry, and harder maintenance when the source image updates. Large data URIs inflate HTML and hurt performance scores.

HTTP/2 and HTTP/3 reduce the pain of many small requests, so data URIs are not a default win for every icon. Use them where blocking or packaging constraints dominate — email first open, offline HTML bundles — not for large marketing heroes.

Static site generators can inject data URIs at build time from source files — same benefit as manual copy without bloating git history with megabyte strings.

In HTML: img src equals the full data URI string. In CSS: .logo { background-image: url("data:image/svg+xml;base64,..."); }. JavaScript can assign the same string to element.src dynamically.

Quote carefully in CSS — parentheses and semicolons in the URI require proper escaping or wrapping in quotes.

Content Security Policy may restrict data: in img-src or style-src. Check your policy before inlining widely. Frameworks that hash class names do not change data URI rules — the full string still lives in the stylesheet source.

React and Vue inline styles accept data URIs in url() values the same way plain CSS does when CSP allows it.

Stay under 2–4 KB binary — a few KB encoded — for favicon-scale assets and UI glyphs. Test page weight in Lighthouse after inlining several URIs. What saves one request can cost more in document size.

For responsive hero images, use normal img src pointing to files with srcset. Data URIs do not participate in responsive selection cleanly.

If Lighthouse flags document weight after you inline a dozen icons, move the largest back to external files. A single 40 KB icon as data URI can outweigh the HTTP savings from inlining twelve 1 KB glyphs.

Email clients also cap total message size — count encoded bytes before sending campaigns with multiple inlined logos.

Webpack and Vite can import small images as data URLs at build time — this tool helps prototype before wiring the bundler rule.

The tool reads your file locally, encodes it, and prepends the correct MIME type. Nothing leaves your device — suitable for staging assets from private repositories or client mockups.

Copy the output directly or download a text file if you need to archive the URI string.

Encoding runs entirely in your browser, so mockups from private repos and client brands are not uploaded elsewhere. That local processing suits pre-release marketing and NDA work. Close the tab when done; the generated string in your clipboard is still your responsibility on shared machines.

Pair with version-controlled SVG or PNG sources so regenerating URIs after a rebrand is a one-command build step, not manual paste.

SVG icons inline as markup instead of Base64 when possible — smaller and styleable with CSS. Sprites and icon fonts solve similar problems at scale.

HTTP/2 multiplexing reduces the pain of many small requests. Data URIs are a scalpel, not a default for every image on a page.

Icon systems with a shared sprite sheet or component library often beat one-off data URIs at scale. Reach for data URIs when you need a single self-contained file — email, PDF HTML, or a quick prototype — not for an entire design system.

When migrating off data URIs, replace with normal img src in one PR and measure cache hit rates — you should see separate image requests cache independently.

JavaScript bundlers may hash external filenames — data URIs skip that cache busting because the bytes live inline.

Minifiers must not strip url() quotes around data URIs or CSS parsing will break.