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.
No image upload
FileReader handles the base64 conversion · output as Data URI / CSS background / '<img>' tag. Files are not uploaded — only an inline transformation in the browser.