Visit http://wphold.com for more information.

1. wphold.com http://wphold.com/what-is-base-64-image-encoding-and-how-to-use-it/
What is Base 64 Image Encoding and How to Use it
Do you Know? Reading this Post will take around 3 minutes...
In simple words, Base64 encoded image is a type of image which is in form of data. Seems awkward? It’s not. It is a
simple concept which you can easily grasp by going through the explanation below.
We all know, people are trying to make the web as fast as possible. Webmasters pay lot of effort in website speed
optimization. Faster page loading is essential to keep the visitors focused and to make their experience delightful.
When it comes to website load times, professional webmasters talk in milliseconds.
Table of Contents
What is Base64
Base64 is an endeavor to make web even faster. It is a data scheme that provides a way to include information such
as ‘images’ or ‘stylesheets’ in-line in webpages, instead of fetching as an independent separate resource.
When data is in-line, no separate request is required to be made to server. It eliminates the time required to
communicate with the server. It is also known as Uniform Resource Identifier scheme.
What Difference Does Base64 Makes?
Let me explain it with an example. You have a webpage with around 20 images. Each time the page loads, 20
communication instances occur with server to download those 20 images from the given URL. In this case, each
image is a separate and independent resource.
Now, if I convert all these 20 images into 20 pieces of Base64 encoded data pieces then I will be able to insert that
data directly inside the HTML of webpage. When the page will load, no external request is required to be made in
order to fetch the images or other static resources. All images will be rendered using the Base64 encoded data.
Though it will increase the existing size of HTML file but will eliminate time required in establishing 20 connections.
How to Encode an Image into Base64 Data
Consider I have following image which I want to encode in Base64. Without encoding, this image is rendered using
the traditional URL method.

2. Now let me encode it to Base64. There are various tools available on the internet for Base64 image encoding. I
recommend following.
Base64-Image
Base64 Image Encoder
The first tool mentioned above is the best. Image below is taken from their beta version which comes with new
features and new interface but it gives output in fewer formats as compared to the traditional version.

3. Upload your image file. After the image has uploaded, you will see results under the heading ‘Encoding’, as shown in
the image above. When you click on ‘show code’, a popup will appear containing the Base64 data. See in image
below.
Below you will see same thing being done using the classic version. The only difference is that you get lot of formats
to use. See following images for details.

5. Enough of demonstration, now it is your time to get started. Take any image and experiment. Before you start
implementing it to your site, you need to play around a bit so that you understand it completely.
Advantages and Disadvantages of Base64 Image Encoding
If you look around, there are very few people making use of Base64 image encoding. If it is really that useful then
why everyone is not using it and why the traditional method of fetching resources is NOT on its way out? There are
definitely various downsides to Base64 encoding!
Let me list down few advantages and disadvantages.
Advantages
Fewer server requests
Reduced page load times
Best suited for large number of small size images. For example, 300 images of around 2kb each. In this case
most of time is spent in making server requests so Base64 will considerably reduce page load times

6. Disadvantages
Increases size of HTML itself
Not possible to make use of CDN for static resources which are Base64 encoded
No direct method/technique is available to automatically convert resources on a website to Base64, hence
making it difficult to manage for larger sites
Not recommended for webpages with few images, that too of large size
One more thing..
You should know that the size of Base64 encoded data is larger than the actual image. So if you have few images to
load and you replace them with Base64 data, you’ll end up increasing your page size and also the page load time. It
is best suited for situations where you have lot of small images, as mentioned in advantages above.
Conclusion
You must learn to make use of Base64 image encoding but probably, you need not to implement on your
website/blog. Let me know in comments below what YOU think about it.