Embed images directly in your code
You’re building a single-file HTML report. Or crafting an email template where external images get blocked by default. Or you’ve got a tiny icon that doesn’t warrant its own HTTP request. The solution in all three cases? Base64 data URLs.
This tool converts any image into a Base64-encoded string formatted as a data URL, data:image/png;base64,iVBOR..., that you can paste directly into an HTML src attribute, a CSS background-image property, or a JavaScript variable. The image becomes part of the code itself. No external file, no network request, no broken image if the server goes down.
And here’s what makes this tool different from server-based converters: everything happens in your browser. The FileReader API handles the encoding locally. Your image never leaves your device. Not even for a millisecond.
How to encode
- Select an image with “Choose File”.
- The Base64 data URL appears instantly, no button to click.
- Hit Copy to grab the string.
A 2 KB favicon PNG becomes roughly a 2.7 KB Base64 string. Paste it into <img src="data:image/png;base64,..." and the image renders inline with zero network overhead.
What this is good for
- Data URL format: ready to paste into HTML, CSS, or JS as-is
- All web formats: PNG, JPEG, GIF, SVG, WebP, BMP, ICO
- Client-side only: your image never uploads anywhere
- Instant encoding: result appears the moment you pick a file
- One-click copy: full data URL string on your clipboard
When Base64 makes sense
HTML email images. Most email clients block external images by default. The user has to click “display images” before they see anything. But Base64-embedded images render immediately, they’re part of the HTML body, not external resources. For logos, icons, and small graphics in transactional emails, this is a game-changer.
Single-file HTML documents. You’re generating a report that someone will download and open locally. If the images are external files, they’ll break the moment the report moves to a different folder. Base64 embeds make the document completely self-contained. Drop it on a USB drive, email it, open it offline, everything works.
Tiny CSS background images. Decorative dots, subtle patterns, small icons used as pseudo-element backgrounds, if they’re under 5-10 KB, encoding them as Base64 data URLs in your CSS eliminates HTTP requests. On a page that loads 30 tiny icon assets, that’s 30 fewer requests during initial page load.
JavaScript-driven dynamic content. Building images on a canvas and need to pass them around as strings? Data URLs are the native format for this. canvas.toDataURL() gives you the same format this tool produces.
The catch
Base64 encoding increases data size by roughly 33%. A 10 KB image becomes a ~13.3 KB string. For small images, the savings from eliminating HTTP requests outweigh this overhead. For images larger than about 50 KB, you’re usually better off serving them as separate files. The Image Compressor on Toolsvu can shrink images before encoding if your data URLs are getting unwieldy.
To go the other direction, decoding a Base64 string back into a downloadable image, use the Base64 to Image tool.
Base64 encoding questions
What image formats work?
Anything your browser can display: PNG, JPEG, GIF, SVG, WebP, BMP, ICO. The tool reads the file’s MIME type and includes it in the data URL prefix automatically.
How big should the image be?
Keep it under 50 KB for best results. Above that, the 33% size overhead starts hurting more than the eliminated HTTP request helps. For tiny icons and logos (under 10 KB), Base64 embedding is almost always a net win.
Does my image get uploaded?
No. Zero server involvement. The browser’s FileReader API reads the file locally and encodes it in memory. Nothing leaves your machine.
Can I use data URLs in CSS?
Absolutely. background-image: url(data:image/png;base64,...) works in all modern browsers. Great for small patterns, icons, and decorative elements.
What’s the difference between data URL and raw Base64?
A data URL includes the MIME type prefix: data:image/png;base64, followed by the encoded string. Raw Base64 is just the encoded data without the prefix. This tool outputs the full data URL format, ready for direct use in HTML and CSS.