Overview of Base64 Encoding and Using it in JSON API Responses

What is Base64?

Base64 is a binary-to-text encoding scheme that is commonly used to represent binary data, such as images or files, in ASCII string format. This is especially useful in situations where binary data needs to be included in text-based formats, such as JSON, XML, or HTML.

In the context of JSON APIs, Base64 can be used to safely transmit binary data (such as images, audio, or video files) within a JSON response by encoding the binary data into a string.

Example JSON Response

{
  "status": "success",
  "data": {
    "image": "iVBORw0KGgoAAAANSUhEUgAAAAUA... (rest of Base64 string)"
  }
}

Decoding Base64 on the Client-Side

Once the client receives the Base64-encoded string, it can be decoded to its original binary form. For example, in JavaScript, you can use atob() to decode the Base64 string back to binary.

Example: Decoding Base64 in JavaScript

let base64String = "iVBORw0KGgoAAAANSUhEUgAAAAUA...";  // Sample Base64 string
let binaryData = atob(base64String);  // Decode Base64 to binary

Alternative: Decoding Base64 in Web Decoders

There are also a lot of free Web Decoders where the Base64 string can manually be decoded back into the original image file.