Use this online free Base64 Image Maker to quickly upload an image and to convert it into a base64 string. The image can be in jpeg, gif, and png format.
Base64 is an encoding algorithm that allows converting any characters into an alphabet which consists of Latin letters, digits, plus, and slash. Due to this algorithm, even Chinese characters, emojis, and images can be converted into a “readable” string.
In computer science, Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. The term Base64 originates from a specific MIME content transfer encoding. Each Base64 digit represents exactly 6 bits of data. Three 8-bit bytes (i.e., a total of 24 bits) can, therefore, be represented by four 6-bit Base64 digits.
Common to all binary-to-text encoding schemes, Base64 is designed to carry data stored in binary formats across channels that only reliably support text content. Base64 is particularly prevalent on the World Wide Web where its uses include the ability to embed image files or other binary assets inside textual assets such as HTML and CSS files. (Wikipedia)
Initially, the algorithm was named “printable encoding” and only in June 1992, RFC 1341 defines it as “Base64”. The 64 characters represent the 64 place-values for the base varies between implementations.
The history of the Base64 algorithm started when, in the past, engineers argued over how many bits should be in a byte. Some decades ago, seven-bit, six-bit, and three-bit bytes were used. But when the eight-bit byte approved as standard many systems used old standards and did not support the new one. Some problems occurred. For example, a mail server may discard the eighth bit when sending emails or they could only send text, but not images, videos, archives, etc.. So a new algorithm was developed to solve this problem - Base64.
Base64 is most commonly used to encode binary data such as images, or sound files for embedding into HTML, CSS, EML, and other text documents. In addition, Base64 is used to encode data that may be unsupported or damaged during transfer, storage, or output. Here are some of the applications of the algorithm:
- Attach files when sending emails
- Embed images in HTML or CSS via data URI
- Preserve raw bytes of cryptographic functions
- Output binary data as XML or JSON in API responses
- Save binary files to a database when BLOB is unavailable
When to use Base64 Image Maker?
Base64 does not show the images, thus the image will never be indexed by Google because it does not show up in the image search.
You can use the Base64 Image maker for not so important images that do not bring traffic, for example, social icons. Little icons such as Twitter, Google+, Facebook, etc. images are really small and have no need to be indexed. Those little icons never bring traffic.
It is best to use base64 encode only for tiny images. If you try to base64 larger images you will end up with a great deal of code in your HTML and lose out on the performance benefits. Many webpages have 8 or 12 social icons and there is no need to download them. So the Base64 is the best choice in this case!
Data URIs and Base64 encoding go hand-in-hand. Data URLs are a Uniform Resource Identifier scheme that allows you to include data items inline in a web page as if they were being referenced as external resources. Data URLs are a form of Uniform Resource Locators, although they do not in fact remotely locate anything. Instead, the resource data is contained within the URL string itself as a base64-encoded string. This saves the browser from having to make additional HTTP requests for the external resources, and can thus increase page loading speed.
Data URLs reduces the number of HTTP requests that the browser needs to make to display an HTML document. Minimizing the number of browser requests is an important part of optimizing web page loading times. So Data URLs can thus have beneficial effects on performance.
Data URLs can result in faster downloading for transferring small files.
Data transfers via TCP start slowly, and each external resource starts a new TCP connection to the server. The transfer speed may thus be held back by the overhead of TCP communication.
Less bandwidth usage.
Data URLs use less bandwidth whenever the overhead of encoding the data as a Data URL is smaller than the overhead of an HTTP request. For example, the required base64 encoding for an image 600 bytes long would be 800 bytes, so if an HTTP request required more than 200 bytes of overhead, the data URI would be more efficient.
Faster HTTPS.
HTTPS requests have much greater overhead than ordinary HTTP requests due to SSL encryption. If your website is served over HTTPS, providing resources via Data URLs can improve performance significantly.
How does a Data URL look?
A Data URL is a string that starts with data: followed by the MIME type format. For example, a PNG image has mime type image/png which is followed by a comma and then by the actual data.
Text is usually transferred in plain text, while binary data is usually base64 encoded.
Here is an example of how such Data URL will look like:
<img src="data:image/png,ABQCAIAAABtUGDWAA..." />
Here is how a base64 encoded Data URL looks like:
data:image/png;base64:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUh..." />
You can use the base64 encoded string in CSS. You can copy the string and put it into your code like this:
.example { background-image url('data:image/png;base64,iVBORw0KGgoAAAANSUh...'); }