I am not assuming you’ve heard of it and have stumbled upon base64 just like I did. I was trying to make image and photo handling a little portable in one of my web apps when I happened to come across base64.
What is base64?
Base64 is a simple binary to text encoding scheme that can convert a given binary data into a string of ASCII characters. It is called base64 because the base or the radix of this scheme is 64. In easy words, there are a total of 64 different ASCII characters in this schema. They range from A-Z, a-z,0-9,+ and / that is a total of 26 +26 + 10 + 2 = 64. Here is a chart for the same.
Using Base64 in a web page
Using base64 in a web page is very easy just to use one of the images to base64 encoders like this one and you will get a string that can be used in place of the image.
You can use it in your HTML webpage with the following tag.
<img src=’data:image/jpg;base64,YOURBASE64STRINGHERE/>
That’s how easy it was to use base64 on a webpage. Just make sure
When & Where to use it.
One of the things you need to understand is that the base64 string is going to be really long to the point that usually the size of the actual images will be a lot smaller than the size of the base64 string. In my opinion, a base64 string should only be used in cases where it is just not possible to store a file. Otherwise, it should be avoided by all means.
Some of you might even be tempted to use the base64 images for portability but let me tell you that base64 is pretty heavy also, images converted to base64 do not get indexed on google, so this might affect SEO as well.
