De que se trata?

Por medio de Base64, un sistema de codificación, podemos transformar cualquier tipo de archivo a caracteres simples ( texto plano ). Esto resulta muy útil cuando no queremos crear por ejemplo multiples archivos de imagen para adjuntarlos.

Si conocen Stylish, una extension para firefox, se preguntaran como hacen los autores de un tema para que en un archivo de css vayan incluidas las imagenes. Pues… base64 es la solucion. Además es ideal para hostings restrictivos, pues lo que estas arhcivando es simple texto.

Estructura

La estructura basica que tiene un archivo codificado en base64 es la siguiente. El ejemplo es de un archivo png:

data:image/png;base64,MuChasLetrasyNum3r0s

Entonces… examinemos despacio cada uno de los componentes.

data:image/png
Nos indica que tipo de archivo estamos enlazando. Podemos reemplazar el “image/png” por el MIME type del tipo de archivo que vamos a usar. Una lista de MIME types esta disponible para que no te pierdas en esa parte.

Lo siguiente, base64, simplemente indica que el texto siguiente está codificado en base64.

MuChasLetrasyNum3r0s : Compone el archivo codificado en texto plano. Eso es lo divertido, lo que te voy a enseñar a continuacion

Codificar en Base64

Php tiene dos funciones nativas que nos pueden ser muy utiles en este aspecto: base64_encode y base64_decode

Entonces, sabiendo eso, solo nos queda crear una funcion sencilla para leer un archivo y convertirlo:

<?php
function codificarImagen ($imagen) {
	echo "data:image/png;base64,".base64_encode(file_get_contents($imagen));
};
codificarImagen("imagen.png");
?>

Lo anterior nos devuelve la imagen png convertida a base64. Fácil, no?

Usemos lo aprendido

Bueno, genial, tranforme mi linda imagen a un monton de numeros y letras raros. ¿Y?

La buena noticia es que no tienes que hacer nada mas. Simplemente usa tu supertexto para todo:

 Una imagen normal 
<img title="Imagen en Base64" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...." />

 Una imagen de fondo en css:
<style type="text/css">
div.imagen{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA....);
}
</style>

 Un css completo: 
<link href="data:text/css;base64,iVBORw0KGgoAAAANSUhEUgA.." rel="stylesheet" type="text/css" />

 Un js completo: 
<script src="data:text/javascript;base64,iVBORw0KGgoAAAANSUhEUgA..." type="text/javascript"></script>

Y creo que ya entendieron el mensaje.

Problemas?

Desafortunadamente, y como sucede normalmente con lo cool, ie6 no soporta la codificacion en Base64. Sin embargo, los otros browsers (los decentes, como Firefox, Opera, Safari, etc) si, e incluso hay hacks para que funcione en el “bendito”. Uno de los mejores es el siguiente:
Fix para Base64 en ie6, por Dean Edwards

Recomendaciones

Las imagenes y archivos aparte no son malos, de modo que usa esta tecnica cuando se justifique, no vayas a empezar a codificar todas tus imagenes XD (so, es decir que no abuses). Lo otro es que logicamente a archivos mayores, el tamaño de la cadena de texto generada es mayor. Y por ultimo, no siempre se gana tamaño al codificar una imagen: A veces (bueh, la verdad, no se si siempre) se gana tamaño al ser convertido en texto. Esperen comparativas U_U

Links

• Si no tienes php en tu maquina, usa este Conversor a Base64.
• Si quieres que vean tus cool imagenes en ie6, usa el Fix para Base64 en ie6, por Dean Edwards o la version sexy de este: Sexy Base64 fix para ie6
• Si quieres aprender de Base64, pues Base64

Un saludo