Image to Base64

What inlining an image does

Base64 turns the bytes of an image into text that can sit inside another text file: an HTML page, a stylesheet, a JSON body, an email, a Markdown file. The result is a data URI, data:image/png;base64,…, which a browser treats like a URL that already contains the file. No second request, no path to break, no separate asset to deploy. The cost is size and cacheability, which is why it suits icons and small graphics, not photographs.

This tool reads the file in your browser, works out what it is from its first bytes, and gives you the four forms you might paste: the raw Base64 for a database column or API field, the data URI for an src or a url(), a ready <img> tag with width and height filled in so the page does not jump while it loads, and a CSS background-image declaration. It does not compress, resize or convert the image. If the file is too large to inline sensibly, that is the moment to shrink it in an image editor first, not after encoding.

Example

Load sample encodes a 157 B, 32 × 32 pixel PNG (a blue square with a white dot). The status line reports:

PNG · 32 × 32 px · 157 B → 212 characters (+35%)

The Data URI box contains:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZElEQVR42mNgQAOqya//0xIz4AK0thivQ+htOYYjBtQBA2U53BGjDhiSDsAFaO4AYgFNHEAqoKoDyAXDwwGUglEHjDpg6DtgtBwYFEXxoKiMBkV1PNoiGp4OGO0ZDYrO6UB2zwEFpbp3WQ7rpgAAAABJRU5ErkJggg==

and the HTML <img> box:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZElEQVR42mNgQAOqya//0xIz4AK0thivQ+htOYYjBtQBA2U53BGjDhiSDsAFaO4AYgFNHEAqoKoDyAXDwwGUglEHjDpg6DtgtBwYFEXxoKiMBkV1PNoiGp4OGO0ZDYrO6UB2zwEFpbp3WQ7rpgAAAABJRU5ErkJggg==" alt="" width="32" height="32">

The Raw Base64 box is the same string without the data:image/png;base64, prefix, and the CSS box wraps the data URI in background-image: url("…");.

Options explained

• Choose image opens the file picker; clicking or pressing Enter on the drop box does the same. Dropping a file on the box or pasting an image from the clipboard also works. Only the first file is used if several are dropped.
• Load sample encodes the built-in 157 B PNG shown in the Example, so you can see the four outputs without finding a file.
• Clear empties the preview and all four boxes.
• Copy (one per box) puts that box's text on the clipboard: Data URI, Raw Base64, HTML <img> or CSS background-image.
• Check it in Base64 to Image → hands the data URI to the decoder, which shows it as an image again with the detected type and size, a round-trip check before you paste it somewhere hard to debug.

Edge cases and common errors

• The file name is ignored; the bytes decide. A JPEG saved as logo.png is encoded as data:image/jpeg;base64,…, because a wrong MIME type is the usual reason a data URI renders as a broken image.
• Not an image. A PDF reports “This file is a PDF, so a browser would not display it”; a text file reports “This file is not a PNG, JPEG, GIF, WebP, SVG, BMP, ICO or AVIF image, so a browser would not display it”; an empty file reports “The file is empty”. Nothing is encoded in those cases. For a non-image file you actually want as Base64, use a command-line base64 as in the code section.
• Over 10 MB is refused with the size shown. A data URI that large is not usable in a page, and holding four copies of it in the boxes is what makes tabs freeze.
• Base64 is not URL-safe. The output uses +, / and =, which is what a data URI requires; the URL-safe alphabet (- and _) breaks inside src. If the string has to travel in a query parameter, URL-encode it there instead.
• Size and padding. Encoded length is ⌈bytes ÷ 3⌉ × 4: the sample's 157 bytes become 212 characters, 35% more rather than the nominal 33%, because the last group is rounded up to a full four characters with = padding. The rounding matters less as files get bigger.
• SVG. An SVG is encoded as Base64 with image/svg+xml like any other file. Percent-encoding the SVG text instead (data:image/svg+xml,%3Csvg…) is often shorter and stays readable; both forms decode in Base64 to Image. When the SVG declares no width/height or viewBox, the <img> tag is emitted without size attributes.
• Previews your browser cannot show. AVIF on an older browser, or ICO in some, shows no thumbnail; the tool says so and the Base64 is still the file's bytes, unchanged.
• Where data URIs do not work. A Content-Security-Policy without img-src data: blocks them, and many email clients do not display them at all. Base64 in an HTTP Authorization: Basic header or a JWT is a different job: use Base64 Encode / Decode for text.

Do the same thing in code

JavaScript

// Browser: from a File or Blob
const dataUri = await new Promise((resolve) => {
  const r = new FileReader();
  r.onload = () => resolve(r.result);
  r.readAsDataURL(file);
});

// Node.js
import { readFile } from "node:fs/promises";
const base64 = (await readFile("logo.png")).toString("base64");
const uri = `data:image/png;base64,${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}"

Shell

base64 -w0 logo.png            # Linux (GNU coreutils): one line, no wrapping
base64 -i logo.png             # macOS
[Convert]::ToBase64String([IO.File]::ReadAllBytes("logo.png"))   # PowerShell

The shell versions print raw Base64; add the data:image/png;base64, prefix yourself, using the real type of the file. To check any result, paste it into Base64 to Image. If the icon is going into a stylesheet next to a colour that has to match, the color converter gives the HEX, RGB and HSL forms of it.