LinuxParty

Codificar imágenes y otros datos para incluirlos en el código HTML de las páginas web, evitando el uso de archivos externos y logrando más velocidad en la carga de las mismas.

En la habitual tarea de optimizar las páginas web y hacerlas más rápidas, en ocasiones podemos emplear la opción de utilizar imágenes inline, es decir insertadas en el código HTML.

Para lograrlo se utiliza la inclusión de datos en la URL ("data" URL scheme), conocido de forma popular como imágenes codificadas en "base 64".

¿Qué es "data" URL scheme?

"data" URL scheme es un protocolo que permite incluir diferentes tipos de datos inline, en las páginas de internet como si se tratara de una URL que hiciera referencias a datos externos.
La sintaxis es la siguiente:

Donde tipo puede ser: text/plain, image/gif, image/jpeg, image/png, image/x-icon, etc.
El tipo de archivo puede ser omitido en este caso se utilizara de forma predeterminada text/plain;charset=US-ASCII.

Pero ¿qué es base 64?

Base 64 es un tipo de codificación diseñado para que datos binarios sobrepasen capas de transporte que no son de 8-bits. La información codificada con este sistema dará como resultado una secuencia de letras, que constituye un archivo y puede ser decodificado y mostrado correctamente por cualquier navegador web.

Ejemplos de datos codificados en base 64

Por ejemplo sería posible especificar como una URL un texto como "Esta es la nota de esta página", de la siguiente forma, (sin uso práctico alguno):

<a href="data:;base64,RXN0YSBlcyBsYSBub3RhIGRlIGVzdGEgcOFnaW5h">Vinculo</a>

El uso más práctico y viable de este sistema, es el de impregnar pequeñas imágenes como faviconos, fotos, logotipos, etc, puede ser muy útil al crear páginas sencillas, que sea necesario que consten de un solo archivo o sea no necesiten archivos externos auxiliares, de esta forma se acelera la carga de la página al no ser necesaria peticiones adicionales.

✔ Un ejemplo de cómo mostrar el favicon de este sitio codificado en base 64:
✔ Otro ejemplo, para crear un vínculo al RSS de este sitio codificando el icono en base 64, quedaría de la siguiente forma, prúebalo:
✔ Otro ejemplo, esta vez el icono de Facebook para compartir la página, pruébalo:

La gran desventaja de utilizar este método es que lógicamente aumenta el tamaño de las páginas web, incluso aumenta en un 33% el tamaño de la imagen codificada.

Por ejemplo al insertar una imagen codificada en base 64 cuyo tamaño original es de 8KB consumiría alrededor de 11 o 12Kb adicional al resto del contenido de la página.

Por otra parte los navegadores tienen limitaciones de la cantidad de caracteres que son posibles de utilizar.
No obstante las limitaciones siempre hay ocasiones en el que su uso nos aporte beneficios, en ese caso será necesario codificar previamente la imagen.

Como codificar una imagen en base 64

Si tienes Linux, es super fácil, bastará escribir desde la consola:

base64 fichero-con-imagen-a-codificar.extensión

Y nos mostrará una extensa cadena, que sólo tendremos que incluir, por ejemplo:

Por ejmplo...

Cogemos la pequeña imagen de LinuxParty que está en , la descargamos... y hacemos...

[javier@localhost Descargas]$ base64 rss-image.png 
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

La cadena codificada en base64. es todo ese "churro" de letras... La incluiiremos en nuestro HTML de la siguiente manera...

<img src="data:image/png;base64,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">

Y se verá igual que la imagen insertada, así:

Si no tenemos en Linux, también lo podemos hacer con PHP, codificar un archivo es algo sencillo, ya que PHP incluye una librería que permite la conversión en base64 de la siguiente forma:

string base64_encode (cadena o datos)

• Por ejemplo para codificar una cadena de texto utiliza el siguiente código:

<?php
$str = "Cadena a codificar";
echo base64_encode($str);
?>

El resultado del ejemplo anterior seria:
Q2FkZW5hIGEgY29kaWZpY2Fy

• Para codificar una imagen es algo sencillo, solo es necesario un servidor que tenga soporte de PHP, en ese caso solo es necesario insertar en una página las siguientes líneas:

<?php
$imagedata = file_get_contents("imagen");
echo base64_encode($imagedata);
?>

O también

Por ejemplo... creanos el fichero cod.php y lo ejecutamos desde la línea de comandos

<?php
$imagedata = file_get_contents('/home/javier/Descargas/rss-image.png');
 $string = chunk_split(base64_encode($imagedata), 64, "\n");
 echo $string; 
?>

Lo ejecutamos desde la línea de comandos y ...

[javier@localhost Descargas]$ php cod.php 
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
TkSuQmCC

Ya tenemos el código listo para su inserción.

Espero que te haya gustado el artículo...