Home / Questions / 8334
Accepted
devconcept
Asked: 2020-04-23 10:11:32 +0800 CST 2020-04-23 10:11:32 +0800 CST

Why is the size of a base64 encoded image different from the original?

  • 772

I am using the javascript file API to read images using the readAsDataURL method and found that my images were always larger than their originals, in one case even 1MB larger.

This is the code I am using

$(function() {
  'use strict';
  $('#source').on('change', function(evt) {

    var reader = new FileReader();

    var file = evt.target.files[0];
    var reader = new FileReader();

    reader.onloadend = function() {
      $('#encoded').text('El tamaño codificado es ' + reader.result.length / 1024 + ' kb')
    }

    if (file) {
      $('#original').text('El tamaño original es ' + file.size / 1024 + ' kb')
      reader.readAsDataURL(file);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="source" type="file">
<div id="original"></div>
<div id="encoded"></div>

I don't know if I am missing something here or if there is some reason for this behavior. Does anyone know what could be the cause?

javascript

3 Answers

  1. Best Answer

    Base64 is a printable character representation of binary content. To be printable, Base64 uses an alphabet of 64 characters, 6 bits per character.

    The "waste" appears because Base64 is stored/transported in bytes (like everything else), so for each byte you store in Base64 representation you need 1 byte + 2 bits of the next storage byte.. disk, network, memory, etc.

    A diagram says more than a thousand words:

     byte    | base 64
-------- + ---------------------------
 1 byte  | 1 byte + 2 bits.
 2 byte  | 2 byte + 4 bits.
 3 byte  | 3 byte + 6 bits = 4 bytes (recuerda, solo 6 bits)

    In other words, each 3-byte block of the original file is converted into 4 bytes in Base64 format, so that at least the size will increase by a ratio of 4/3, that is, 133%. To this you must add the padding (the file sizes will not always be multiples of 3) and the carriage returns found in the transfer file.

    • 13

  2. I just tried with an image of the following sizes:

    • Size: 16.8KB (17,276 bytes)
    • Size on disk: 20.0KB (20,480 bytes).

    Using your example, I get:

    • The original size is 16.87109375 kb.
    • The encoded size is 22.517578125 kb.

    Let's go to the San English Wikipedia https://en.wikipedia.org/wiki/Base64

    Thus, the actual length of MIME-compliant Base64-encoded binary data is usually about 137% of the original data length, though for very short messages the overhead can be much higher due to the overhead of the headers.

    And in the San Wikipedia in Spanish https://es.wikipedia.org/wiki/Base64

    MIME does not specify a fixed size for base64-encoded lines, but it does require a maximum size of 76 characters. In addition, it specifies that any non-alphabet characters should be ignored by decoders, although many implementations use the CR/LF (carriage return and line feed) characters to delimit encoded lines. Thus, the actual size of the MIME-encoded data is typically 140% of the original size.

    Whether it is 137% or 140%, the size will increase when using Base64. Cheers!

    • 5

  3. FileReader transforms the image to a base64 text string:

    data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA8Q1JF...

    Whereas your variable fileis an object of type Filethat contains the image in binary .

    For more information about the object Fileyou can read this documentation

    • 4