Lights, Camera, Encode

Storing images have always been a trivial and omnipresent task while building out any application. What if i tell you there is a way you can store images without any storage services like AWS, Cloudinary or anything else like firebase buckets.

Get back to the only truth in computer science, everything is 0,1 i.e, binary data in the end, leveraging this we can store images as text format directly. Base64 is a way of encoding binary data (like an image file) into a text format using only printable ASCII characters. It is used to transmit or store binary data over mediums that can only handle text content.

A bit more of detail before we see how to do it if you’re a programmer or even if not one.

1. Binary Data: Digital files like images, videos, audio, etc. are stored as binary data, which are sequences of 0s and 1s. Binary data cannot be directly transmitted over text-based protocols like HTTP, email, etc.
2. ASCII Characters: ASCII (American Standard Code for Information Interchange) is a character encoding standard that assigns numbers to printable and non-printable characters. ASCII uses 7 bits, allowing for 128 different characters, including letters, digits, punctuation marks, and control characters.
3. Base64 Encoding: Base64 is a way to represent binary data using only the printable ASCII characters. It works by taking the binary data and dividing it into groups of 6 bits (since 6 bits can represent 64 different values), then mapping each 6-bit group to a printable ASCII character from the Base64 character set.

The Base64 character set consists of:

• 26 uppercase letters (A-Z)
• 26 lowercase letters (a-z)
• 10 digits (0-9)
• 2 additional characters (+ and /)
• An equal sign (=) is used for padding at the end if needed.

Let’s see in action, an image like Cool Robot will convert into base64 and look like String

But why would I ever do this, what are the advantages?

• Fewer HTTP Requests: When images are embedded as base64 data directly into HTML/CSS/JS files, it eliminates the need for separate HTTP requests to fetch those image files. This can improve page load times, especially for websites with many small images.
• Simplicity: Having the image data encoded and inlined within the same file can make development and deployment simpler, as there are fewer external dependencies to manage.
• Caching: Since the base64 data is part of the document itself, it can benefit from browser caching for that document, reducing the need to re-download the image data on subsequent page loads.
• Single Source of Truth: Embedding images as base64 data ensures that the image data is tightly coupled with the code that uses it, reducing the chances of broken image links or missing files.
• Data URI Support: Base64 encoding allows images to be represented as Data URIs, which can be useful in certain scenarios, such as generating dynamic images on the fly or inlining small images directly into CSS styles.

That’s cool, but how to do this, how do I even convert an image into a string; converting is very simple and it doesn’t even need anything extra, no packages or software

• For Windows: You can use the certutil command. Open the Command Prompt and run certutil -encodehex -f "input.jpg" "output.txt" 0x40000001 1>nul
• For macOS and Linux: You can use the base64 command. Open the Terminal and run openssl base64 -in [input-file] -out [output-file]

Okay, but let’s say I want to do it in my web-app, I am finally convinced to store my images as a string, how do I do it

const { readFileSync } = require("fs");
var proc = require("child_process").spawn("pbcopy");

const buffer = readFileSync("path-to-image");
const base64 = buffer.toString("base64");
const convertedString = `data:image/jpeg;base64,${base64}`;

This all seems too good to be true, what’s the catch?
There are some like,

• Increased File Size: Base64 encoding increases the file size by about 33% compared to the original binary data, which can impact initial page load times for larger images or sites with many images.
• Limited Browser Caching: While the base64 data itself benefits from document caching, it doesn't take advantage of more advanced browser caching mechanisms for individual image files.
• Debugging Complexity: Having images embedded as base64 data can make debugging and maintaining the code more complex, as the image data is mixed with the code.
• Resource Limits: Some older browsers or environments may have limits on the maximum size of data URIs or inlined base64 data, which could cause issues with larger images.
• Accessibility Concerns: Inlining images as base64 data can make it more difficult for screen readers and other assistive technologies to interpret the image content properly

So, when do we use base64 or when do we store images, well, that’s an open ended question and upto you to decide :)

But for the sake of providing an answer, i’ll be brave enough and say
”Storing images as base64 can be beneficial for small images or websites with a limited number of images, where the reduction in HTTP requests outweighs the increase in file size. However, for larger images or image-heavy websites, it's often better to serve images as separate files and leverage browser caching and compression mechanisms for improved performance.”

See you in the next one.