Image ↔ Base64 Converter

Stephanie Ben-Joseph headshotEdited by: Stephanie Ben-Joseph

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:

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:

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:

L = 4 ⁢ ⌈ n 3 ⌉

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:

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:

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 <img> example

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

<img
  alt="Inline logo"
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
/>

Key parts to notice:

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:

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:

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:

<img alt="Icon" src="data:image/png;base64,<your-136-char-string>" />

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.

Aspect Using Base64 / Data URLs Using Regular Image Files
HTTP requests Reduces the number of separate requests because the data is inline. Each image usually requires its own HTTP request.
File size Base64 increases size by ~33% over the original binary. Uses the original binary size with no encoding overhead.
Caching Harder to cache images separately from the page or stylesheet. Images can be cached independently by the browser or CDN.
Readability Long, opaque strings that are hard to inspect manually. File names and paths are human-readable and easier to manage.
Best use cases Tiny icons, embedded assets in HTML emails, quick prototypes, or small sprites. Regular website images, large photos, and most production assets.

Privacy, Security, and Trust

This converter is designed to run entirely in your browser:

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:

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.

Select an image to encode or paste Base64 to decode it back into a preview.