Image to Base64 — and Back

Base64 is one of those quietly essential pieces of plumbing on the web. If you have ever opened a CSS file and seen a background image written out as a giant string of letters and numbers, or copied an image straight into an email template, you have already met it. This guide explains what Base64 and data URIs actually are, when it makes sense to turn an image into Base64, and how to convert in both directions — encoding a file into a string and decoding a string back into a file.

What Base64 actually is

Computers store images as raw binary — a long sequence of bytes. That works perfectly when a file travels as a file, but many places on the web only safely carry plain text: the body of a CSS rule, a JSON field, an HTML attribute, the headers of an email. Dropping raw binary into those contexts breaks things, because some byte values have special meaning or simply cannot be represented.

Base64 solves this by re-writing binary using a restricted alphabet of 64 safe characters — the letters A–Z and a–z, the digits 0–9, and the symbols + and /, with = used for padding. Every three bytes of the original become four of these text characters. The result is a string you can paste anywhere text is allowed, and that can be reversed exactly back into the original bytes. Nothing is lost and nothing is compressed: Base64 is a representation, not a transformation of the image itself.

What a data URI adds

A bare Base64 string is just the encoded body. A data URI wraps it so a browser knows what it is and can use it directly. The format is:

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

For a PNG that looks like data:image/png;base64,iVBORw0KGgo…. The data: scheme tells the browser “the content is right here in the URL,” image/png is the media type, ;base64 says the body is Base64-encoded, and everything after the comma is the encoded image. You can put that whole string anywhere a URL would normally go — a CSS url(), an <img src>, a favicon link — and the browser renders it without making a separate network request.

When to encode an image as Base64

Inlining an image as a data URI is a trade-off, so it pays to know when it helps.

• Small, frequently-used icons and logos. Inlining a tiny icon into your CSS removes one round-trip to the server. For assets that appear on every page, that saved request can matter.
• HTML emails. Many email clients block linked images by default but will display an inlined one. Embedding a small logo as a data URI makes sure it always shows.
• Single-file deliverables. When you need a self-contained HTML file, a standalone SVG, or a JSON payload that carries its own imagery, Base64 lets the image travel inside the document.
• Avoiding a hosting step. Sometimes you just need the image in the code right now and do not want to upload it somewhere first.

And when to avoid it:

• Large photos. Base64 adds about a third to the byte size, and an inlined image cannot be cached separately by the browser — it is re-downloaded every time the CSS or HTML around it changes. For big images, a normal hosted file is faster.
• Anything reused across many pages at large size. A cached URL beats re-sending the bytes inline each time.

A good rule of thumb: inline assets under a few kilobytes, link everything else.

How to convert an image to Base64

Encoding is the common direction. With the tool above:

1. Open your image. Drag a PNG, JPG, WebP, GIF, or SVG onto the tool, choose a file, or paste from your clipboard.
2. Pick the output you need. Switch between the raw Base64 body, the full data: URI, a CSS background-image rule, or an <img> tag — each is generated for you.
3. Copy or download. Tap Copy to put it on your clipboard, or download the string as a .txt file for later.

Because the tool reads the file’s exact bytes, the data URI is a faithful, lossless copy of your original — encoding a PNG keeps its transparency, and encoding a JPG does not re-compress the photo.

How to convert Base64 back to an image

Going the other way — turning a string back into a file — is just as easy, and useful when you find a data URI in code and need the actual image:

1. Paste your Base64. On the Decode tab, drop in the raw Base64 body or a full data:image/…;base64,… URI. Line breaks, quotes, and url() wrappers are stripped automatically.
2. Decode. The image appears instantly in a preview, with its detected type and size.
3. Download. Save the rebuilt image; the file gets the correct extension automatically.

The decoder is deliberately forgiving — it repairs missing padding and handles URL-safe Base64 — but it also checks that the decoded bytes really are an image, so a truncated copy/paste fails with a clear message instead of saving a broken file.

A note on size and performance

It is worth repeating because it surprises people: a Base64 string is always bigger than the file it came from, by roughly 33%. That overhead is the cost of using only text-safe characters. It does not mean your image got worse — decode it and you get back exactly what you started with. The size only matters for transport: it is why inlining shines for small assets and hurts for large ones.

Privacy and how this tool works

The encoding and decoding both happen in your browser using standard web APIs — your image is turned into text, and text is turned back into an image, on your own device. How any data associated with the tool is handled is described in our privacy policy. There is no account to create and no watermark on anything you produce.

Whether you are inlining an icon to shave a request off a page load, embedding a logo in an email, or pulling an image back out of a data URI you found in someone’s stylesheet, converting between images and Base64 is a small skill that comes up constantly in web work — and the tool above handles both directions in a couple of clicks.