Image to Base64 Converter

How Image to Base64 Conversion Works

An image file is a sequence of bytes. Base64 rewrites those bytes using only 64 printable characters — A–Z, a–z, 0–9, + and / — so the image can travel through places that only accept text: an HTML attribute, a CSS file, a JSON payload, an email body. Every three bytes (24 bits) are split into four groups of six bits, and each six-bit group picks one character from the alphabet. If the input length is not a multiple of three, the output is padded with one or two = signs.

The classic example is the three ASCII bytes of Man, which encode to TWFu. Two bytes, Ma, become TWE=, and a single M becomes TQ==. An image works exactly the same way, just with thousands of bytes instead of three. The first eight bytes of every PNG file are 89 50 4E 47 0D 0A 1A 0A, which is why every Base64-encoded PNG starts with iVBORw0KGgo.

This image to Base64 converter reads your file with the browser's File API, encodes the bytes locally, and identifies the format from those first bytes rather than trusting the file extension. A screenshot renamed to .jpg is still reported as image/png, because that is what the bytes say. The result is offered as a raw Base64 string and as ready-to-paste snippets. If you need to encode arbitrary text or non-image files, use the general Base64 encoder and decoder instead.

Data URI Generator: Anatomy of a data: URL

A Base64 string on its own is not something a browser can display. To use it as an image source it has to be wrapped in a data URI, defined in RFC 2397. The tool's default output is exactly that, so it doubles as a data URI generator:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=

That string is a complete 1×1 transparent PNG, 68 bytes once decoded. Click Try a sample above to decode it. Each part has a job:

Data URIs work anywhere a URL does inside a page: <img src>, CSS url(), <link rel="icon">, a <video poster>, or a canvas drawImage() source.

Using a Base64 Image in HTML, CSS and Markdown

The output tabs produce the four forms you are most likely to paste somewhere. In HTML the data URI goes straight into the src attribute:

<img src="data:image/png;base64,iVBORw0KGgo…" alt="Company logo" width="32" height="32">

In CSS it goes inside url(), quoted. This is the most common use: small icons, background patterns and loading spinners that would otherwise each cost a separate request.

.icon-search {
  background-image: url("data:image/png;base64,iVBORw0KGgo…");
  background-size: 16px 16px;
}

In Markdown the image syntax accepts a data URI as the target, so ![](data:image/png;base64,…) embeds the picture in a single self-contained file. Support varies by renderer: many sanitise or strip data: URLs for security, so test in the place the Markdown will actually be displayed. If you are converting a whole page that already contains inline images, the HTML to Markdown converter carries <img> tags across as Markdown image links.

Always set alt, width and height on an inline image the same as you would on a file — a data URI changes where the bytes come from, not the accessibility or layout rules.

Base64 to Image: Decoding and Previewing

The right-hand panel works in the other direction: paste Base64 and it renders the image, reports its real format and pixel size, and lets you download it as a file with the correct extension. You do not need to clean the input first. The decoder accepts:

• a full data URI, such as data:image/webp;base64,UklGR…;
• bare Base64 with no prefix — the format is detected from the decoded bytes;
• a whole CSS declaration like background: url("data:…") or an <img src="data:…"> tag copied from page source;
• URL-safe Base64 (- and _ instead of + and /), missing = padding, and line breaks from tools that wrap output at 76 characters;
• non-Base64 data URIs such as data:image/svg+xml,%3Csvg….

When the decoded bytes are not an image, the tool says what they look like instead of showing a broken picture: JVBERi0x decodes to %PDF-1, the start of a PDF, and the error message says so. If the data URI's label disagrees with the bytes — data:image/jpeg wrapped around a PNG, for example — the image is still shown and the mismatch is flagged so you can fix the label at the source.

Image File Signatures (Magic Bytes) Reference

Format detection in both directions uses the file signature, the fixed bytes every format begins with. This table is also handy for recognising a format from the first few characters of its Base64:

HEIC and TIFF encode correctly, but most browsers will not display them in an <img> tag, so the tool warns you. Convert those to JPEG, PNG or WebP before inlining them on a web page.

When to Inline Images as Base64 — and When Not To

Base64 costs space: four characters for every three bytes, so the encoded form is about 33% larger than the original file. The stats panel shows the exact figure for your image. The numbers below are what the converter reports for files of each size:

Size is only part of the trade-off. An inline image is downloaded again with every copy of the HTML or CSS that contains it, it cannot be cached separately, it cannot be lazy-loaded, and a large data URI in a stylesheet delays rendering because the browser must download the whole CSS file before painting. With HTTP/2 and HTTP/3, an extra small request is cheap, which removes the main reason inlining was popular.

Inline when the image is tiny (a few kilobytes), used on one page, and needed immediately: icons in critical CSS, a favicon in a single-file HTML report, images inside an HTML email template or a self-contained export. Use a normal file when the image is large, shared across pages, or below the fold. The tool flags anything over 10 KB as a candidate for a regular file.

SVG: Use URL Encoding Instead of Base64

SVG is already text, so Base64 only makes it bigger and unreadable. A URL-encoded data URI escapes just the characters that would break the URL and leaves the rest of the markup intact. When you load an SVG, the tool adds an SVG, URL-encoded tab with this version. For this 133-byte icon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 2 22h20L12 2Zm0 6 6.5 12h-13L12 8Z" fill="#6366f1"/></svg>

the Base64 data URI is 206 characters, while the URL-encoded one is 182 and still legible:

data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 2 2 22h20L12 2Zm0 6 6.5 12h-13L12 8Z%22 fill=%22%236366f1%22/%3E%3C/svg%3E

The encoder escapes %, #, ", <, >, tabs and line breaks, a few URL-unsafe symbols, and any non-ASCII character. It does not rewrite your markup — no quote swapping or whitespace stripping — so the result decodes back to your original file byte for byte. Use it inside double-quoted url("…") or src="…". The # must always be escaped as %23: left raw, it starts a URL fragment and cuts the SVG short, which is why hex colours like #6366f1 are the most common cause of a blank SVG background.

Common Base64 Image Mistakes

• Line breaks inside the data URI. Command-line tools on Linux wrap Base64 at 76 characters. Pasted into CSS, the newlines break the URL. Encode with base64 -w 0, or paste the wrapped output into the decoder here and re-copy a clean version.
• image/jpg instead of image/jpeg. The registered type is image/jpeg. The decoder flags image/jpg so it gets fixed.
• Forgetting ;base64. Without the flag, data:image/png,iVBOR… tells the browser the payload is percent-encoded text, and the image fails to load.
• Missing the MIME type. By the specification, data:;base64,… is text/plain. Chrome sniffs the bytes and shows it in an <img> anyway, but anything that trusts the declared type — a download, an email client, an API — sees plain text. Always include the image type.
• Using a data URI for a social share image. Link-preview crawlers only fetch http(s) URLs, so a data URI in og:image gives a card with no picture. Host the file and check it with the Open Graph generator.
• Inlining large photos. A 200 KB hero image becomes roughly 270 KB of text inside your HTML or CSS, downloaded on every visit. Serve it as a file with loading="lazy" where appropriate.
• Assuming the extension is the format. Renamed files are common. A data URI with the wrong label may still display in browsers that sniff images, but other consumers — email clients, PDF generators, APIs — may reject it.

How to Convert an Image to Base64 in Code

JavaScript in the browser, from an <input type="file"> — FileReader.readAsDataURL returns the full data URI:

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

Node.js, from a file on disk, and back again:

import { readFileSync, writeFileSync } from 'node:fs';
const b64 = readFileSync('logo.png').toString('base64');
const uri = `data:image/png;base64,${b64}`;
writeFileSync('copy.png', Buffer.from(b64, 'base64'));

Python:

import base64
with open("logo.png", "rb") as f:
    b64 = base64.b64encode(f.read()).decode("ascii")
uri = f"data:image/png;base64,{b64}"
with open("copy.png", "wb") as f:
    f.write(base64.b64decode(b64))

Command line: on Linux, base64 -w 0 logo.png prints one unwrapped line and base64 -d decodes. On macOS, base64 -i logo.png prints a single line by default and base64 -D -i in.txt -o out.png decodes. Add the data:image/png;base64, prefix yourself when you need a data URI.

Base64 in code also shows up in the security tools on this site: a JSON Web Key Set publishes RSA moduli as Base64url, which the JWKS decoder unpacks, and Subresource Integrity checksums are SHA-256 or SHA-384 digests written in Base64 rather than the hex that the hash generator shows.

Frequently Asked Questions