Base64 Encoding Schemes and Usage with HTML5 Simplified

Base64 Encoding Schemes are now frequently used in HTML5 design for the CSS part. But what this Base64 Encoding Schemes are and how you can use them that usually not written in easy way. In this guide, first we will discuss about the basics of Base64 Encoding Schemes and in the next sub header how and why we use Base64 Encoding Schemes for defining the CSS part in HTML5.

Base64 Encoding Schemes

Base64 describes a method for coding of 8 bit binary data (such as executables, ZIP file) to a string consisting of only readable, code page -independent ASCII character. In the context of OpenPGP, still a checksum ( CRC-24 ) attached, this is slightly modified method and is called Radix-64. It is the Internet standard in MIME (Multipurpose Internet Mail Extensions) application and is thus used mainly for sending e-mail using attachments. This is necessary to ensure the smooth transport of arbitrary binary data, since SMTP was designed in its original version for the shipment of 7-bit ASCII characters. Through coding, the space requirement of the data stream increases by 33-36% (33% by coding yourself up to an additional 3% by the inserted line breaks in the encoded data stream).

Base64 encoding can be useful when the size of the identification information used in a HTTP is quite large. The framework of database for persistent objects  for the programming language Java uses Base64 to encode a relatively large unique ID (usually UUIDs of 128 bits ) within a text string to be used as parameter in HTTP forms or in GET transmission mode. Also, many applications need to encode binary data so that they can be introduced into the URL as well as hidden fields in the forms. Base64 is suitable for these purposes as well as to transform into a compact string, conceals the nature of the information to potential observers. Using a Base64 encoder URL on standard, however, is not suitable because the leading characters ‘+’ and ‘/’ is in special sequences in hexadecimal % XX (‘+’ = ‘% 2B’ and ‘/’ = ‘% 2F’).

For this reason there is a modified Base64 for URL, which does not use the character ‘=’ padding marking and the characters ‘+’ and ‘/’ are replaced by ‘-‘ and ‘_’ respectively, so they no longer need to use URL encoding. It also has no impact on the size of the encoding, leaving it intact for use in relational database, web forms and object identifiers in general. Another variant, called Modified Base64 for regular expressions, use “! -” Instead of “* -” to replace the “+ /” the standard Base64, because both ‘+’ and ‘*’ are reserved characters for regular expressions. When the encoded, string will be used as a valid identifier for programs, or. “-” When used for tokens of XML (Nmtoken) or even “_ : “to be used in a more restrictively in the XML identifiers (Name). The atob() and btoa() JavaScript methods, defined in the HTML5 draft specification. Base64 is often used to embed binary data in an XML file. Base64 is used to encode binary files such as images within scripts, to avoid depending on external files. The data URI scheme is a URI scheme (Uniform Resource Identifier scheme) that provides a way to include data in-line in web pages as if they were external resources. This technique allows normally separate elements such as images and style sheets to be fetched in a single HTTP request rather than multiple HTTP requests, which can be more efficient. The data URI scheme can use Base64 to represent file contents. For instance, background images and fonts can be specified in a CSS stylesheet file as data: URIs, instead of being supplied in separate files.

Base64 Encoding Schemes and Usage with HTML5 in CSS

Method 1 :

Here is a simple way to do it with PHP. First, you need to rename your CSS file so that PHP will process it. Append .php to the filename, so that it is named something like style.css.php :
  Then, update the HTML to point to the new filename. Once you done that, it should just work. You will be incurring some additional processing overhead, because PHP will have to execute this code every time your CSS file is loaded. Method 2 : A normal line of CSS from WordPress Theme :

After Encoding :

Advantages : HTTP request and header traffic is not required for embedded data, so data URIs consume less bandwidth. As HTML can not call multiple objects after a limit after a limit of times within one time frame, using Base64 overcomes this issue. There are disadvantages, however for normal usage they are not needed to be known.

Tools :

There are several tools available to convert the format, like :

https://github.com/juancarlospaco/base64

http://johndyer.name/optimizing-css-with-base64-embedded-images-with-bonus-utility/

http://webcodertools.com/imagetobase64converter