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 data: URL scheme was defined in 1998. 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. It is optional. Without it, the data is plain or percent-encoded text.
• 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:. If it does, it reads the MIME type from that prefix.
2. It strips out any spaces, tabs, or line breaks, since long base64 strings are sometimes wrapped across multiple lines. This follows the forgiving-base64 decode rule used by browsers, whose first step is to remove all whitespace.
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 uses the image signature table from the WHATWG MIME Sniffing Standard. It matches these signatures to confirm, and if needed correct, the image type.

A data: URL whose type is not image/... is rejected as not an image. A data:image/... URL without ;base64 is passed to the browser unchanged.

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 instead checks whether the decoded text starts with an <svg tag, or with an XML declaration that contains one.

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 third larger than the original, 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 works best for small images, such as icons or 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?

The most common causes are a string that got cut off partway through, or extra characters that are not part of the base64 alphabet. The URL-safe variant, which uses - and _ in place of + and /, is also rejected. Missing = padding at the end is usually not a problem. Copying the entire string, including its data:image/... prefix if present, usually fixes it.

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 came from email, which once carried only plain text. A 1987 privacy-enhanced mail specification described turning every 3 bytes into 4 printable characters from a 64-character set. The data: URL scheme of 1998 later made it possible to embed base64 images directly in web pages. The current definition of base64 is RFC 4648 (2006).

References

1. IETF. RFC 4648: The Base16, Base32, and Base64 Data Encodings. RFC 4648 — 3 bytes become 4 characters; = padding.
2. IETF. RFC 2397: The "data" URL scheme. RFC 2397 — data URL syntax; ;base64 is optional; published 1998.
3. WHATWG. Infra Standard. Forgiving-base64 decode — whitespace removal; padding handling.
4. WHATWG. MIME Sniffing Standard. Matching an image type pattern — image byte signatures.
5. MDN Web Docs. Base64. Base64 glossary entry — encoded output is roughly a third larger.
6. IETF. RFC 989: Privacy Enhancement for Internet Electronic Mail, Part I. RFC 989 — 1987 email encoding of 3 bytes into 4 printable characters.