Converting an Image to Base64 Using JavaScript

Converting an image to a Base64 string in JavaScript can be extremely useful in many modern web development scenarios. One of the most common reasons for using Base64 is to send image data through an API, where binary files might not be accepted directly. Base64 is also convenient when you want to display a preview of an uploaded image before sending it to the server. Instead of uploading the file immediately, you can convert it into a Base64 string and render it directly in the browser. This approach helps improve user experience and creates more interactive interfaces.

JavaScript provides a very convenient tool for this task: the FileReader API. With FileReader, you can read the contents of an image file selected through an <input type="file" />  element and convert it into a Base64-encoded string. Once the conversion is complete, you can use the resulting string anywhere—embed it into JSON, send it via AJAX, or display it as an image preview. It is especially popular in cases where you need to validate or process images before uploading.

Before converting the image, it is often a good idea to check its size. Large files can slow down the conversion process, affect performance, and even cause browser memory issues. In the example that will be added to this article, we will include a file size check with a limit of around 9 MB. This threshold can easily be adjusted depending on your project’s needs. You can increase it, reduce it, or remove the validation entirely if file size is not a concern.

HTML

<input type="file" 
       accept="image/png, image/jpeg" 
       id="field"
       />
<div id="imgbox"></div>

JavaScript

const imgField = document.getElementById('field');

function readFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    // set the limit to about 9 MB
    const maxFileSize = 9000000;

    if (file.size > maxFileSize) {
      reject('error size');
      return;
    }

    reader.addEventListener(
      'load',
       () => {
        resolve(reader.result);
      },
      false
    );

    reader.addEventListener(
      'error',
      () => {
        reject('something went wrong');
      },
      false
    );

    reader.readAsDataURL(file);
  });
}

imgField.addEventListener('change', (ev) => {
  
  const files = ev.target.files;
  
  if (files && files[0]) {
    
      readFile(files[0])
        .then((base64str) => {
            
          // do something with the string...
          const img = document.createElement('img');
          img.src = base64str;
          document.getElementById('imgbox').appendChild(img);
        })
        .catch((err) => {
          alert(err);
        });
  }
});

While converting images to Base64 in JavaScript is usually straightforward, keep in mind that Base64 strings are larger than the original binary files. This is normal, as Base64 adds roughly 33% more data. Because of this, using Base64 for large images or storing many Base64 strings in databases may not be optimal. However, for previews, testing, or simple API requests, it is often the simplest and most effective option.

In addition to JavaScript-based conversion, there are many online services that allow users to convert images to Base64 instantly. These tools can be helpful when you need a quick conversion without writing code. For example, you can use the online service StringUtils to convert an image to Base64.

Overall, converting images to Base64 using JavaScript provides flexibility, improves user experience, and simplifies data handling in many web applications. It is a practical technique that every web developer should know, especially when dealing with file uploads or dynamic image processing. Whether you are working with previews, API uploads, or temporary storage, Base64 can be a valuable tool in your workflow.

You can see an example of the code working on Codepen: https://codepen.io/igorrybalko/pen/MYyqYRW