Z

Image to Base64

Convert an image to a Base64 data URL in your browser — handy for embedding in CSS or HTML.

Runs in your browser — files never leave your device

How it works

A Base64 data URL is an image expressed as plain text: the file’s bytes are translated into a safe 64-character alphabet and wrapped in a prefix such as data:image/png;base64, that tells the browser what follows. Because the whole image is now a string, it can be pasted anywhere text is allowed — an img tag’s src, a CSS url(…) value, an inline SVG, a JSON payload — with no separate file to host and no extra HTTP request to make.

The tool uses the browser’s built-in FileReader API to read your file and encode it byte for byte. Nothing is decoded, resized or recompressed: decoding the Base64 yields the identical file, so quality is untouched and the format stays whatever it was. That fidelity cuts both ways — any EXIF metadata inside a photo is carried along into the string, so strip it first if the image is personal.

The trade-off is size. Base64 turns every 3 bytes into 4 characters, so the text is exactly a third larger than the file: a typical 45 KB logo becomes 60 KB of Base64. That’s irrelevant for a 2 KB icon and painful for a 3 MB photo, which is why the practical rule is to inline images of a few kilobytes and host anything bigger as a normal file the browser can cache and fetch in parallel.

Where data URLs earn their keep — and where they backfire:

  • Good: icons and logos in single-file HTML documents or offline pages, placeholder images in JSON fixtures and tests, quick prototypes with no asset pipeline.
  • Bad: large photos — the string bloats your markup or stylesheet, re-downloads with every page that inlines it instead of being cached once, and can’t be lazy-loaded.
  • Note: some contexts restrict data URLs (strict Content-Security-Policy rules, certain email clients), so test where you plan to use it.

Everything happens in your browser’s memory. The image is never uploaded, and the generated string goes nowhere until you paste it somewhere yourself.

Frequently asked questions

What exactly is a Base64 data URL?
It’s your image file’s bytes translated into plain text using a safe 64-character alphabet, wrapped in a URL of the form data:image/png;base64,… so browsers know how to decode it. Because it’s just text, it can live inside an HTML attribute, a CSS rule, a JSON payload or a source file — no separate image file and no extra HTTP request.
How much bigger does Base64 make my image?
Exactly one third bigger: every 3 bytes of the file become 4 characters of text. A 45 KB icon becomes 60 KB of Base64, plus a short prefix like data:image/png;base64, (22 characters). The image itself is unchanged — only its text representation is larger.
When should I inline an image instead of hosting it?
Inline when the image is small — a few kilobytes — and tightly coupled to the code that uses it: icons, logos in a single-file HTML document, placeholder graphics, images inside JSON fixtures. Host it as a normal file when it’s large or reused across pages, so the browser can cache it once and download it in parallel with the rest of the page.
Does converting change the image quality?
No. The tool encodes the original file byte for byte — nothing is decoded, resized or recompressed, and decoding the Base64 gives back the identical file. That also means any EXIF metadata inside the file is preserved; run a personal photo through the EXIF remover first if that matters.
Why is inlining large photos a bad idea?
The 33% size penalty is only part of it. An inlined image can’t be cached separately, so it re-downloads with every page that contains it; it bloats the HTML or CSS it sits in and delays parsing; and it can’t be lazy-loaded like a normal image. Past a few kilobytes, a hosted file is faster in practice.
Which image formats can I convert?
Any image file — the tool doesn’t decode pixels, it encodes the file as-is, so JPG, PNG, GIF, WebP, SVG and AVIF all work. The MIME type in the data: prefix is taken from the file, which is what tells the browser how to interpret it.
Is my image uploaded to a server?
No. The file is read with your browser’s built-in FileReader API and encoded in memory on your device. The resulting string exists only on this page and, once you copy it, on your clipboard — nothing is transmitted, stored or logged anywhere.

Related tools