Data URI Image Encoder
Convert any image to a Base64 data URI locally — get ready-to-paste CSS and HTML snippets with a live preview.
How to Use
- Drop an image onto the box or click it to pick a file — PNG, JPEG, GIF, WebP, SVG and more all work.
- The image is read locally with FileReader and encoded to a Base64 data URI right in your browser.
- Review the size readout: it shows the original bytes, the encoded length, and the roughly 33% Base64 overhead.
- Copy the raw data URI, the CSS background-image snippet, or the ready-made <img> HTML tag with the copy buttons.
- Check the live preview to confirm the encoded image renders exactly as expected before you paste it anywhere.
- Optionally paste an existing data URI into the decode box to preview what it contains, also fully offline.
- Everything runs locally — your image never leaves the browser.
- Base64 adds about 33% to the file size.
- Inline small icons; link large photos.
- Copy the raw URI, a CSS snippet, or an <img> tag.
- Keep inlined images under ~50 KB encoded.
How it works
A data URI packs an image's bytes directly into a URL so the picture rides along inside your HTML or CSS instead of living in a separate file. That removes a network round-trip, which is handy for small, render-critical assets like icons, sprites, placeholders and inline SVGs. The cost is size: because Base64 maps every three bytes of binary to four ASCII characters, the encoded string is roughly a third larger than the source file, and that inflated copy is duplicated into every document that references it rather than being cached once like a linked file.
This encoder runs entirely in your browser. When you drop or pick an image, the page reads it with the FileReader.readAsDataURL API, which decodes the file locally and hands back a fully formed data: string. Nothing is uploaded, no server sees your file, and the tool works offline once the page has loaded. That privacy guarantee matters when the image is a private screenshot, an unreleased design asset, a client logo, or anything else you would rather not transmit to a third-party service just to convert it.
Alongside the raw URI you get two paste-ready snippets. The CSS snippet wraps the URI in background-image:url("data:…") so you can drop it straight into a rule or a custom property, and the HTML snippet gives you a complete <img src="data:…"> tag. A live preview renders the encoded result on a checkerboard backdrop so transparency is obvious, and a size readout reports the original bytes, the encoded length and the exact percentage overhead. When the encoded payload grows past roughly 50 KB the tool shows a warning, because beyond that point a normally linked and cached image file is usually the smarter choice. You can also paste an existing data URI into the decode box to preview what it contains — useful for inspecting strings you find buried in source code — again without anything leaving your machine.
About the Data URI Image Encoder
Working on web development and data tasks? The Data URI Image Encoder is a free browser tool that gives you the answer in seconds. Convert any image to a Base64 data URI locally — get ready-to-paste CSS and HTML snippets with a live preview.
How it works
Paste your text and it turns into the new form right away. This makes text safe to send or store. But it is not a secret code — anyone can turn it back, so do not use it to hide passwords. Everything happens in your browser, so nothing you type is sent away.
Want the deeper story? The Knowledge Base explains the ideas behind the tools in more detail.
Frequently Asked Questions
What is a data URI?
A data URI (or data URL) embeds a file's contents directly inside a URL using the <code>data:</code> scheme, e.g. <code>data:image/png;base64,iVBORw0KGgo…</code>. Instead of pointing a browser to a separate file on a server, the bytes of the image are written inline — usually Base64-encoded — so the resource travels with the markup or stylesheet. Browsers decode it and render the image with no extra network request.
Why is the Base64 version about 33% larger?
Base64 represents every 3 bytes of binary data with 4 printable ASCII characters, so the encoded payload is roughly 4/3 the original size — about a 33% increase — plus a few bytes of padding and the <code>data:</code> prefix. That overhead is the trade-off for being able to embed binary safely inside text-based formats like HTML, CSS and JSON. This tool shows the exact before/after sizes so you can judge whether inlining is worth it.
When should I inline an image versus linking to it?
Inline small, frequently used, render-critical images — icons, tiny logos, 1x1 spacers, simple SVGs — to remove an HTTP round-trip and avoid a flash of missing content. Link to large images, photographs, or anything reused across many pages, because a linked file can be cached once and shared, while an inlined copy is duplicated into every page or stylesheet that references it.
What is the browser-caching trade-off?
A linked image is fetched once and cached by the browser, then reused across pages and visits at near-zero cost. An inlined data URI is part of the HTML or CSS, so it is re-downloaded every time that document is requested and cannot be cached independently. For a logo on every page, inlining can bloat each HTML response; for a one-off hero on a landing page, the difference is negligible.
Are SVG data URIs special?
Yes. SVG is text, so it does not have to be Base64-encoded at all — you can URL-encode it instead (<code>data:image/svg+xml,%3Csvg…</code>), which is often smaller than Base64 because SVG markup is already ASCII. SVG data URIs are popular for CSS icons and masks. This encoder will Base64-encode whatever you give it; for SVG you may get a smaller result by hand-encoding the markup with percent-encoding.
Are there size limits on data URIs?
There is no formal cap in the spec, but practical limits exist. Very long data URIs bloat your HTML/CSS, hurt readability, and can slow parsing. Some older tools and email clients historically capped URLs near 32 KB. As a rule of thumb, keep inlined images well under ~50 KB encoded; above that, a regular linked file is almost always the better choice, which is why this tool warns you past that threshold.
How do I use the Data URI Image Encoder?
Simply type or paste your value and read the result, which refreshes the instant you change something. There is nothing to submit and nothing to wait for.
Do I need to install or sign up for anything?
Not at all — it runs in the browser with nothing to install and no account. After it loads once, it even works without an internet connection.
Is my information private?
Yes. Everything happens in your browser. Nothing you type is sent to a server or saved anywhere.
Common Use Cases
Embedding icons in CSS
Inline a small icon as a background-image data URI so it loads with the stylesheet and needs no separate request.
Self-contained HTML emails
Embed logos and graphics directly in markup for single-file HTML documents that render without external assets.
Quick prototypes & demos
Paste an image straight into a CodePen or single HTML file with no asset hosting or build step required.
Avoiding extra HTTP requests
Inline render-critical thumbnails or placeholders to remove a round-trip and prevent a flash of missing content.
Offline & portable documents
Bundle images inside a document that must work without a network connection or a fixed file structure.
Inspecting an unknown data URI
Paste a data URI you found in source code into the decode box to preview exactly what image it contains.
Last updated: