Image to Base64 / Data URL
Convert an image to a Base64 data URL and back. Drop an image to get the data URI, or paste a data URL/Base64 to preview and download it. Runs fully in your browser.
About this image to Base64 converter
Turn an image into a Base64 data URL so you can paste it straight into HTML or CSS, or go the other way — paste a data URL (or a bare Base64 string) to preview and download the image. Drag a file in or click to choose; nothing leaves your browser.
How it works
Encoding uses the browser’s FileReader.readAsDataURL, which returns a
data:<mime>;base64,<payload> string. Decoding parses that string (or sniffs the
image type from the Base64 magic bytes when there’s no prefix) and feeds it to an
<img> so you can see and save the result. You get one-click copies for the full
data URL, the Base64 payload only, an <img> tag, and a CSS background-image.
When to use a data URL
Data URLs shine for small, inlined assets — UI icons, a 1×1 spacer, a tiny SVG — where avoiding an extra request matters more than file size. Because Base64 adds roughly a third to the byte count and can’t be cached on its own, keep larger images as normal files. For shrinking photos first, see the image compressor.
FAQ
Are my images uploaded anywhere?
No. The conversion runs entirely in your browser using the FileReader and Canvas APIs — nothing is sent to a server, so even private images stay on your machine.
When should I inline an image as a data URL?
Inlining suits tiny, frequently used assets (icons, 1px textures, small SVGs) because it saves an HTTP request. Note that Base64 makes the data about 33 percent larger, so avoid it for big images or anything you want cached separately.
Can it decode a plain Base64 string without the data prefix?
Yes. Paste either a full data URL or just the Base64 payload — the tool detects the image type from the data and rebuilds a usable data URL you can preview and download.