Howto Base64 Images

March 19th, 2009

I've been embedded a lot of images into javascript blocks lately using Base64 encoding and I'm quite pleased with the results.

What does this mean? Let me explain: images (gifs, jpegs, pngs) are usually stored in binary format, and cannot be represented using textual characters. By encoding the file data into base64 format, it is possible to represent the image with textual characters. The file size is a little bigger, but for small images the difference isn't that great, and the text can be compressed.

What are the benefits? I'm doing this to simplify some web based software packages I've authored, managed, or use. I haven't done any testing, but I think that there may be performance benefits as well, due to reduced server requests for each image - only one request is needed for the javascript file which contains the base64 data.

How is it done? First the image needs to be converted into base64. I use a command line tool called, what else, base64. It goes like this:

base64 imagename.png

The result looks something like this:


To use this data in HTML, the image tag looks like this:

<img src="data:image/png;base64,iVBORw0KGgoA..." />
For my next post, I'll explain how I embed this data into javascript!
Yearly Indexes: 2003 2004 2006 2007 2008 2009 2010 2011 2012 2013 2015 2019 2020 2022