When to use it
Inlining an image in an email body, embedding a tiny icon directly in
a CSS background-image to skip an extra request, or stashing a
screenshot in an MDX file without separate hosting.
How it works
Drop or pick a file and a base64 Data URI is generated locally. The preview shows next to it, plus the original size, encoded size, and percentage overhead.
The output toggle changes the wrapping:
- Data URI — raw, ready to drop anywhere.
- CSS background — wrapped as
background-image: url(...). - img tag — wrapped as
<img src="...">.
Watch the overhead
Base64 inflates the byte count by roughly 33%. Great for small icons
(a few KB), but inlining a 100KB image bloats your HTML or CSS file
and ruins caching. Keep large images on <img src="https://..."> and
only encode the truly tiny ones.
Formats
PNG · JPG · WebP · GIF · SVG, up to 5MB.
Where do your images go?
Image-to-Data-URI conversion happens in your browser. Your file isn't uploaded, and the resulting string isn't stored.