Hay mucho escrito sobre las ventajas de usar imágenes en Base64, y URLs data en general: Ahorran solicitudes al servidor, y por lo tanto aceleran la carga de la página. Pero por otra parte, hacen menos legible el código, así que hay que encontrar un equilibrio.

Pero ese no es el tema principal de este artículo, sino cómo conseguir transformar fácilmente (sin necesidad de servidor siquiera), las imágenes en base64.

La forma es fácil, y es con la API HTML5 window.FileReader.

Demo

Una forma fácil sería hacer algo como:

<input type="file" id="foto">

<script>(function(){

if( ! window.FileReader ) {
	return; // No soportado
}
var input = document.querySelector('#foto');
// Éste es el elemento mediante el que el usuario nos indica cuál es la imagen

// No hacen falta hacks para IE, ya que IE 7 y 8 ya se habrán caído con la condición anterior
input.addEventListener('change', function(e){
	// Cogemos el primer archivo
	var archivo = input.files[0],
		// Creamos la instancia de FileReader
		reader = new FileReader(),
		urlBase64;
	// Os esperábais algo más complicado?
	reader.onload = function(){
		urlBase64 = reader.result;
		// Hacer lo que se quiera con la url
	}
	reader.readAsDataUrl(file);
}, false);

})()
</script>

¿Fácil, no?

Para darle una utilidad, he construido una pequeña aplicación para que podáis transformar vuestras imágenes a Base64 (aunque en verdad podéis transformar cualquier tipo de archivo):

Demo