Creating inline (embedded) PNG images
Sometimes it’s necessary, or nice, to be able to directly embed an image in code. Like a modern form of ASCII art, you then don’t have to distribute icons and images with your source, because the image is in the source itself. The method uses Base64 encoding. See the RFC for Data URI.
“Base64″ format used by MIME-encoded documents such as electronic mail messages with embedded images and audio files.
To convert a PNG (for example) image to Base64, you will need some utility. base64 is an open-source converter that does just this.
Do the configure, compile jig:
$ ./configure $ make $ sudo make install
Then encode your image:
base64 -e my_image.png my_image.png.base64
Open the my_image.png.base64 file in a text editor and then copy it into your code. An example is shown below, written in Javascript.
const png_image_src = 'data:image/png;base64,'+
'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAANbY1E9YMgAAABl0' +
'RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGAUExURcDYv1C8WdPrtIDAeWqk' +
'Oqnd2VLWaOX0x7ftwZzZlIjGxr7gxanLkdfu1FumybHSsJ3Cutbyx4S9fm2paMrq0Lfo1L/a' +
'o6PHiozL11aZJpnW2oG0ZLTcm5zjvovbvM3qtcror2q5vUaIRHLGZWWkR0aQGSR/BYy5baHY' +
'imrbd/z+/HO9bPb69m29xHy8c2OeMUGJPZDThZPPi3ivdGazzZbBgCuCEd3x2jaICs7ksqLZ' +
'mTp/N6zwtWu/YLDWvZHHeqLS0affzKfvsWDYpn7CvJHJh0+cSGWbY6PQka/Xkvj894W2a4DQ' +
'qIrDhF+hQ8fexJDN24PYgYGzWnXJy6zXpp3Fm5jCg37NdI++dWejWmCwVnSrT6nuyTuLELvh' +
'pV2gO6DSwI3qnd3wv6rQxK/fz1OZxrTvtaLim3rRr+bv5TuCN+jw557FiK7NlWzRkHDGhHLd' +
'fnHWmm2zx7Xe1m21zW65z9Ts0HTHaHrGb3vJb3yvVbTaxVGUTITLtV6w0////94DUpYAAACA' +
'dFJOU///////////////////////////////////////////////////////////////////' +
'////////////////////////////////////////////////////////////////////////' +
'//////////////////////////////8AOAVLZwAAAQxJREFUeNpiqAcCc87wcuVKTl4Qm6G+' +
'XstKOU6eu9ouxNbICySgZajBzluWUuzgkOyqpwMUsNJIEuQVYWUNkOCysxeqZzBXZk+z4RCV' +
'kiopquVUcPNn4JSRd4oRkZAwUSwsKPAQN2YIZ0pPFBUpNQnWZGNj0xOrYShPCtSUdeTTlXNm' +
'0WcUtjRgUE4Kz5Plq0vVzWAJkoy0zGKokDeU4+JjYWHRr+KJVhVTYjDylMn34WPJzeXhiRBX' +
'sXBnKIti0tZW1M9VV/eWlg6LV2Oo943wZHaR5BEXz/EOUzHTYajXEfZWSJBUVY2NN1UxywR5' +
'TsfYIFRAQIDfws8sG+xbICGsZG2tpKamBWQDBBgAU049f2kd9aAAAAAASUVORK5CYII=';
var my_link = document.createElement('a');
my_link.title = "Go to example.com"
my_image = document.createElement('img');
my_image.src = png_image_src;
route_image.border = 0;
my_link.href = "http://example.com";
my_link.appendChild(my_image);
document.body.insertBefore(my_link, document.body.lastChild);
My name is 
May 27th, 2006 at 7:17 am (#)
Nice explanation but how can i encode the png on windows any ideas
June 12th, 2006 at 2:54 pm (#)
With so many errors, it’s amazing that you even tested this, not to mention it won’t work pre-IE7
June 16th, 2006 at 7:01 am (#)
Peter - I’m not sure I understand what you mean?
This project was a Firefox Plugin/Greasemonkey Script, GreaseRoute, - which obviously won’t work on IE anyways.
Sorry I didn’t specify that in the how-to.
July 9th, 2006 at 8:58 am (#)
Obi, the link to the program base64 is what you want. The page has a downloadable zip with a windows executable.