Lesson 32: Base64 Images

Overview

In this HTML lesson, we demonstrate how to encode images in Base64 and embed them into an image element in an HTML document. Ordinary image elements use a file on the local file system or a file at a remote URL as the source for image data. Base64 encoding allows us to include the data for an image directly in an image element so that the image does not rely on an external resource, like a file that is local or at a remote URL. Base64 uses one of 64 characters to represent 6 bits of data or 64 possible values. A conversion program for creating base64 encodings is available on our lesson page.

Ordinary Images

With an ordinary image element, we set the src attribute value to the name of a file on the local file system or at a remote URL. This example uses a local image file of a small red "X" in a 9 by 9 pixel image. The image is deliberately small to make the base64 encoding easier to explain.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="SmallX_9x9.png">
  </body>
</html>

Output

Base64 Encoding

We can replace the source file of an image with its base64 encoding, as we do in this example. This HTML document looks exactly the same as the previous example. The only difference is that, instead of loading an external file, we have included all of the image data inside the src attribute. This long base64 string contains all of the data of the image file. We kept the image file small so that the entire base64 encoding could be seen easily. A larger image would take up several pages of text.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAALHRFWHRDcmVhdGlvbiBUaW1lAFN1biAyOSBOb3YgMjAyMCAwMDowNDo1NiAtMDYwMG8XiDEAAAAHdElNRQfkCx0GBxWys0P5AAAACXBIWXMAAC4jAAAuIwF4pT92AAAABGdBTUEAALGPC/xhBQAAAC9JREFUeNpj+M/A8B+EGbAAuByMga4QQxxdAJdGFAl8TmAgSQFBq4hyNFaNxIQTAFMqWacR/ceiAAAAAElFTkSuQmCC">
  </body>
</html>

Output

Number Bases

To understand base64, it helps to look at some other number systems with other bases. The number system that we commonly use is called decimal, and it encodes digits with ten possible values: 0 through 9. The fundamental number system of a computer is binary, or base 2, and it encodes all digits with either a zero or a one. Octal, or base 8, is another number system that uses the digits zero through seven to encode eight possible values per digit. Hexadecimal, or base 16 numbers, are very commonly used in computer prgramming and use the numbers zero through nine and the letters "A" through "F" to represent sixteen possible values per digit: 0 through 15, respectively. Finally, Base64 uses the uppercase letters, lowercase letters, digits zero through nine, and "+" and "/" to represent 64 possible values per digit.

Base64 Conversion Program

To help you generate your own base64 image data, we have included this base64 conversion program. Just copy and paste this HTML and JavaScript into a text editor and save the file with a .html extension. Then open the document with your browser. Click the "Choose File" button and select the image file to encode. After you click the "Open" button, the image will be displayed underneath the "Choose File" button and the base64 encoding of the image will appear as a string of text beneath the image. To use the base64 encoding, select the entire string under the image and copy it into the src attribute for your image.

Base64Converter.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
    <script type='text/javascript'>
      function EncodeImageFileAsBase64() {
        var qaSelectedFiles = document.getElementById("idFilesToLoad").files;
        if (qaSelectedFiles.length > 0) {
          var qFileToLoad = qaSelectedFiles[0];
          var qFileReader = new FileReader();
          qFileReader.onload = function(qLoadEvent) {
            var sBase64Data = qLoadEvent.target.result; // <--- data: base64
            var qImageElement = document.createElement('img');
            qImageElement.src = sBase64Data;
            document.getElementById("idImageHolder").innerHTML = qImageElement.outerHTML;
            document.getElementById("idBase64Data").innerHTML = sBase64Data;
          }
          qFileReader.readAsDataURL(qFileToLoad);
        }
      }
    </script>
  </head>
  <body>
    <input id="idFilesToLoad" type="file" onchange="EncodeImageFileAsBase64();" />
    <div id="idImageHolder"></div>
    <div id="idBase64Data" style="width:1200px;word-wrap:break-word;"></div>
  </body>
</html>

Output

Base64 Encoding

Base64 encoded images increase the image data size by one third over the original image. This is because 8 bits are required to specify a base64 digit that can only represent 64 possible values or 6 bits of data. Be aware that image files increase in size dramatically as the image size increases. So, the base64 encoding will we very long for large images. Additionally, there might be a few "=" signs at the end of the base64 encoding. These are not base64 digits, but are used to fill up the string to the nearest multiple of four bytes.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="data:image/png;base64,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">
  </body>
</html>