Base64 encoding images

Inlining images into HTML with base64

Base64 encoded images become part of the html and displays without loading anything instead of a web browser having to download the image.

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):

base64 affect SEO?

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.

Other considerations

It is best to only base64 encode tiny images. If you try to base64 larger images you will end up with a great deal of code in your html and lose out on the performance benefits.

How to get Google to index base64

As mentioned before, Google will not index base64 encoded images, so what am I talking about?

On every article of this site there is a large intro image. Each of them are base64 encoded, but each of them are also indexed by Google. How did I do that?

The way is to have a physical image file that is the same as the encoded one. You then upload that to your webhost and in the head section of your HTML use opengraph notation to point Google to that image.

Here is what the head of my html begins with for this page:

The first part of that mess of code is declaring opengraph, and the last part is declaring my image:

The end result of which is that my image is indeed indexed by Google.

Size issues

A 2k image file will result in 2.5 or 3k of base64 encoded data. However, if you are enabling compression (as you should be) it will end up at about the same size as the image file.

I would not recommend you use base64 encoding for an image larger than 5k.

How base64 is used

Example: Here is a typical image file in your html:

Replace the file location (in this case – example.png) with the src info from a base64 tool:

Now the source of your image is no longer an external file, it is instead the encoded data in the “src=” field.