Image to Base64

What a Base64 data URI is

A data URI puts a whole file into a piece of text that works wherever a URL does: in the src of an img tag, in a CSS background, in Markdown or in JSON. Its form is set by RFC 2397: data:[media type][;base64],data. For a PNG that reads data:image/png;base64,iVBORw0KGgo…, with the image type first and the encoded bytes after the comma.

Base64 itself is defined in RFC 4648. It takes the file 3 bytes, or 24 bits, at a time and writes them as 4 characters of 6 bits each, using A to Z, a to z, 0 to 9, + and /. When the file length is not a multiple of 3, one or two = signs pad the end. This image to Base64 converter does exactly that in your browser and builds the code around it, so you can paste the result straight into your page.

How much bigger the image gets

Four characters for every three bytes means the text is a third larger than the file. That is the price of inlining an image: it no longer needs a file of its own, but it makes the HTML or CSS that carries it larger by more than the image itself.

So data URIs suit small images: icons, tiny logos, simple patterns, placeholders. RFC 2397 itself calls the scheme useful for short values only. The tool shows the size of every result and warns when an image turns into more than 100 KB of text.

Smaller SVG data URIs without Base64

An SVG file is already text, so it can go into a data URI without Base64. Only characters that are not safe in a URL need escaping as %XX, the percent sign followed by the byte in hex. MDN spells out the rule: reserved characters as defined in RFC 3986, spaces, line breaks and other non-printing characters must be percent-encoded. This tool escapes these:

• # and %, because # starts the fragment of a URL and % starts an escape. Colors like #f00 become %23f00.
• <, >, the double quote, spaces and line breaks, which are not allowed in a URL.
• &, because in HTML an ampersand starts a character reference, so inside the src attribute it could change the data.
• Every byte outside plain ASCII, such as letters with accents, byte by byte, so the text keeps its encoding.

Double quotes around attribute values are switched to single quotes, which need no escaping, whenever the value has no single quote of its own. Letters, digits and most punctuation stay as they are, so the result is usually shorter than Base64 and still readable. For Markdown, parentheses are escaped too, because the CommonMark rules only allow them in a link when they are escaped or come in balanced pairs. When an SVG has a lot of spaces, Base64 can be the shorter one; Smallest picks whichever is shorter for each file.

The output formats

• Data URI: the complete data:image/…;base64,… text, for any place that takes a URL.
• Base64: only the encoded bytes, for JSON fields and APIs that ask for the image content.
• HTML img: a ready img tag with the file name as alt text and the width and height of the image. As MDN explains, width and height let the browser reserve the space before the image is drawn, which reduces layout shift. Change the alt text to describe the image.
• CSS: a rule with background-image: url("…"), named after the file.
• Markdown: an image link like .

Decode Base64 to an image

Switch to Decode and paste Base64, URL-safe Base64, a data URI, or a whole img tag or CSS rule that contains one. The tool finds the data, checks it and shows the image. The format comes from the first bytes of the file, its magic number, not from the media type in the data URI, which is sometimes wrong:

The signatures come from the PNG specification, the GIF89a specification, the WebP container specification and the AVIF specification. The decoder also checks the end: a PNG must end with its IEND chunk and a GIF with the byte 3B, so a copy that was cut off is caught before you wonder why half the picture is missing. For other files than images, use Base64 encode and decode.

How to convert an image to Base64

1. 1Drop one or more images on the box, or pick them from your files.
2. 2Choose the output: data URI, plain Base64, an HTML img tag, CSS or Markdown. For SVG, keep Smallest or pick an encoding.
3. 3Press Copy on an image, or Copy all for every image at once, and paste the code where you need it.

Before you inline a large photo, shrink it with the image compressor or the image resizer: every kilobyte saved there saves about 1.33 KB of Base64.

Built by Tobias Kurth, designer. Updated October 13, 2026.

Frequently asked questions