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’).
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.
There are several tools available to convert the format, like :