• 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 how to use one base64 data multiple times in css , html5 video database base 64 encode

This Article Has Been Shared 240 Times!

Facebook Twitter Pinterest

Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, 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

Get new posts by email:

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 (24.3K Followers)
  • Twitter (5.8k Followers)
  • Facebook (5.7k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.3k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • What Online Casinos Have No Deposit Bonus in Australia March 30, 2023
  • Four Foolproof Tips To Never Run Out Of Blog Ideas For Your Website March 28, 2023
  • The Interactive Entertainment Serving as a Tech Proving Ground March 28, 2023
  • Is it Good to Run Apache Web server and MySQL Database on Separate Cloud Servers? March 27, 2023
  • Advantages of Cloud Server Over Dedicated Server for Hosting WordPress March 26, 2023

About This Article

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

Source:The Customize Windows, JiMA.in

PC users can consult Corrine Chorney for Security.

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

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

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

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT