You can calculate the file size (in bytes) using below formula:

x = (n * (3/4)) - y

Where:

1. x is the size of a file in bytes

2. n is the length of the Base64 String

3. y will be 2 if Base64 ends with '==' and 1 if Base64 ends with '='.

You can read the algorithm here Base 64 wiki

It will be approximately 37% larger:

Very roughly, the final size of Base64-encoded binary data is equal to 1.37 times the original data size

Source: http://en.wikipedia.org/wiki/Base64

The base64 encoding is a way to encode binary data using only a set to 64 printable characters.

The trick is to regroup the original bits in packets of 6 bits (6 bits can take a value from 0 to 63) and then send the corresponding letter in its ascii encoding of 8 bits. So each group of 3 binary bytes (3*8=24 bits) can be encoded into 4 base64 digits (4x6=24). If your total number of bytes is not a multiple of 3, your 4 last base64 digits will have some padding characters that will tell about the number of useless bits.

So the exact length of the base64 encoding is: floor((binary_size+2) / 3) * 4 . The ratio base64/original converges to 4/3 for large sizes, but for small data the ratio can be higher (e.g. time 4 for a 1 byte original message). As base64_encode() encodes in MIME compliant way, you have to count in addition the newlines (at least one every 76 base64 chars).

For decoding it's just the opposite. To calculate the exact length you'd need to know if there's one or two padding characters at the end, but if you want to know a maximum size, it's just (base64_size/4)*3.

But regardless of the more or less inflated size of the base64 encoding: your decoded image should have exactly the same size than the encoded one. The base64 encoding schema guarantees that.

If you have encoded to a Base64 string, then the size that you're transferring across the wire is simply the count of the characters. Since Base64 fits within the character space of ASCII, your bytes across the wire are simply:

var bytes = encodedString.length

If size is a major concern, you probably want to consider not Base64 encoding your images. Base64 will translate every 6 bits into an 8 bit character representation. This means that you multiply the original by 4/3 when you Base64 encode.

It is possible by using the <canvas> element

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

canvas.width = 32; // target width
canvas.height = 32; // target height

var image = new Image();
document.getElementById("original").appendChild(image);

image.onload = function(e) {
    ctx.drawImage(image, 
        0, 0, image.width, image.height, 
        0, 0, canvas.width, canvas.height
    );
    // create a new base64 encoding
    var resampledImage = new Image();
    resampledImage.src = canvas.toDataURL();
    document.getElementById("resampled").appendChild(resampledImage);
};

image.src = "data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAABaFBMVEVMoUNNoURNokROokVPokZQo0dRpEhSpElTpUpUpUtVpk1Wpk1Xp09ZqFBZqFFaqFJbqVJbqVNdqlVeqlVeq1Zgq1hgrFhirFpirVtlrl5mr15nr2BpsGFqsWNssmRus2dvs2hwtGlxtGlytWtztWx4uHF5uXJ6uXR+u3d/vHiAvHqBvXqCvXyDvn2Evn6HwIGMw4aPxImRxYuUx46Vx5CWyJGbypacy5egzZuizp2kz5+kz6Cm0KGn0aKp0qSp0qWs1Kiu1Kmw1ayy1q602LC12LG627e83Lm+3bvF4cPI4sXJ48bK48jL5MjM5MrN5cvP5szQ5s7R58/S59DU6dLV6dPa7Nnf7t7g79/h79/i8OHj8OLk8ePm8uXn8ubp9Ojq9Onr9ers9evt9ezu9u3v9+7w9+/x+PDy+PHy+PL0+fP0+fT1+vX2+vX3+/f4+/j5/Pj5/Pn6/Pr7/fv9/v3+/v7+//7////VxbUKAAABVElEQVR4Ae3L65cKcQDH4e9YYe2utMnFsuu+rCyFKDVyKSTG/X6RVO5Ums+/r3HQOZz5zcyb7U3P+0drbcLKVRVF/DacVQSbnkL/oCJY+Axv4orgpAvOlMJYvJXU0GWgqBBSDd4ekhR7CINjClYGellJ21rwfocCWYUBcDUmHfkBj2IKlv4EPEhI54GKQlh4DjQOyKoBp2Syf1qemZtAN6PZV/Btr/xNdz5cnNeQVXKBK+uXvsNd+TsH9K4taujEF+D+1iw35uTP7gK4zlFL2vMCeL1vWUaJC208jzMbNFsHzijIxtPP8LzLz62z3UsKwTp+D8/Xyq7DUzKZ36nflq73AXpbZFSi49irKXm2lz9CVWZ3+KVVL6aT0ubcy90ye8JIs1ZYiStIYqVQa/JXXr4A/ZFMF+stPMsSYAojqVXbac+EDiPmwD/GH/431mAwhmA28RMGFbXqgVfHnwAAAABJRU5ErkJggg==";

<p>Original (48x48)</p>
<div id="original"></div>
<p>Resampled (32x32)</p>
<div id="resampled"></div>

Each character has 8 bits. And 8 bits are 1 byte. So you have the formula:

small Example

const base64Image = 'data;image/png;base64, ... ';
const yourBase64String = 
base64Image.substring(base64Image.indexOf(',') + 1);
const bits = yourBase64String.length * 6; // 567146
const bytes = bits / 8;
const kb = ceil(bytes / 1000);
// in one Line
const kb = ceil( ( (yourBase64String.length * 6) / 8) / 1000 ); // 426 kb