• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here: Home » Base64 Encoding Schemes and Usage with HTML5 Simplified

By Abhishek Ghosh July 2, 2013 5:39 am Updated on October 17, 2014

Base64 Encoding Schemes and Usage with HTML5 Simplified

Advertisement

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’).

Advertisement

---

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

 

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

Abhishek-Ghosh Tagged With html5 video database base 64 encode

This Article Has Been Shared 624 Times!

Facebook Twitter Pinterest
Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Orthopaedic Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

Here’s what we’ve got for you which might like :

Articles Related to Base64 Encoding Schemes and Usage with HTML5 Simplified

  • Syntax Highlighting : All About the Colorful Snippets

    Syntax Highlighting is a method for coloring certain words and characters in a text depending on their importance in in an piece of code or snippet.

  • HTML5 : Vocabulary and Interfaces

    HTML5 can be difficult to understand at high end usage. Basic usage of HTML5 is otherwise easy. Here is a list of Vocabulary and Interfaces for HTML5.

  • What are ASCII art and emoticons

    You have probably seen pictures “written” inside text files within a downloaded zipped file or obviously used a colon, followed by a close part of first bracket. These are ASCII art and emoticons.

  • Fixing WordPress After Update : Fix For White Page

    Fixing WordPress After Update Video Guide practically shows you all the possible ways to fix your WordPress website in case you are facing the White Page issue.

  • Google Plus Interactive Posts : Tips and Tricks

    Google Plus Interactive Posts can target your call-to-action button label from a large list of options programatically. It actually does not require any Plugin.

Additionally, performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Comments

  1. Avatarstefan says

    October 23, 2013 at 12:10 am

    great tut. you can use this base64 encoder

    http://newexception.com/tools/base64-encode

    to encode data in case anyone needs it

  2. Abhishek GhoshAbhishek Ghosh says

    October 24, 2013 at 7:03 am

    Hey Stefan, thats a nice tool indeed. Thanks a lot.

Subscribe To Our Free Newsletter

You can subscribe to our Free Once a Day, Regular Newsletter by clicking the subscribe button below.

Click To Subscribe

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (20K Followers)
  • Twitter (4.9k Followers)
  • Facebook (5.8k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.2k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • What is a Loosely Coupled System? January 17, 2021
  • How To Repack Installed Software on Debian/Ubuntu January 16, 2021
  • Components of Agile Software Development January 15, 2021
  • What is Conway’s Law? January 14, 2021
  • Effects of Digitization on Companies : Part XIII January 13, 2021

 

About This Article

Cite this article as: Abhishek Ghosh, "Base64 Encoding Schemes and Usage with HTML5 Simplified," in The Customize Windows, July 2, 2013, January 17, 2021, https://thecustomizewindows.com/2013/07/base64-encoding-schemes-and-usage-with-html5-simplified/.

Source:The Customize Windows, JiMA.in

 

This website uses cookies. If you do not want to allow us to use cookies and/or non-personalized Ads, kindly clear browser cookies after closing this webpage.

Read Cookie Policy.

PC users can consult Corrine Chorney for Security.

Want to know more about us? Read Notability and Mentions & Our Setup.

Copyright © 2021 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy