how does base-64 encoding boost up your webpage speed....how does it affect SEO?

How does Base64 help in boosting pagespeed?

The main benefit is that a webpage does not have to load an external image. Reducing the things a webpage has to load will naturally make that page faster.

Here is a webpage with two images. To load this page requires four things (html, css, first image, second image):

 

 

Here is the same webpage with base64 encoded images. To load this page requires only two things (html, css):

--------------------------------------------------------------------------------------------------------------------------

How does base64 affect SEO(search engine optimization)?

The main way base64 images affect seo is that the image will not be indexed by Google.
This means that the images that you base64 will not show up in Google image search, or any other search engine.

Then why use it?

 There are many non important images on a page that will not affect you or your traffic if they were not indexed.

The best example would be social icons.
All those little twitter, Google+, Facebook, etc. images are really small, and have no need to be indexed. You will never gain traffic from your tiny twitter icon.
In fact when you really look at the images on your page you may find many images that fall into this definition. Think about images that are just there for design like "bottom-left-corner.png" or "quotation-mark.jpg". Things like these are just not important to your SEO but are still slowing down your pages.

Many webpages have 8 or 12 social icons and each of those is an additional HTTP request that simply does not need to be downloaded at all if you use base64.