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 (42)

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...
    • Nicolás_messineo,
      Cada ves que quiero copiar el código base64 de una imagen me aparece lo siguiente "error al copiar al portapapeles" no sé que será y me gustaría que me ayudarás así poder arreglar ese problema y que me deje copiar el código base64 de una imagen
    • Helper,
      convert the scv to image and then upload the image here
  • 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
  • mia,
    hij, i converted a picture to base64 and filled it into my programm. I overwritten the actual base64-code. But it doesn´t work. If i copy back the old one, it works again. The code created isn´t in rows, just one row. Maybe that´s the problem. But how to i get the rows, if i copy it from here?

    [UPDATED: ]
    So i need nice rows (justified text). But how do i get them?

    [UPDATED: ]
    oh, my bad. I had to use the correct imgage-quality for the picture.
  • Loksa,
    Im trying to convert image url using base64_encode in php, Try to bypass ssl using verify peer false but still cannot get content, somehow, it success in your website. How you convert it? Thanks
    • Administrator,
      If you understand all the risks, make sure you set both CURLOPT_SSL_VERIFYHOST and CURLOPT_SSL_VERIFYPEER to 0 (zero).
  • atika,
    converte image
  • Graig,
    Very energetic blog, I loved that bit. Will there be a part 2?
  • Kenny,
    Hello, will you integrate this tool to Integromat? I definitely need this
  • compressjpg,
    Can you tell me the difference between blob URL and base64 URL of an Image? I really need this for my project
  • MaaviaAnwar,
    Cant copy to clipboard
  • Brian,
    Hello, I'm trying to figure out how an image of .HEIC should be setup. ive tried <img alt="" src="data:image/heic;base64,mybase64img" /> any suggestions?
    • Administrator,
      Hello Brian! According to caniuse.com/heif, none of the popular web browsers support HEIC and this is why you cannot preview it in your browser.
  • Devin,
    https://lollylist-demo.s3.us-west-2.amazonaws.com/e6cfecb95ca0e020044c78124f5c1945a81d1f317777b7e1ae5d120ddc11f35f.devin-Vostro-3578.jpg

    and it says • Wrong file type (received “application” while waiting for “image”). Anyway, do not worry, you still got a properly result and this warning is not related to the data encoding.

    anyways decoding the outputput I was able to view the image! What happened there?
  • eyeexpog,
    hello, how can i solve this problem with this page showing? eyeg
  • Tre,
    I want to take a directory of images, convert to base64 and send output to XML files. Want to do this in batch mode.
    Preferably Java but ok if other.
  • lon233bcc,
    what is the process of encoding a image into base64?
    how exactly does it work??
  • Zx123456,
    1.6.0 (15522)
    No protection
    169.30M
    15522
    com.tencent.ig
    /data/user/0/com.tencent.ig
    /data/app/com.tencent.ig-Jg89O1T2LjgUxm3dXn0BQg==/base.apk
    12759
    APK path
    UID
    Installed version
    Protection
  • dursch69,
    Markdown format would be nice:
    ![altname](data:image/png;base64,$base64$)
  • ruphus42,
    Thank you very much for this great tool.
  • Sas,
    Hi David,
    Instead of buying you a cup of coffee — I'll be happy to buy you a WHOLE POT OF COFFEE if you can send me the actual code you've written. It does exactly what I need to do with a little project I'm working on for a not-for-profit org. Please let me know if you are interested in helping out.
    Thanks,
    Sas
  • Tilly,
    Gel press on nails,Impress press on nails,Diamond press
    on nails,Red press on nailsChuan Chuan Fashion has redefined nail care in Australia by
    offering gel press-on nails that combine style, quality, and convenience.

    With their diverse range of press-on nails and polygel
    nail kits, achieving salon-worthy nails at home has never been easier.
    Say goodbye to long salon appointments and hello to the future of nail beauty with Chuan Chuan Fashion.
  • Mac_McMeans,
    Very nice online tool! Could you please implement an AVIF converter?
  • ThaiCohortStudy,
    Magic! Thank you so much. Will definitely share this!
  • Christophe,
    Hi,
    I'm using base64 code to insert image in a html page. BUT, what I'm facing is strange. There are characters that cause an issue when saving the html page. Issue : "This email message cannot contain the following words/terms..."
    Is there a way to change the forbidden characters by others ? Or is it possible to generate base64 code without forbidden terms ?
    Thanks in advance for your replies.
    Kind regards,
    Chris
  • nqhXncMU,
    m1RtBQ8D')) OR 761=(SELECT 761 FROM PG_SLEEP(15))--
  • nqhXncMU,
    -1 OR 2+289-289-1=0+0+0+1
  • dsf,
    -1 OR 2+289-289-1=0+0+0+1
  • tomy,
    Yes protection
  • ducky,
    I love this website!
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.