Image to Base64
Drop or choose a PNG, JPG, GIF, WebP, or SVG and get its Base64 string and a ready-to-use data URI, plus copy-paste snippets for CSS, HTML, and Markdown. The image is read entirely in your browser and never uploaded, so even private screenshots and logos stay on your device. You also see the original file size next to the encoded size, so the tradeoff is clear before you inline anything.
Drop an image here
or choose a file · or paste with Ctrl+V (Cmd+V)
🔒 Read in your browser with FileReader. Never uploaded.
What is the Image to Base64 encoder?
This is a free, browser-based tool that turns an image into a Base64 data URI. Drop in or
choose a PNG, JPG, GIF, WebP, or SVG and it instantly produces the raw Base64 string, a
complete data: URI you can paste anywhere, and ready-made snippets for CSS,
HTML, and Markdown. It also reports the original file size next to the encoded size so you
know exactly how much weight inlining adds. Everything runs on your device: the picture is
read with the FileReader API and is never uploaded, stored, or logged.
How to use it
- Add your image — click to choose a file, drag and drop it onto the drop zone, or paste with Ctrl+V (Cmd+V on Mac).
- The encoded results appear immediately: data URI, raw Base64, and CSS, HTML, and Markdown snippets.
- Click Copy beside whichever output you need.
- Paste it into your stylesheet, template, or document. Answer in, answer out, done.
What a data URI actually is
A data URI packs a whole file into a single text string that looks like
data:image/png;base64,iVBORw0KGgo.... The data: scheme tells the
browser the bytes are right there inline instead of at a separate URL; image/png
is the MIME type so the browser knows how to decode it; and the long tail is the file's
bytes re-expressed as Base64. Base64 maps every 3 bytes onto 4 printable ASCII characters
(A–Z, a–z, 0–9, plus + and /), which is why a data URI is safe to
drop into HTML, CSS, JSON, or an email — it contains no raw binary that text channels would
mangle. This tool keeps the original MIME type intact, so transparency and the exact format
are preserved.
When to inline images — and the size tradeoff
Inlining removes a network request: the image arrives as part of the HTML or CSS that referenced it, so there is no second round trip and no flash of a missing icon. The cost is size. Base64 inflates the data by roughly 33% (4 characters for every 3 bytes), and inlined bytes cannot be cached separately or reused across pages — they ride along every time the host file loads. The rule of thumb: inline small assets (icons, a tiny logo, a CSS background, an SVG, an email signature image) where saving a request matters; keep larger photos as ordinary files so the browser can cache them and your markup stays lean. The size readout above makes that call easy.
CSS vs HTML vs Markdown
- CSS:
background-image: url("data:...")embeds the image as a background — perfect for icons and decorative backgrounds in a stylesheet with zero extra requests. - HTML:
<img src="data:...">drops the image straight into the page or an HTML email, handy when you cannot rely on external file hosting. - Markdown:
inlines the image into a README, note, or doc so it stays self-contained even when moved between repos or tools.
Privacy by design
Many online encoders upload your file to their server first. This one does not. The image is read locally with FileReader and converted in JavaScript on your device, so it never leaves your browser. That means you can safely encode private screenshots, internal logos, signed documents, or client mockups without sending them to a third party. Close the tab and nothing remains.
It is part of a small toolkit. For text instead of images, use the Base64 Encode / Decode tool; to pull a color out of a picture, try the Image Color Picker; and to make text safe for links and query strings, reach for URL Encode / Decode.
Frequently asked questions
What is a Base64 data URI for an image?
A data URI packs the whole image into a single text string of the form data:image/png;base64,AAAA... The data scheme tells the browser the bytes follow inline, image/png is the MIME type, and the long Base64 tail is the file's bytes re-encoded as 64 printable ASCII characters. You can drop that one string straight into a src attribute or a CSS url() and the image renders with no separate file.
Is my image uploaded to a server?
No. The file is read entirely inside your browser with the FileReader API and converted to Base64 locally. Your image is never sent over the network, never stored, and gone the moment you close the tab, which makes it safe for private screenshots, logos, and mockups.
Which image formats can I encode?
Any raster or vector image your browser can read: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, and ICO all work. The original MIME type is preserved in the data URI, so the embedded image keeps its exact format and transparency.
Why is the Base64 version larger than my file?
Base64 encodes every 3 bytes as 4 ASCII characters, so the encoded text is about 33 percent bigger than the original file before transfer compression. The tool shows both sizes so you can see the tradeoff. Inlining saves a network request but inflates your HTML or CSS, so it is best for small images.
When should I inline an image as Base64 instead of linking it?
Inline tiny assets such as icons, a small logo, a CSS background, an email signature image, or an SVG, where avoiding an extra HTTP request matters and the file is only a few kilobytes. For larger photos, keep them as separate files so the browser can cache them and so your markup stays small.