What is Base 64 encoding and why you may want to encode your images?
In programming, Base64 is a group of binary-to-text encoding schemes that represent binary data more specifically, a sequence of 8-bit bytes. Basically Base-64 encoding is a way of encoding arbitrary binary data in ASCII text. So this is a handy tool to include binary files in our HTML code.
Why this is good for the web developers?
Base-64 encoding is a way of taking binary data and turning it into text so that it's more easily transmitted in things like emails, HTML form data and HTML files sent to the end-users.
Can you include Base-64 in your HTML pages?
Yes, you can encode text and binary files like images to show it in your HTML pages.
When and why you may need to encode images into Base-64?
If you want to make your HTML pages portable and dependence-less (having no links to images) you can encode your images into Base-64 and you will have only one HTML file so all the images will be included in the HTML file itself.
But remember, encoding any file into Base-64 will make the file size about 33% larger.
So what kind of files are good to be included into your HTML?
Basically small images, SVG icons and any kind of small files so this won't impact the loading speed of the HTML file. Well, SVG icons you may include as <svg> tag itself so if it did not break your code then including the SVG code itself is more recommended.
If you need to include SVG into your CSS and this breaks your code you may use the tool from our website to safely convert your SVG code for use in CSS.
What files you shouldn't encode and include into your web pages?
Basically it is not recommended to encode and include large files into your HTML since this kind of encoding makes the file bigger (~33% larger) thus making loading of your pages slower. If you have a lot of images in your web page and want to optimize them, then it is recommended to converted them into the WEBP format which is a great way to reduce your image size without visible impact on image quality.
How an image tag will look like being encoded into Base64?
Below is an example of an icon encoded into Base64 and included as source src of an img tag:<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgACC..." alt="Heart">
What are the use case for the images encoded into Base-64?
Base64 images are very useful and here are only some case you may use Base64 images:
- Documentations
- CSS stylesheets
- Website favicons
- HTML files attached in emails
- Online tickets (such as QR-codes)
- And a lot more...
What browsers do support the Base-64 image encoding?
Well, all the modern browsers support this kind of encoding so you have nothing to worry about. The old versions of Internet Explorer will not support Base64 images but the usage of IE is below 1% so you can use Base64 worry-free and make sure it's supported by the browsers.
However, do not use Base-64 images in your emails as most of email providers may not support it (via web interface) and most of the email clients may not display Base64 images too. So in this case you can still use image source linking as you do by default.
How to convert images into Base-64 format?
Simply use our online tool for that! Our web-based free tool will let you convert images like bmp, gif, ico, jpg, jpeg, jfif, png, svg & webp into Base-64 easily and will show ready to copy/paste code as raw source like data:image/png;base64, CSS background i.e. background-image and image img tag.
Start converting your images into Base-64 now freetools.dev/base64img
What are your thoughts about Base-64 images?
Share your ideas in comments and let us know if and when do you use Base64 images!
Found this post useful?
Share this page with your friends in your favorite social network by using Share Article button below!
