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".

¿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: 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.
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:
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.

<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Convertir imágenes en base 64</title>
</head>
<body>
<h3>Convertir imágenes en base 64</h3>

<?php
echo '<br /> El código del archivo es el siguiente:<br />';
echo '<textarea  onclick="this.select()" cols="64" rows="12" style="margin:8px 0 8px 0;padding:8px;background-color:#FFFFE0;width:90%;">';
$imagedata = file_get_contents("imagen.png");
echo base64_encode($imagedata);
echo '</textarea>';
?>

</body>
</html>    

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

<div style="border:4px solid #99CCFF;padding:10px;margin:6px 0 6px 0;">
<?php
$uploadedfileload="true";
$uploadedfile_size=$_FILES['uploadedfile'][size];
echo $_FILES[uploadedfile][name];
if ($_FILES[uploadedfile][size]>20000)
{$msg=$msg." El archivo es mayor que 20KB, debes reducirlo antes de subirlo<br />";
$uploadedfileload="false";}
if (!($_FILES[uploadedfile][type] =="image/pjpeg" OR $_FILES[uploadedfile][type] =="image/png" OR $_FILES[uploadedfile][type] =="image/jpeg" OR $_FILES[uploadedfile][type] =="image/x-icon" OR $_FILES[uploadedfile][type] =="image/gif"))
{$msg=$msg." Tu archivo tiene que ser JPG, JPEG, ICO, PNG o GIF. Otros archivos no son permitidos<br />";
$uploadedfileload="false";}
$file_name=$_FILES[uploadedfile][name];
$add="upload/$file_name";
if($uploadedfileload=="true"){
if(move_uploaded_file ($_FILES[uploadedfile][tmp_name], $add)){
echo " ha sido subido satisfactoriamente";
  echo "<img src='upload/$file_name' width='' height='' alt='' />";
}else{echo "Error al subir el archivo";}
}else{echo $msg;}
?>
<?php
echo '<br /> El código del archivo es el siguiente:<br />';
echo '<textarea  onclick="this.select()" cols="64" rows="4" style="margin:8px 0 8px 0;padding:4px;background-color:#FFFFE0;">';
$imagedata = file_get_contents("upload/$file_name");
echo base64_encode($imagedata);
echo '</textarea>';
?>
<div style="width:520px;border:1px solid black;padding:8px;margin:8px 0 8px 0;">
<form enctype="multipart/form-data" action="" method="post"><div>
<input name="uploadedfile" type="file" style="width:400px;" />
<input type="submit" value="Subir archivo" /></div>
</form>
</div>
</div>    

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:

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

Generadores de URL Base 64 en la web

A los siguientes sitios de internet, se puede subir una imagen para obtener su código en Base 64, para insertar en HTML.
✔ https://www.base64-image.de/
✔ https://base64.guru/

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.

Páginas en sitios externos con mas información

Paginas relacionadas en este sitio