Convertir Imagen a Base64 Online

3 de Octubre - en HTML/CSS

Codificar una imagen a Base64 es una técnica muy utilizada, para la inclusión directa de imágenes pequeñas en las hojas de estilo CSS o en las etiquetas <IMG>, como texto plano, esto disminuye las peticiones realizadas al servidor en la carga de una página web, optimizando para una carga más rápida.

¿En qué consiste codificar una imagen a Base64?

Una imagen está conformada por una serie de Bytes los cuales no son legibles como texto común, cuando codificamos dicha imagen a Base64 (El cual es un sistema de numeración posicional, conformado por 64 caracteres legibles), estos bytes son cortados y traducidos a un carácter equivalente, por lo tanto la salida de una imagen será texto plano.

Al ser texto legible, podremos incluirlo directamente en una etiqueta <IMG> de HTML o en una hoja de estilos CSS, en vez de la ruta de la imagen como lo haríamos normalmente, pero indicando que la imagen esta codificada. De esta forma el navegador web al leer el texto realizaría la decodificación de la imagen para convertirla a Bytes nuevamente y poder ser utilizada.

¿Qué beneficios conlleva?

Cuando incluimos una imagen en una página web mediante una URL, el navegador tiene que solicitar al servidor la imagen mediante una nueva petición, la cual requiere de tiempo extra, al incluir la imagen directamente en el archivo, eliminamos esta petición extra, lo cual hará que la página demore menos tiempo en cargar.

¿Cuándo es conveniente utilizar esta técnica?

La codificación a Base64 incrementa el tamaño de los archivos en un 33%, además de requerir un tiempo de procesamiento extra por parte del navegador al tener que decodificar los archivos.

Tomando esto en consideración esta técnica solo es conveniente utilizarla en imágenes pequeñas como lo son el logo de la página, los iconos de navegación y alguna otra imagen pequeña, en donde el peso y tiempo de procesamiento extra es compensado por el de reducir peticiones al servidor.

No se recomienda usar esta técnica con imágenes grandes, o mayores a 10kb.

Como codificar una imagen a Base64 de forma Online

Existen varios programas tanto de escritorio como para servidores, para la codificación de imágenes, en este tutorial utilizaremos una herramienta online, ingresaremos al siguiente enlace:

Codificar Una Imagen a Base64

Para este ejemplo convertiremos el logo de una página web, el cual normalmente se cargaría en el documento HTML mediante su URL:

<-- Mostrando el logo de una pagina web -->
<img src="logo.png" heigth="300" width="100">

La interfaz de la herramienta es muy sencilla, en la podremos agregar las imágenes a codificar mediante el botón de Agregar o arrastrándolas al cuadro indicado.

Convertir  Imagen a Base64

 

Una vez que la imagen se haya cargado, aparecerán dos botones, solo basta con copiar el texto generado mediante el botón Copiar (En caso de usar Safari, tendremos que copiar de forma manual el texto, mediante el botón “Ver Código”).

Codificar imagen a base64

 

Como utilizar el código generado

Tenemos dos formas para mostrar la imagen:

1.- La primera consiste en sustituir la url de la imagen en la etiqueta <IMG> por el código en Base64, de la siguiente manera:

<-- Sustituimos la URL de la imagen por el codigo de la imagen en Bse64 -->

<img src="url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALs...Lyfw9tdHoLwKSaAAAAAElFTkSuQmCC')" heigth="300" width="100">

Este método no es recomendado debido a que esto solo incrementaríamos el tamaño del archivo HTML, y siendo que estos no son cacheados por los navegadores (de forma predeterminada), este peso extra se tendría que estar transfiriendo cada vez que se solicitara la página.

 

2.- La segunda y más recomendable es cargar la imagen en un contenedor <DIV> asignando como fondo la imagen en Base64 mediante estilos CSS. Considerando que las hojas de estilos CSS son cacheadas por los navegadores web, esta solo se tendría que descargar una vez, y poder mostrarse en todas las páginas que hagan uso de ella.

/* Hoja de estilos CSS */

/* definimos la clase "logo", la cual mostrara el logo en pantalla */
.logo{
   /* Definimos el tamaño de la imagen */
   heigth:300;
   width:100;
   margin: 0;
   padding: 0;
   /* Utilizaremos la propiedad background para mostrar la imagen */
   background: url('data:image/png;base64,iVBORw...Lyfw9tdHoLwKSaAAAAAElFTkSuQmCC');
}
<-- Documento HTML -->

<-- Insertaresmos un contendor DIV, al cual le asignaremos la clase logo-->
<div class="logo"></div>

 

Consideraciones finales:

  • La codificación a Base64 aumenta en un 33% el peso de las imágenes.
  • Algunos navegadores restringen el tamaño máximo de la imagen a decodificar.
  • Si se van a codificar muchas imágenes pequeñas, es más recomendable utilizar esta técnica en conjunta con la de Sprites CSS.
Etiquetas
HTML/CSS
Compartir