A virtual teacher who reveals to you the great secrets of Base64

Image to Base64

Convert image to Base64 online and use the result string as data URI, img src, CSS background-url, and others. Sometimes you have to send or output an image within a text document (for example, HTML, CSS, JSON, XML), but you cannot do this because binary characters will damage the syntax of the text document. To prevent this, for example, you can encode image to Base64 and embed it using the data URI. Please note that the image to Base64 encoder accepts any images types with a size of up to 50 MB. If you are looking for the reverse process, check Base64 to Image.


How to convert image to Base64 online

  1. Choose the source of image from the “Datatype” field.
  2. Paste the URL or select an image from your computer.
  3. If necessary, select the desired output format.
  4. Press the “Encode image to Base64” button.
  5. Download or copy the result from the “Base64” field.

Additional image encoders

The Image to Base64 converter generates ready-made examples, depending on the selected output format. It automatically detects the content type of the uploaded image, so that you simply copy the complete result. If you need to encode specific image formats, please follow the links below.

Output formats

If you do not know what output format you need, check the following examples to see how will look the result of the same Base64-encoded image formatted in each of the available formats (as an example image I use a one-pixel red dot GIF file):

Plain text:
R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=
Data URI:
data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=
CSS Background Image:
.base64 {
  background-image: url("data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=")
}
HTML Favicon:
<link rel="shortcut icon" href="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=" />
HTML Hyperlink:
<a href="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs="></a>
HTML Image:
<img alt="" src="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=" />
HTML Iframe:
<iframe src="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=">
  The “iframe” tag is not supported by your browser.
</iframe>
JavaScript Image:
var img = new Image();
img.src = "data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=";
document.body.appendChild(img);
JavaScript Popup:
window.onclick = function () {
  this.open("data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=");
};
JSON:
{
  "image": {
    "mime": "image/gif",
    "data": "R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs="
  }
}
XML:
<?xml version="1.0" encoding="UTF-8"?>
<root>
  <image mime="image/gif">R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=</image>
</root>

If I missed an important output format for Base64-encoded images, please let me know — I would love to implement it.

Add new comment

If you have any questions, remarks, need help, or just like this page, please feel free to let me know by leaving a comment using the form bellow.
I will be happy to read every comment and, if necessary, I will do my best to respond as quickly as possible. Of course, spammers are welcome only as readers.

Loading...