Originally seen at: https://varvy.com/pagespeed/base64-images.html
Varvy is now Down and this Content is for Archive Purposes.

Base64 encoding images

Inlining images into HTML with base64

Many people are not aware that images can be inlined into html code. The method in which this is done is called base64 encoding.

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

What is Base64?

It is one of the oldest ways to encode things into html (first proposed in 1987!). It is a way of turning different types of data into a series of letters and numbers that is safe for HTML. One of those data types is images.

Base64 encoded images

You see that big image above? It is base64 encoded. You see those icons to the right? They are base64 encoded.

I have been using base64 images for varvy (this site) for years, and it is one of the main reasons my pages load so fast.

Using Base64

To turn an image into base64, you can use the tool I made for that purpose here – Base64 image encoder or just search for “base64 image encode” there are many tools out there.

How does Base64 help 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?

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 I use base64 on this site

As I mentioned above I use base64 a great deal. Every single page on this site uses base64 extensively.

Since I have used base64 for so long and with so many images, I learned how to balance SEO and performance issues.

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:

<!DOCTYPE html><html lang=”en-US” prefix=”og: http://ogp.me/ns#” xmlns:og=”http://opengraphprotocol.org/schema/” xmlns:fb=”http://www.facebook.com/2008/fbml” itemscope itemtype=”http://schema.org/Article”><head><meta name=viewport content=”width=device-width, initial-scale=1″>

<meta property=”og:image” content=”https://nbyte.com/pagespeed-images/base64-image.png”>

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

<meta property=”og:image” content=”https://nbyte.com/pagespeed-images/base64-image.png”>

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:

<img src=”example.png”>

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

<img src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB”>

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

The tool

To experiment with base64, please feel free to use my base64 image encoder tool

Leave a Comment