title: Javascript: why encrypted file that is produced via Crypto-js is very large?
body: <p>I have the following code that uses Crypto-JS to encrypt any file.</p>
  
  <p>It works fine and as it should.</p>
  
  <p>However, the produced encrypted file is HUGE in comparison with the original file!</p>
  
  <p>Example: if I use a file that is 2.99MB and encrypt it, the produced encrypted file will be 5.3MB.</p>
  
  <p>Is there anything i can do to keep the encrypted file as small as possible?</p>
  
  <p>This is my entire code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type" /&gt;
      &lt;title&gt;Get Directory&lt;/title&gt;
      &lt;!-- Update your jQuery version??? --&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  
  
        &lt;!--
    https://cdnjs.com/libraries/crypto-js
    --&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"&gt;&lt;/script&gt;
  
  
    &lt;!--[if lt IE 9]&gt;
      &lt;script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
  
      &lt;script&gt; // type="text/javascript" is unnecessary in html5
  
      // Short version of doing `$(document).ready(function(){`
      // and safer naming conflicts with $
      jQuery(function($) { 
  
          $('#file-input').on('change', function() {
  
              // You can't use the same reader for all the files
              // var reader = new FileReader
  
              $.each(this.files, function(i, file) {
  
                  // Uses different reader for all files
                  var reader = new FileReader
  
                  reader.onload = function() {
                      // reader.result refer to dataUrl
                      // theFile is the blob... CryptoJS wants a string...
  
                     var encrypted = CryptoJS.AES.encrypt(reader.result, '12334');
  
  
  
  
                      var ecr = encrypted.toString();
  
  
                      var blob = new Blob([ecr], {
                      "type": "text/plain"
  
                      });
  
                      var link = document.createElement("a");
                      link.download = "Encrypteddocument";
                      link.href = URL.createObjectURL(blob);
  
  
                      document.body.appendChild(link);
                      link.click();
                      document.body.removeChild(link);
  
                      //alert(encrypted);
  
  
  
                  }
  
                  reader.readAsDataURL(file)
                  $('#thelist').append('FILES: ' + file.name + '&lt;br&gt;')
              })
          })
      });
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type="file" id="file-input"&gt;
      &lt;div id="thelist"&gt;&lt;/div&gt;
  
  
      &lt;input type="button" id="button" value="Save" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>any help would be appreciated.</p>
  
  <p>This question might be a duplicated of another question that was asked ages ago but the other question does not have a valid or 'accepted' answer. so this question still stands.</p>
  
  <p>How can we reduce the size of the encrypted file?</p>