What is Base64?
It is Binary-to-text encoding scheme which can be used to convert data into text format so it can be easily transmitted via any mean i.e. email. You can also encode text into Base64, just like this shown on Wikipedia.
Base64 converts data into a URL friendly string consist of the “standard” alphabet uses A-Z, a-z, 0-9 and /,+ with = as a padding character.
How to use?
As you know it’s just an encoded version of your data, we just need an encoder to convert our data and the Internet is plenty of it. Here’s a list
If you want to add this in your website for more dynamic and on the go conversion. Here’s the list.
- Encoding in PHP
- Encoding/decoding in Node.JS
- Encoding in JAVA
- A working fiddle to in jQuery
- Encoder/Decoder for WordPress Text Only
After conversion, you need to embed the code into your img tag or CSS to display the image.
Let’s convert and use an image to Base64 for more clarity. I am using our logo icon image and convert it using the above-given tools.
<!-- the Base64 encoded image -->
<!-- I deleted the 90% of the code just for showcasing -->
<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACYCAYAAAAYwiAhAAAABGdBTUEAALGPC ...... ==' />
After applying the above code we got our image (in encoded format) like this. You can see the image code by inspecting it or in the page source code.
The same code we can use in CSS to add this as background for any element. Here’s how.
/* Using Base64 images with CSS */
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACYCAYAAAAYwiAh ...... ==';
As the image source is no longer an external file we need to insert the encoded code into the src or url() , just like we put file reference.
Where to use?
As you just learned how to encode your images and text in Base64 format. You can use encoded Images in your website which can help you in a faster website. Encoded Images saves you few HTTP requests which leads to a faster loading website. But stay here for a moment! There are some drawbacks:
- It is only good for small Images
- Encoded images are not indexed by google
- It won’t work for IE6,7 and partially for IE8 (max 32KB)
- It actually increased the size if you are not compressing – See size comparison and few more use-case
Yeah, you are right after so many issues why someone needs to use it.
Why use Base64?
For fast websites, yes if used right it can increase the performance and speed of your website. And this only reason is pretty convincing to use encoding. Let’s discuss the most common and best case to use Base64 encoding for your next project.
A website is consist of so many images where some are important for SEO purpose and other are only for website appearance. Like carousel arrows, social icons, separator images (some people still use these), So here the Base64 comes into the picture. You can save all these HTTP calls by converting them into encoded images, As these images are not large in size so they won’t affect your website performance.
You can skip this if you use SVG and image sprites as the SVG native format support is far better and it also supports gzipping.
But after all these there is so much confusion on the Internet about this technique, You can post in comments – why or why not you use this?