NorfiPC
NorfiPC » Posicionamiento web » Codificar imágenes en base 64

Como usar e insertar imágenes codificadas en base 64 en las páginas web



Como codificar imágenes y otros datos para impregnar 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. Códigos y ejemplos prácticos. Código para crear un generador en PHP y poder codificar tus propias imágenes en base 64.
Como usar e insertar imágenes codificadas en base 64 en las páginas web 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 impregnadas en el código HTML.
Esto ofrece la ventaja de acelerar la carga al disminuir las peticiones necesarias, además evita el uso de archivos externos.
Este método como veremos más adelante solo es factible en imágenes pequeñas, pero es otra opción a tener en cuenta y que se aplica perfectamente en algunas ocasiones.
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".
Todas las imágenes que se muestran en esta página consisten en un código de texto o sea están codificadas en base 64. Ninguna de ellas se carga, ni existen físicamente en el servidor.
Para comprobarlo mira el código fuente HTML.



¿Qué es "data" URL scheme?


"data" URL scheme es un protocolo que permite impregnar 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:
URL= "data: [ tipo ];base64,datos"
Donde tipo puede ser: text/plain, image/gif, image/jpeg, image/png, image/x-ico, 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: Favicon
✔ 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: Icono RSS
✔ Otro ejemplo, esta vez el icono de Facebook para compartir la página, pruébalo: Compartir en Facebook
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


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);
?>




Como usar PHP para codificar tus propias imágenes en base 64


Para los que no tienen conocimiento de PHP.
PHP es un lenguaje de programación que funciona del lado del servidor, es decir es necesario tener la página creada alojada en un servidor web, que puede estar en la red, pero también puede ser en el equipo local, ya sea instalando Apache o IIS (Internet Information Services, integrado en todas las instalaciones de Windows).
En las siguientes páginas podrás encontrar más información sobre estos servidores web:
Como instalar y configurar el servidor web Apache en Windows
Como instalar, configurar y usar el servidor IIS en Windows
Como instalar y configurar PHP en el servidor Apache en Windows
Es imprescindible que la pagina donde se inserte el código, aunque esté escrita en HTML, tenga la extensión de archivo: .PHP.



Código de ejemplo para crear una página para codificar en base 64


Con el siguiente código de ejemplo, se puede crear una página web que permite codificar las imágenes en base 64.
✔ Solo copia el código al Bloc de notas de Windows y guarda el archivo con cualquier nombre, pero con la extensión PHP.
✔ En la misma carpeta donde se encuentre la página creada, sitúa la imagen a convertir, debe tener el nombre "imagen.png" o especificar cualquier otro en el código de la página.

También tienes la opción de descargar una página de ejemplo, con el código anterior en el siguiente link.

Descargar Descargar página web para convertir a base 64



Como codificar las imágenes con un generador e insertarlas en la página


Anteriormente al comienzo de esta página, estaba incluido un formulario que permitía a los usuarios subir imágenes y generar el código necesario para insertarlo en una página.
Fue necesario retirarlo por cuestiones de seguridad del servidor, pero si te interesa puedes usar el siguiente código para crear tu propio generador.

Código para crear un generador para codificar una imagen en base 64


Los requisitos son guardar la página con la extensión .PHP y crear una carpeta de nombre : "upload" en el mismo directorio de la página.
Las imágenes pueden estar en los formatos JPG, JPEG, PNG, GIF o ICO, no deben sobrepasar los 20 KB.
Utilizar el generador es fácil, oprime el botón Examinar y busca la ubicación de la imagen en tu equipo, oprime el botón Subir archivo, finalmente da un clic en el cuadro, copia el código generado y pégalo en una etiqueta como la siguiente:
<img src="data:image/gif;base64,CODIGO" width="" height="" alt="" />

Inserta el código aquí
Internet Explorer a diferencia de otros navegadores requiere que en las etiquetas IMG donde se inserte el código, se especifique el ancho y la altura, si no se hace así no se mostrarán.

Dividir el código en bloques para elevar el rendimiento


Por ultimo para evadir las restricciones, aumentar la velocidad de carga y hacerla compatible con algunas aplicaciones que así lo requieren, es posible usar en PHP la función chunk_split para dividir los datos en bloques de 64 caracteres, en los casos que las imágenes sean mayores.
Utilízalo de la siguiente forma:
<?php
$imagedata = file_get_contents('foto.jpg');
$string = chunk_split(base64_encode($imagedata), 64, "\n");
echo $string; ?>

Ejemplo de imagen grande codificada en base 64


La imagen que se muestra a continuación se representa con ese método en esta página.
Ejemplo de imagen grande codificada en base 64
Todas las imágenes en esta página están insertadas in line, no se emplea para eso ningún archivo externo, para comprobarlo guárdala en tu equipo y ábrela offline que se mostrarán todas correctamente.

Agrega esta página en tus favoritas: Favoritos Guardar
Compártela en Facebook: Compartir en Facebook
Compártela en Twitter: Compartir en Twitter
Síguenos en Google+

Páginas en sitios externos con mas información


RFC 2397 - The "data" URL scheme
PHP: base64_encode - Manual

Paginas relacionadas en este sitio


¿Necesitas buscar algo en nuestro sitio? ¡Usa a Google!

 
 
Anterior |  Subir  | Siguiente