Image to Base64 converter

A data URI (now officially a data URL) carries the file itself instead of pointing to it. The format comes from RFC 2397:

data:[<media type>][;base64],<data>

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E…

The media type tells the browser how to read the bytes, so it must match the real format. Every Base64 PNG starts with iVBORw0KGgo and every JPEG with /9j/, because those are the file signatures encoded. This tool reads the signature instead of trusting the file name.

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgo…" width="32" height="32" alt="Logo">

/* CSS */
.logo { background-image: url("data:image/png;base64,iVBORw0KGgo…"); }

<!-- Favicon, no extra request -->
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo…">

<!-- Markdown -->
![Logo](data:image/png;base64,iVBORw0KGgo…)

// JSON (APIs that take files as text)
{ "name": "logo.png", "mime": "image/png", "data": "iVBORw0KGgo…" }

Some Markdown renderers and many email clients strip or block data: images, so test where the text will be shown. Browsers also refuse to open a data: URL typed or linked as a top-level page, so use them inside a page, not as a link target.

An inlined image saves one request but costs about a third more bytes, and it can only be cached together with the file it sits in. If the image is big, shrink it first: choose WebP and a max width above and compare the sizes in the stats.

SVG is text, so it does not need Base64 at all. A URL-encoded SVG data URI is usually shorter, and you can still read and edit it. Only a few characters must be escaped: # (it would start a URL fragment, so fill="#f00" must become %23f00), %, and < > for safety. Double quotes are switched to single quotes so the result fits inside url("…").

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f97316'/%3E%3C/svg%3E");

Turn on "URL-encoded SVG" above to get this form. To shrink the SVG itself first, run it through the SVG optimizer; to turn it into a PNG, use SVG to PNG.

Browser JavaScript: FileReader.readAsDataURL() gives the full data URI for a file from an <input type="file">, and a canvas can re-encode an image.

const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/png;base64,…"
reader.readAsDataURL(input.files[0]);

canvas.toDataURL('image/webp', 0.8);              // a canvas as a WebP data URI

Node.js

import { readFileSync, writeFileSync } from 'node:fs';
const uri = 'data:image/png;base64,' + readFileSync('logo.png').toString('base64');
writeFileSync('out.png', Buffer.from(b64, 'base64'));          // Base64 → image

Python

import base64
with open('logo.png', 'rb') as f:
    uri = 'data:image/png;base64,' + base64.b64encode(f.read()).decode()

with open('out.png', 'wb') as f:                               # Base64 → image
    f.write(base64.b64decode(b64))

Terminal

base64 -w 0 logo.png            # GNU/Linux, one line
base64 -i logo.png              # macOS
base64 -d logo.b64 > logo.png   # Base64 → image

For text and files of any other type, use the Base64 decoder and encoder. To change an image's format without Base64, try the image converter. More on DevHunt: image tools and design tools.