This article will explain all about Base64 encoding of images and how it can be useful to you.
So what is Base64? According to Wikipedia, "Base64 is a group of similar binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation." Doesn't explain much, does it? Well, I'll make it simpler: Base64 encoding converts an image to a series of characters that can be used in HTML webpages.
By now, you would have figured out that the rest of the article is not going to be of much use to you if you don't know or if you don't do any HTML programming.
Base64 encoding works for many things other than images, but in this article, I'll be dealing with encoding of images only.
So why would anyone want to convert images into a string of characters? Base64 encoding has multiple applications. You might simply want a webpage to not make a reference to any assets on your computer to load an image. This is extremely effective for loading small low-quality images fast without putting extra stress on your server. Or you might just want to hide images in a HTML file that you are sharing with someone so the content of the images are not easily visible to them.(Tech savvy people will just inspect the code and pull out the images from any browser, but still...)
So let's get to business. How do we convert images to Base64? There are multiple websites that does this. http://jpillora.com/base64-encoder/ is a simple example. All you need to do is drag and drop images into the white area. The page spits out the Base64 in mere seconds.
Now all you need to do is copy and paste the code in the 'src' attribute of the <img> tag.
The ends results will look like this:
That's it!
NOTE: Internet Explorer 8 has a Base64 length limit of 32Kilobytes.(But who the hell uses IE8 these days? )
Hope that was useful to some of you!
By now, you would have figured out that the rest of the article is not going to be of much use to you if you don't know or if you don't do any HTML programming.
Base64 encoding works for many things other than images, but in this article, I'll be dealing with encoding of images only.
So why would anyone want to convert images into a string of characters? Base64 encoding has multiple applications. You might simply want a webpage to not make a reference to any assets on your computer to load an image. This is extremely effective for loading small low-quality images fast without putting extra stress on your server. Or you might just want to hide images in a HTML file that you are sharing with someone so the content of the images are not easily visible to them.(Tech savvy people will just inspect the code and pull out the images from any browser, but still...)
So let's get to business. How do we convert images to Base64? There are multiple websites that does this. http://jpillora.com/base64-encoder/ is a simple example. All you need to do is drag and drop images into the white area. The page spits out the Base64 in mere seconds.
Now all you need to do is copy and paste the code in the 'src' attribute of the <img> tag.
The ends results will look like this:
That's it!
NOTE: Internet Explorer 8 has a Base64 length limit of 32Kilobytes.(But who the hell uses IE8 these days? )
Hope that was useful to some of you!
No comments:
Post a Comment