Data URI Generator

How to generate a data URI from an image

A data URI embeds a file directly inside a text string, so the browser never has to make a separate request to fetch it. For images the payload is Base64-encoded, which makes the string safe to place inside HTML attributes, CSS values, JavaScript sources and JSON. This generator reads your image locally and returns the complete URI together with snippets for the two most common destinations.

1. Add an image. Drag a file onto the generator, pick one from your device, or paste from the clipboard.
2. Review the result. The page shows the detected MIME type, original size, Base64 length and a local preview.
3. Copy the format you need. Take the full data URI, the HTML <img> snippet, or the CSS background-image declaration.
4. Paste and test. Drop it into your code and check the page where it will actually be used.

Data URI syntax, piece by piece

Every data URI follows the same pattern: data:[mediatype][;base64],data. The mediatype is the file's MIME type — image/png, image/jpeg, image/gif, image/webp or image/svg+xml. The ;base64 marker says the payload is Base64 text rather than percent-encoded bytes. Everything after the single comma is the encoded file itself, with no line breaks or whitespace. If the prefix and the payload don't match — for example a JPEG body labeled as image/png — browsers usually fail to render the image, so copy the whole string rather than editing it by hand.

Using a data URI in HTML

Put the complete URI in an img src attribute, or use it as the href of an SVG <image> element. Keep a meaningful alt text on content images, exactly as you would for a normal file. The string can be as long as you like — HTML attributes have no practical length limit — but remember the payload counts toward the document size your visitors download.

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Cart icon" width="24" height="24" />

Using a data URI in CSS

Inside CSS, place the URI in url(). Quotes are optional when the string contains no whitespace or special characters — Base64 and the data: prefix both qualify — but adding double quotes is a safe habit, and required in the rare case a linter or preprocessor rewrites the value. Use the background-image property for decorative assets and icons where a separate HTTP request isn't worth it.

.spinner {
  background-image: url("data:image/gif;base64,R0lGODlh...");
  background-repeat: no-repeat;
}

When a data URI is worth it

• Tiny, reused assets: icons, logos, badges and spinners where one less request matters more than a few hundred bytes.
• Single-file deliverables: email templates, HTML reports or demos that must work as one portable file.
• Prototypes: quick tests and fixtures that shouldn't depend on an image host or a build step.
• Text-only channels: APIs and databases that accept strings but not binary uploads.

When a normal image file is better

A data URI cannot be cached independently — it ships inside the HTML or CSS that references it, every time. Base64 also inflates the payload by roughly 33%. For large photos, hero images and anything reused across many pages, a separate optimized file with its own cache lifetime and CDN delivery is almost always the faster choice. Inline the small stuff; link the big stuff.

Base64 vs URL-encoded data URIs

The data URI scheme also allows percent-encoded payloads — for example data:image/svg+xml,%3Csvg%20.... That form is common for small SVGs because the raw markup stays semi-readable and gzip compresses it well. For binary formats such as PNG, JPEG, GIF and WebP, however, Base64 is the standard choice and what this generator produces. If a tool rejects your data URI, check whether it expects the Base64 form or the URL-encoded form before changing anything else.

Private, browser-only generation

The generator uses the browser's FileReader API. Your image is read on the current device and the data URI is assembled locally; the file is not uploaded to this site, and nothing is stored. That makes the tool safe for internal screenshots and unreleased design assets — although once a data URI exists, treat it like the file itself, because anyone holding the string can decode it.