I have been working on recreating a website to make it iPhone compliant. In doing this I have been investigating numerous ways to reduce calls to the server. In some demo code I had I saw an image load using a Base64 image. This intrigued me and I investigated this further.

I was able to convert all the navigational images in the site to Base64. This reduced the overall loading call count from 300 to 5. However, the CSS file was much larger. But even still, the overall load time was reduced by over 50%.

There are numerous advantages and disadvantages do using this technique. The first large one is browser support. Since I was targeting the iPhone, this method works fine. However, IE only supports this with v8 and limited support at that. Read more about the pros/cons here.

Now, the important question, "How do you get a Base64 image"? This is actually easier, with ColdFusion's assistance, then you would think. ColdFusion has built in functions to take an image and convert it to Base64. You can read an image in or create one from scratch.

view plain print about
1<cfscript>
2myImgVar = imageNew('', 100, 100, 'RGB', 'black');
3toBase64(myImgVar);
4
</cfscript>

This code would generate this:

I ended up making a "Image Bar Generator" to generate the images for me. I have cleaned up the app and put it up so others can use it. The generator utilizes imageUtils from Ben Nadal to create the gradient. Take a look at the source behind this app. You will see how Base64 images were used to create the image bars on the site.

Base64 Image Bar Generator

Till next time..

--Dave