🖼️ Image to Base64

To understand Base64 encoding, you must look at how binary files are structured. Digital files are stored as 8-bit bytes. Base64 encoding translates this data into 6-bit groups. The math is simple: the lowest common multiple of 8 and 6 is 24. This means three 8-bit bytes (3 × 8 = 24 bits) map to four 6-bit Base64 characters (4 × 6 = 24 bits).

The Base64 Index Table and Padding

The Base64 index table maps numbers from 0 to 63 to standard characters: A-Z (indexes 0–25), a-z (indexes 26–51), 0-9 (indexes 52–61), + (index 62), and / (index 63). If the total number of bytes in the input file is not divisible by three, padding is required. The encoder appends null bytes to fill the group, and translates them to one or two padding characters (=) at the end of the string.

Server-Side Base64 Encoding in Node.js

Web backend engines frequently encode assets during API transactions. Here is how you can convert an image to a Base64 string in Node.js:

const fs = require('fs');

function imageToBase64(filePath) {
    // Read binary data
    const fileBuffer = fs.readFileSync(filePath);
    // Convert buffer to base64 string
    const base64String = fileBuffer.toString('base64');
    // Get file extension to build mime type
    const extension = filePath.split('.').pop();
    return `data:image/${extension};base64,${base64String}`;
}

Server-Side Base64 Encoding in PHP

PHP handles this conversion using standard file-reading and formatting functions, which is useful when loading dynamic user avatars inline:

<?php
function convertImageToBase64($imagePath) {
    if (file_exists($imagePath)) {
        $imageData = file_get_contents($imagePath);
        $mimeType = mime_content_type($imagePath);
        $base64 = base64_encode($imageData);
        return "data:" . $mimeType . ";base64," . $base64;
    }
    return false;
}
?>

By using Base64 encoding strategically, developers can optimize the number of assets loaded, package applications into clean bundles, and build robust data integration pipelines.