Image to Base64

Convert the photograph to Base64 online and use the result string as records URI, img src, CSS heritage-URL, and others. Occasionally you want to send or output a photo inside a text file (for example, HTML, CSS, JSON, XML), but you can not do that because the reality binary characters will damage the syntax of the textual content record. To prevent this, as an instance, you could encode a photo to Base64 and embed it using the records URI. Please have a look at that the photograph Base64 encoder accepts any image sort with a size of as much as 50 MB. If you are seeking out the other procedure

The way to convert photographs to Base64 online

1. Select the supply of photograph from the “Datatype” area.

2. Paste the URL or pick out a photograph out of your pc.

3. If important, pick the desired output layout.
4. Press the “Encode picture to Base64” button.
5. Download or copy the end result from the “Base64” area.
6. Additional photo encoders

The photograph to Base64 converter generates equipped-made examples, relying on the selected output layout. It automatically detects the content form of the uploaded photo, so you without a doubt copy the complete result. In case you want to encode specific photograph codecs, please comply with the hyperlinks under.

1. BMP
2. GIF
3. ICO
4. JPG
5. PNG
6. SVG
7. WebP

Output codecs
If you no longer recognize what output layout you need, test the following examples to see how will look the end result of the same Base64-encoded picture formatted in each of the to-be-had formats (as an example picture I use a one-pixel red dot GIF document):

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.