Image to Base64 converter

What is base64?

Base64 is an encoding system that allows any character to be converted into a Latin alphabet including numerals, plus, and slash. Even Chinese letters, emojis, and photos may be turned into a "readable" text with this approach.

Base64 is a set of binary-to-text encoding algorithms used in computer programming to represent binary data (particularly, a series of 8-bit bytes) in an ASCII string format by converting the data to a radix-64 representation.

The word Base64 refers to a MIME content transmission encoding standard. Each non-final Base64 digit represents 6 bits of data perfectly. Four 6-bit Base64 digits can thus represent three bytes (i.e., a total of 24 bits).

What is the advantage of using Base64 encoding?

Base64 encoded files are larger than their unencoded counterparts. The benefit is that you don't have to start a new connection and send an HTTP request to the server to get the image.

This advantage wears off quickly, thus it's only useful for big numbers of very small individual photos.

What is Online Image to Base64 Converter?

Image to Base64 Converter is a free online tool for converting images to base64 strings, which can be used for a variety of purposes.

► Plain text:

iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB

► Data URI:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB

► CSS background image:

.base64 {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB");
}

► HTML favicon:

<link
  rel="shortcut icon"
  href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB"
/>

► HTML hyperlink:

<a
  href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB"
></a>

► HTML image:

<img
  alt=""
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB"
/>

► HTML iframe:

<iframe
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB"
>
  The "iframe" tag is not supported by your browser.
</iframe>

► JavaScript image:

let img = new Image();
img.src =
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB";
document.body.appendChild(img);

► JavaScript popup:

window.onclick = function () {
  this.open(
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB"
  );
};

► JSON:

{
  "image": {
    "mime": "image/png",
    "data": "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEXj5eX/t0J9AAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg=="
  }
}

► XML:

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <image mime="image/png">iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEXj5eX/t0J9AAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==</image>
</root>

How to use Image to Base64 Converter?

Below are two approaches for converting photos to base64 strings:

Method 1: using a local image

1. Select your image by dragging or clicking it.
2. Once the image has been loaded, the base64 string will show.

Method 2: using an image direct link

1. Paste a direct URL to an image into the input.
2. To begin converting the image to base64, press the Get button.
3. Once the image has been downloaded, the base64 string will show.

Note:

• Only small-size photos should be converted to base64 strings.
• We don't save any of your photographs because everything is handled on the client's end.