Image to Base64 Converter with Tutorial
Base64 is an encoding algorithm that converts any characters, binary data, and even images or sound files into a readable string, which can be saved or transported over the network without data loss. Base64 is used to encode binary files such as images within scripts, to avoid depending on external files. Images encoded with Base64 can be embedded in HTML by using the <img> or <link> tag. This can help to increase the page load time for smaller images by saving the browser from making additional HTTP requests.
1. How to use base64 in Favicon?
The <link> tag has a src attribute and contains the Data URL of the image. A Data URL is composed of two parts, which are separated by a comma. The first part specifies a Base64 encoded image, and the second part specifies the Base64 encoded string of the image. Normally we use two sets of favicon: .ico and .png, and we can use base64 for both of these.
<link href='data:image/icon;base64,####################' rel='shortcut icon' type='icon'/>
<link href='data:image/x-icon;base64,####################' rel='icon' type='image/x-icon'/>
Simply replace #################### with the base64 output.
2. How to use base64 in HTML?
The <img> tag has a src attribute and contains the Data URL of the image. A Data URL is composed of two parts, which are separated by a comma. The first part specifies a Base64 encoded image, and the second part specifies the Base64 encoded string of the image. Add also an alt attribute for SEO purpose.
<img src="data:image/png;base64,####################" alt="SEO TEXT" />
Simply replace #################### with the base64 output.
3. How to use base64 in CSS?
URL has a src attribute and contains the Data URL of the image. A Data URL is composed of two parts, which are separated by a comma. The first part specifies a Base64 encoded image, and the second part specifies the Base64 encoded string of the image. If you know JavaScript, you can use easily too.
.class-name {
background: url(data:image/png;base64,####################);
}
Simply replace #################### with the base64 output.