0 Embedding Base64 Images

This is a technique that I used on this blog a while back to embed some icons in a post because I didn't want them to be stored in my albums on Picasa. It worked well and I  just wanted to share how I did it. This technique allows you to embed an image in a web page without having to upload an image file.

I found a great online tool for making base64 encoded images http://www.base64-image.de/

Personally the first thing that I thought about was the pros and cons of using embedded images on my website. This is what I found out:

• Pros: 
• Quicker loading
• No file storage required
• No resource request

• Cons:
• Images can take up almost three times more storage space
• Images will not cache locally and 
• Your website can be seen as a spam site because many spam sites use base64 to force browsers to load images. (I have never run into this issue myself)

Using embedded images:

• In HTML:

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAiG0" />

• In CSS:

div.image{background-image:url(data:image/png;base64,iVBORw0KGgoAAAiG0);}

Using embedded images:

I recently learned that it is also possible to embed fonts as base64 as well. This is remarkably easy and they can be included in css just like images and the same pros and cons apply. For converting the fonts I have been using http://base64fonts.com as my tool of choice.

• Base64 font in CSS:

@font-face{font-family:"webfont";src:url(data:font/ttf;base64,
AAEAAAANAIAAAwBQRkZUTWSFw8QAAAZ0AAAAHE9TLzIH/RRrAAABWAAAAGBjbWFwAA/zzAAAAcgAAAFMAAAABGdhc3AAAAAQG)format('TrueType');}