Base64 Encoder/Decoder

In computer science, Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. The term Base64 originates from a specific MIME content transfer encoding. Each Base64 digit represents exactly 6 bits of data. Three 8-bit bytes (i.e., a total of 24 bits) can therefore be represented by four 6-bit Base64 digits.

Common to all binary-to-text encoding schemes, Base64 is designed to carry data stored in binary formats across channels that only reliably support text content. Base64 is particularly prevalent on the World Wide Web where its uses include the ability to embed image files or other binary assets inside textual assets such as HTML CSS and XML files.

Consult wikipedia for more information.

How does Base64 encoding work?

Bytes data are broken into multi-buffers of 24 bits (3 bytes each). The resulting buffer of 3 bytes is then broken in 4 packs of 6 bits each. Those 6 bits form a number corresponding to the index in the character set supported by Base64 (A-Z, a-z, 0-9, + and /). If the number of bytes is not 3, then '=' padding is used; for 1-byte padding '==', for 2 bytes padding '='.

How to embed Base64 encoded resources directly into HTML, CSS and XML code?
<script type="text/javascript"
src="data:text/javascript;base64,ZnVuY3Rpb24gaGVsbG8oKXtjb25zb2xlLmxvZygiaGVsbG8gd29ybGQhIil9"></script>
<link rel="stylesheet" type="text/css"
href="data:text/css;base64,Ym9keXtiYWNrZ3JvdW5kOiMwMDA7fQ==" />
<img alt=""
src="data:image/jpeg;base64,data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSA..."/>
.container {
    background-image:url("data:image/jpeg;base64,data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSA...")
}
<xml>
   <media>data:audio/mp3;base64,SUQzBAAAAAAALIRTU0UAAAAPAADTG...</media>
</xml>
Top