How to convert an image to Base64
- Drop a file onto the dropzone, click it to browse, or paste an image straight from your clipboard, it's read on the spot with the browser's FileReader API.
- Open the Output as menu and choose the shape you need: a bare Data URI, a CSS background-image rule, a complete HTML <img> tag, or the Raw Base64 characters with no prefix.
- Check the preview thumbnail to confirm you grabbed the right file, then hit Copy output to send the whole string to your clipboard.
- Paste it into your stylesheet, template, email or JSON, the browser decodes and renders it with no further request.
Why embed an image as Base64?
A data URI carries the picture's bytes inside the text of your document, so the browser paints it without ever opening a second connection. That matters in two situations. The first is latency: a page that inlines its handful of interface icons skips several round trips, and on a slow mobile link those saved requests can shave a noticeable slice off first paint. The second is portability, some places simply cannot reference an external file. An HTML email that links to a hosted image shows a broken box until the reader clicks "load remote content," whereas an inlined logo renders immediately in Gmail, Outlook and Apple Mail alike.
The catch is arithmetic. Base64 uses four characters to represent every three bytes, so the encoded string runs roughly 33% heavier than the original file, and because it lives inside the HTML or CSS it is re-downloaded on every page load instead of being cached once and reused. A 4 KB icon that appears on every page is a fine trade; a 400 KB hero photo inlined the same way bloats your markup and hurts the very metric you were trying to help. When the encoded output looks large, shrink the source first with the image compressor or convert it to a leaner format with PNG to WebP.
When to embed vs link an image
Reach for a data URI when the asset is small, appears on many pages, and rarely changes, UI glyphs, a monochrome logo, a 1 px gradient tile, a placeholder avatar. Inlining these removes requests and guarantees they travel wherever the markup goes: self-contained HTML files, offline demos, browser-extension popups, code sandboxes like CodePen, and README badges. Keep linking to a normal file URL when the image is large, shared across a whole site, or updated independently, photos, illustrations, and anything you'd want the CDN and browser cache to hold onto. As a rough rule, images under about 5–10 KB are good inline candidates; past a few dozen kilobytes the caching penalty usually outweighs the saved request. SVG is a special case: because it is already text, embedding it costs almost nothing and you can even skip Base64 by URL-encoding the markup directly.
Frequently asked questions
What is a Base64 data URI?
It is a string that encodes a whole file inside a URL, in the form data:image/png;base64,iVBORw0…. The image/png part tells the browser the MIME type and everything after the comma is the file's bytes rewritten in Base64. Browsers treat it exactly like a normal image address, so it works anywhere a src or url() is allowed.
Which output format should I pick?
Choose CSS background-image to drop a swatch or icon into a stylesheet, HTML <img> tag for a ready-made element you paste into markup, Data URI when you'll wire the string in yourself (JSON, a JS variable, an email template), and Raw Base64 when a system wants only the characters without the data: prefix.
Does Base64 make the image bigger?
Yes, the encoded text is about a third larger than the binary file, and it can't be cached as a separate asset, so it reloads with every page. That's why inlining pays off for small, frequently repeated images and backfires on large ones. If your source is over ~50 KB, compress it before converting.
Which image formats can I convert?
Anything the tool can read as an image: PNG, JPG, WebP, GIF and SVG. The generated data URI keeps the original MIME type, so a JPG becomes data:image/jpeg;base64,… and an SVG becomes data:image/svg+xml;base64,….
Will a data URI work in HTML email?
In most modern clients, Apple Mail, Gmail's web and app views, Thunderbird, yes, and it dodges the "images blocked" placeholder that hosted images trigger. Some versions of Outlook on Windows are the notable exception and may not render inlined images, so test before sending a campaign that depends on it.
Is my image uploaded anywhere?
No. The file is read and encoded entirely on your device with the browser's FileReader API. Nothing is sent over the network, which makes this safe for screenshots, private logos or anything you'd rather not hand to a third-party server.