June 13, 2026

How to Convert an Image or File to a Base64 Data URL

You want a small icon to live inside your CSS so it loads with the stylesheet and not as a separate request. Or you need to drop a logo into an HTML email where external images get blocked. The tool for both is a Base64 data URL— the file's bytes encoded as text and embedded right in the markup.

Here is how to generate one from any file.

How to convert a file to a Base64 data URL

QuickWand's free Base64 Encode / Decode tool reads your file with the browser's FileReaderAPI and encodes it locally — the file is never uploaded anywhere.

Open the Base64 tool and switch to the file / data-URL mode.
Drop in your image or file. The tool reads the bytes and produces a full data URL — complete with the data:image/png;base64,prefix — not just the raw Base64.
Copy the data URL and paste it where you need it: a CSS background-image: url(…), an HTML <img src="…">, or a JSON field.

Anatomy of a data URL

A data URL has three parts:

The scheme and MIME type — data:image/png tells the browser what kind of file the bytes represent.
The encoding marker — the literal ;base64, says the data that follows is Base64-encoded.
The payload— the file's bytes as Base64 text, e.g. iVBORw0KGgoAAAANSUhEUg….

Put together you get something like data:image/png;base64,iVBORw0KGgo…, which a browser treats exactly like a link to a real PNG file.

The size trade-off — and when to use it

Base64 represents 3 bytes of binary data using 4 ASCII characters, so the encoded string is about 33% larger than the original file. That is the cost of inlining. You save a network request, but you ship more bytes, and the data URL cannot be cached separately the way a standalone file can.

That makes data URLs a good fit for:

Small icons or sprites referenced from CSS.
Images in HTML emails, where many clients block externally hosted images by default.
Tiny placeholder or blur-up images while a real asset loads.

And a poor fit for large photos, anything that changes frequently, or assets you want the browser to cache — for those, a plain file URL wins.

Base64 is encoding, not compression or encryption

One thing to keep straight: Base64 does not shrink or protect your file. It is a way to represent binary data as text so it can travel through text-only channels. Anyone can decode it back to the original bytes in an instant — which is exactly what our guide on decoding Base64 (and why it is not encryption) covers in detail.

Frequently asked questions

What is a Base64 data URL?

A data URL embeds a file's bytes directly inside a URL string, so the file travels inline instead of as a separate request. It looks like data:image/png;base64,iVBORw0KGgo… — the MIME type, the literal 'base64', then the Base64-encoded bytes. Browsers, CSS, and HTML can use it anywhere a normal URL would go.

Does Base64 make my file bigger?

Yes. Base64 encodes 3 bytes into 4 ASCII characters, so the encoded text is roughly 33% larger than the original file. That's the trade-off for inlining: you save an HTTP request but send more bytes. Use it for small assets like icons, not large photos.

Is it safe to convert a file to Base64 online?

With QuickWand it is. The file is read and encoded entirely in your browser using the FileReader API — nothing is uploaded. Your file never leaves your device, which matters if it's a private logo, document, or asset.

When should I use a Base64 data URL instead of a normal file?

Use it for small, rarely-changing assets — an icon in CSS, a tiny logo in an email template, or a placeholder image — where avoiding an extra request is worth the ~33% size increase. For large images, anything cached, or anything that changes often, a normal file URL is better.