We use Base64 encoding when we want to include style-sheets and images in-line on a web page. This inline-encoded data reduces the number of HTTP requests your site requires to load the page. Thus it is more efficient to include multiple style sheets and images in-line in encoded form than to include a separate page and make multiple requests.
Data URI scheme is a URI scheme that provide us a way to inculde our encoded images, style-sheets, etc. in-line on our web pages (HTML and CSS). For using data URI files we have a well defined syntax. We have listed below the list of all components necessary for using data URI.
data- It is the starting keyword for data URI files.
colon (:)- data is followed by colon (:) which is followed by Media Type.
Media Type- The media type can also be followed by many other parameters seperated by semicolon(;). For example here the mime type text/plain is followed by the parameter charset -
base64,- Preceeding the semicolon (;)
base64,represent that data from binary format is encoded in base64.
<data>- At the end we use base64 encoded data.
Auto detect- You can directly enter Base64 encoded string without typing initials like media type, encoding. We will automatically detect the mime type and convert the encoding to image.
Download Options- We have also provided some other mime types you can use while downloading your image. To download the image in other formats simply select one of the available mime type and click on download button.
/- Press forward slash (/) to focus on tool input box.
CTRL + S- Download the encoded image.