Base64 Image Decoder | Decode & Preview Images Online

What is a base64 image decoder?

A base64 image decoder is a tool that turns a base64-encoded text string back into a picture. Base64 is a way of writing binary data, such as the bytes of an image file, using only 64 plain text characters (letters, digits, +, /, and = for padding). Browsers, emails, and many APIs store images this way so a picture can travel inside plain text instead of as a separate file. The decoder reverses that process: paste the string in, and the original image appears.

The data URL format

On the web, a base64 image is usually written as a data URL. The pattern is:

For example:

Each part has a job:

• data: marks it as a data URL, not a normal web address.
• image/png is the MIME type, which tells the browser what kind of file this is.
• ;base64 says the data after the comma is base64-encoded.
• Everything after the comma is the encoded image itself.

How the decoder works

Decoding happens in four steps.

1. The tool checks whether the string starts with data:. A data URL that names a media type other than an image, such as data:text/plain, is rejected straight away, because it can never be shown as a picture.
2. It strips out any spaces, tabs, or line breaks, since long base64 strings are sometimes wrapped across multiple lines. A payload that uses percent-encoding instead of base64, which RFC 2397 also allows, is passed through unchanged.
3. It decodes the base64 text back into raw bytes.
4. It looks at the first few bytes of the result. Every common image format starts with a fixed sequence of bytes, called a signature or "magic number." PNG files start with 89 50 4E 47, JPEG files start with FF D8 FF, and so on. The decoder matches these signatures and labels the image with the type they identify.

The bytes win over the label. If a data URL says data:image/png but the bytes begin FF D8 FF, the decoder rebuilds the URL as data:image/jpeg, so the string offered by the "Copy Image URL" button never misdescribes its own contents.

If the string has no data: prefix, the decoder treats it as raw base64 data, decodes it, and reads the signature the same way. If the bytes do not match any known image signature, and do not look like SVG text, the decoder reports that the string does not appear to be an image. It does not guess a format or fall back to any default type.

SVG is handled differently because SVG is a text format (XML), not binary, so it has no fixed byte signature. The decoder checks the first 1024 bytes of the decoded text for an <svg tag, an XML declaration such as <?xml version="1.0"?> followed by one, or an SVG document type declaration followed by one. A byte order mark at the very start, which some editors add to UTF-8 files, is ignored. Because SVG cannot be identified from a byte signature, a data URL that declares image/svg+xml keeps the type it declares.

Base64 image size formula

Base64 turns every 3 bytes of binary data into 4 text characters. The formula for the encoded length is:

The ⌈ ⌉ symbols mean "round up to the next whole number," because base64 always works in groups of 4 characters and pads a leftover group with = signs.

For large files this works out to roughly a 33% increase in size, since 4 ÷ 3 ≈ 1.33. Small files can show a bigger percentage increase, because rounding up to the next group of 4 characters matters more when there is not much data to begin with.

Worked example

The PNG example above decodes to 85 bytes of image data. Using the formula:

The base64 string is indeed 116 characters long, which matches. That is a 36% increase over the original 85 bytes (116 ÷ 85 ≈ 1.36), a bit above the 33% figure because the file is so small.

Supported image formats

The decoder reads the byte signature of the decoded data to identify the format. It recognizes these types:

How to decode a base64 image

1. Copy the base64 string, with or without its data:image/... prefix, from HTML, CSS, an API response, or an email.
2. Paste it into the input box.
3. The image decodes automatically a moment after typing stops, or by pressing the decode button.
4. The decoded image appears in the preview area. Its data URL can be copied with the "Copy Image URL" button, and the image itself can be saved by right-clicking it in the preview and choosing to save the image, since it renders as a normal image element in the browser.

Common uses for base64 images

• Embedding in HTML, CSS, or JavaScript: putting the image data directly in the code avoids a separate file request.
• Email templates: some email clients block externally linked images by default, but an embedded base64 image still shows up.
• Single-file HTML tools: a whole page, including its images, can ship as one self-contained file.
• API responses: an image can travel inside a JSON payload instead of needing its own endpoint.
• CSS backgrounds and icons: small icons are sometimes written straight into a stylesheet as a data URL.

Trade-offs of base64 images

Base64 encoding is convenient but not free:

• The encoded text is roughly a third larger than the original file.
• Browsers cannot cache an embedded image the way they cache a linked file, so it downloads again every time the surrounding page or stylesheet does.
• The browser has to decode the base64 text before it can display the image, which takes a small amount of extra processing.
• Because of the size increase and lost caching, base64 embedding suits small images such as icons and simple logos. Larger photos are usually better served as ordinary image files.

Frequently asked questions

What is a base64 image decoder?

It is a tool that converts a base64-encoded text string back into a viewable image, such as a PNG, JPEG, GIF, WebP, BMP, or SVG file.

How do I decode a base64 image?

Paste the base64 string, with or without a data:image/... prefix, into the decoder. It will read the string, decode it, and show the resulting image.

Can a base64 string be decoded without the data URL prefix?

Yes. The decoder treats it as raw base64 data, decodes the bytes, and reads the first few bytes to identify the format from its signature, such as PNG, JPEG, GIF, WebP, BMP, or ICO. SVG is identified by looking for an <svg tag in the decoded text. If none of these match, the decoder reports that the string does not appear to be an image instead of guessing a format.

Why won't my base64 image decode?

Three causes cover most cases. The string may contain characters outside the standard base64 alphabet, which is A–Z, a–z, 0–9, +, / and =; the base64url variant used in some web tokens writes - and _ instead, and is not accepted. The string may have been cut off partway, leaving a length that is one more than a multiple of four, which no valid base64 string ever has. Or the bytes may simply not be one of the supported image formats. Missing = padding on its own is not a problem, and spaces or line breaks are removed before decoding.

Is base64 encoding a form of security or encryption?

No. Base64 is only a way of representing bytes as text; it hides nothing. Anyone can decode a base64 string in seconds with a free tool, so it should never be used to protect private images or other data.

How much bigger is a base64 string than the original image?

About a third bigger for larger files, since every 3 bytes of the original data becomes 4 characters of text. A 100 KB image becomes roughly 133 KB once encoded. Small images can show a somewhat higher percentage increase because of rounding.

History

Base64 grew out of encoding schemes built in the 1970s and 1980s to send binary data through mail systems that only handled plain text, formalized for email in RFC 989 (1987) and later RFC 1421. Its use for embedding images in web pages became possible once the data: URL scheme was defined in RFC 2397 (1998), and it became more common in the mid-2000s as developers looked for ways to cut down on separate HTTP requests, especially on slow mobile connections.

References

1. RFC 4648: The Base16, Base32, and Base64 Data Encodings
2. RFC 2397: The "data" URL scheme
3. MDN Web Docs: data URLs
4. WHATWG MIME Sniffing Standard