Image ↔ Base64 Converter

Overview: Convert Images to Base64 (and Back) in Your Browser

This tool converts images to Base64 text and decodes Base64 back into an image preview entirely in your browser. Nothing is uploaded to a server, which makes it useful for quick experiments, HTML email images, inline icons in CSS, and testing APIs that accept Base64 data.

Use it in two directions:

• Image → Base64: Select an image file and get a Base64 (or full Data URL) string you can paste into HTML, CSS, or JSON.
• Base64 → Image: Paste a Base64 string and see the decoded image preview along with basic details.

How to Use This Image ↔ Base64 Converter

1. Encode an image to Base64 text

1. Click “Select image to encode” and choose a local image file (for example a PNG, JPEG, GIF, or SVG, depending on your browser).
2. Wait briefly while the file is read in your browser.
3. The tool produces a Base64 representation in the “Base64 output” area. This may be either:
   • a plain Base64 string, or
   • a full Data URL starting with data:image/…;base64,, depending on how the tool is configured.
4. Copy the output text and paste it where you need it (HTML, CSS, JSON, or API requests).

The Base64 output can be long. This is normal: encoding increases size by roughly one third compared with the original binary file.

2. Decode a Base64 string to an image

1. Copy a Base64 string from your code, logs, or API response.
2. Paste it into the “Paste Base64 to decode” area.
3. The converter tries to detect whether the string is a full Data URL (for example data:image/png;base64,iVBORw0KGgo...) or just raw Base64 data. If needed, it adds or strips the data: prefix so the browser can display it.
4. If decoding succeeds, the image is rendered in a preview area. If the input is invalid or not an image, the script can show an error message instead of a broken image.

You can then right-click the preview image to save it or inspect it in your browser’s developer tools.

What Is Base64 Encoding?

Images are fundamentally sequences of bytes: pixel data, headers, compression tables, and metadata. Many systems, however, are designed to handle text more reliably than raw binary. Base64 encoding is a standard way (defined in RFC 4648) to convert any binary data, including images, into ASCII text made up of 64 safe characters.

The Base64 alphabet contains:

• Uppercase letters: A–Z
• Lowercase letters: a–z
• Digits: 0–9
• Two symbols: + and /

The result is a string that can safely travel through email, HTML attributes, JSON bodies, and other text-based channels without being corrupted by character encoding or transport issues.

Base64 length formula

Base64 works by grouping bits in blocks of 24. Each block of 24 bits (3 bytes) is turned into 4 numbers of 6 bits. Each 6-bit number is an index into the 64-character alphabet.

If you have n bytes of binary data, the encoded Base64 length L in characters is:

This reflects the fact that each group of 3 bytes becomes 4 Base64 characters. If the total byte count is not a multiple of 3, the encoder pads the final group with one or two = characters so that the final output length is always a multiple of 4.

Example calculation

Suppose your image file is 1 234 bytes. The Base64 length is:

• Divide by 3: 1 234 / 3 ≈ 411.33
• Round up: ⌈411.33⌉ = 412
• Multiply by 4: 412 × 4 = 1 648 characters

So the Base64 text will be 1 648 characters long, not including any surrounding quotes you might add in your code.

How This Converter Works in Your Browser

This tool relies on standard browser APIs so that all work stays on your device:

• FileReader API: When you select an image file, the browser reads it as a Data URL (for example data:image/png;base64,...). The script can then show you just the Base64 part or the entire Data URL.
• Data URLs: A Data URL combines metadata (MIME type and encoding) with the Base64 data in a single string you can use directly in HTML or CSS.
• Image element: For decoding, the tool creates an in-memory and sets its src attribute to the Data URL so the browser renders the image.

Because everything happens in JavaScript on the client side, your image files and Base64 strings are never transmitted to a remote server by this converter.

Using Base64 Data URLs in HTML and CSS

Once you have a Base64 string, you can plug it into a Data URL in a few different places.

HTML example

A typical image tag using a Base64 Data URL looks like this:

Key parts to notice:

• data: — indicates a Data URL rather than an external file path.
• image/png — the MIME type (for example image/jpeg, image/gif, or image/svg+xml).
• ;base64, — specifies that the following data is Base64 encoded.
• The long string after the comma is your Base64 data.

CSS background-image example

You can also use a Data URL directly in CSS:

.icon {
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPiA8IS0t ... -->");
  background-size: contain;
}

This is helpful for bundling very small icons into your CSS without managing separate image files.

Interpreting the Results

When you use the converter, it is useful to understand what you are seeing:

• Length of the Base64 string: A longer string usually means a larger original image file or more complex content (for example large PNGs or detailed JPEGs).
• Prefix handling: If the output begins with data:image/..., it is ready to paste into an src or background-image property. If it is plain Base64 with no prefix, you may need to add the appropriate data:image/;base64, header yourself.
• Decode errors: If the tool cannot display an image from the string you pasted, the input might not be valid Base64, or it might represent non-image data.

Worked Example

Imagine you have a 100-byte PNG icon and you want to embed it directly into an HTML page without separate file hosting.

1. Select the file using the “Select image to encode” control.
2. The tool reads the file and produces a Base64 output. For 100 bytes, the expected Base64 length is:

• 100 / 3 ≈ 33.33
• ⌈33.33⌉ = 34
• 34 × 4 = 136 characters

So you should see a Base64 string of 136 characters (plus the data:image/png;base64, prefix if you are viewing the full Data URL). You then paste it into:

When you open the HTML page in a browser, the icon will render even though no external image file is referenced.

Pros and Cons of Base64 Images

Base64 images have clear advantages but also trade-offs. The table below summarizes some key points.

Privacy, Security, and Trust

This converter is designed to run entirely in your browser:

• Your image files are read locally using the FileReader API.
• Base64 strings are processed in memory and not transmitted to a remote server by this tool.
• You can disconnect from the internet and the core conversion still works as long as the page is loaded.

However, you should still be cautious when copying Base64 data from untrusted sources. A Data URL can specify different MIME types, and using an unexpected type in your application might have unintended effects. Always validate and sanitize input if you are handling Base64 on a server or in a larger system.

Limitations and Assumptions

While this converter is convenient, it is subject to several practical limits and assumptions:

• Browser memory limits: Very large images or extremely long Base64 strings can cause high memory usage, slowdowns, or failures when creating Data URLs.
• Supported formats: Actual support for PNG, JPEG, GIF, SVG, and other formats depends on your browser. If the browser cannot display a given image type, the decoded preview may fail.
• Data URL size: Some environments (especially older browsers, email clients, or proxies) impose limits on the length of URLs. Very large Data URLs may not work reliably in those contexts.
• Assumed MIME type: When decoding raw Base64 without a prefix, the tool may assume a default MIME type (often image/png). If the actual data is a different format, the preview may not display correctly.
• Error handling: If the pasted string is not valid Base64, or does not represent a valid image, the script cannot recover the original data. In that case, you would need to obtain a correct Base64 string or original file.

For production websites with many or large images, it is usually better to serve files normally from a server or CDN and reserve Base64/Data URLs for small, frequently used assets where the convenience outweighs the overhead.