Generate a Data URI from an Image

What is a data URI?

A data URI is a self-contained string that embeds a whole file inline. For an image it looks like data:image/png;base64,iVBORw0KGgo… — the browser reads the string itself as the image, with no separate request to a server. It's perfect for inlining a small icon into a stylesheet, embedding a logo in an HTML email, or shipping an asset inside a single JSON or config file.

This generator builds the data URI from the exact bytes of your file, so it's a faithful, lossless copy. Alongside the URI you get a copy-ready CSS background-image rule and an <img src> tag, so you can drop it straight into your project.

How to generate a data URI

1. Open your image. Drag an image onto the tool, choose a file, or paste it from your clipboard.
2. Choose Data URI (or CSS / HTML). The Data URI tab gives the full data:image string; the CSS and HTML tabs wrap it for you.
3. Copy and paste. Tap Copy and paste the URI into your CSS, HTML, or JSON — or download it as a .txt file.

Best for small assets

Data URIs shine for small, rarely-changing assets that you want bundled with your code. For large or frequently-cached images, a normal URL is usually faster because the browser can cache the file on its own.