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.

Comments (13)

I hope you enjoy this discussion. In any case, I ask you to join it.

  • Emil,
    Hey Amigos ...Id like to convert a list of urls image to base64...how can I do that?...I have urls in a .csv
    • DavidDuckwitz,
      Hey Emil.

      I would create a small php script with a foreach loop over the .csv file and convert the images on the fly to base64 and save it in a text file, for example.
      If you need help with it, feel free to ask. just google for my personal website davidduckwitz dot de...
  • elanioazul,
    Hi David,
    Perhaps you can give me some direction!
    I want to extract from javascript (using btoa method?) a base64 code contained in a xml se:InlineContent element. It looks like:
    <se:InlineContent encoding="base64">
    your plain text output
    </se:InlineContent>


    I wonder:
    - did I locate correctly your plain text output?
    - is the plain text the value of the encoding attribute?
    - how can I take the plain text output and bring it to a varaible in javascript? I have done this but it doesnt work: const stringFromBase64 = inlineContent.$['encoding']

    Thx
  • mayank,
    I can't convert https://static.vecteezy.com/system/resources/previews/000/206/117/original/vector-landscape-illustration.jpg it says an error
    • Administrator,
      This is because that server doesn't allow HTTP requests made by "non-humans". You have to download the image on your device, then encode it to Base64 using the "Local File" option.
  • Ragavan,
    Hello guys, I need to send my username, email, and image(base64Value) in Form of the post method. something like this
    <Form action="" method="post">
    <input type="text" name="username" placeholder="username">
    <input type="text" name="email" placeholder="email">
    </form>

    in this form I also need to send an image of base64 format...the thing is I don't want to upload image from my local system, but I have to capture image from my webcam at realtime and need to send...someone please help me.
    • Administrator,
      Hi! You have to use navigator.mediaDevices.
  • Pete,
    I am unable to select a local file from my computer. I select Local File in the Datatype box but there is no file selection popping up and if I try and type the address string in the box, it won't take it. It gives a pink error saying:"You must select the "Local File", but it gives me no facility to do so.
    • Administrator,
      Hello Pete! Thank you for your message. Please note that the Datatype box just toggles input fields, but you have to click the "Browse" button in order to choose a local file. Are you sure that it doesn't work this way? If so, can you please confirm that there is no "Browse" button next to "Local File" label? Also, do you see the "Choose a file or drag and drop it here" message next to it? By the way, what is your browser version and operating system?
      • Pete,
        I just tried it again and now it pops up a "Choose File" button which works fine. There was no sign of a "Browse" button... It did not do that when I tried it previously. It does the job very well, thank you. If I could suggest ONE option: Could you "format" the Base64 into say, 80 character lines so it doesn't get pasted into one huge line on the web page? This could be a useful option and would save having to go through, chopping the immense string into more manageable chunks.

        Browser version is Edge latest and OS is win 10 Pro fully updated.

        Cheers,

        Pete.
        • Administrator,
          Hello Pete! Thank you for details and suggestion. I can implement a such option, but first of all I want to know what "Output Format" do you need.

          By the way, if you need it as "Plain text" or "Data URI", please take a look at the Base64 Encoder. It allows you to specify the Base64 Standard, so you can choose the MIME standard and the output will be splitted into fixed 76 line-length.
          • Pete,
            Thanks very much for your response. I had missed the 76 character split option and it meets my needs exactly. I only need this facility about half-a-dozen times a year, but I have bookmarked your page. Cheers,

            Pete.
            • Administrator,
              Thank you very much for sharing your experience. I'm glad you found what you were looking for.

              Best wishes,
              Victor
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.