Imágenes base64 en HTML

En este post, podrán aprender cómo convertir imágenes a texto de base64 para su inclusión en firmas o documentos de tipo HTML. En estos, se integran letras que con el tag adecuado, se pueden visualizar como imágenes. Un ejemplo de una imagen en este formato es:

iQica2Bm1nUf9JvX2QyIiIeVgVmU13A9AInFJmUiMSxGPBXBk72R4pNR0TE22lUFy/9cQEwtMC
8RMTY1VSf5F8oNh0REW/9C9fVK2Buxn1ZE5E21/+Abn+8jBZ6EpH2Npn6xUsf8BCwfHGpiUioT
zDwgG5/HF9oRiIi4SoXrqsXzwPrF5adiHhbC3id6hP6HWCpIpMSETHySRoXL33ADNwXOBFpE6O
Axxl8Mv+wyKRERIxVLlxXLz4ADi4sOxHJbChu/4/ak3ge7m6MiEin2JjqhesaxXfQrtQipXYh

Aunque no lo crean de inicio, el texto de arriba representa una parte de una imagen. La imagen que escogí para mi prueba, no podía ser otra que la del logo del mejor grupo de Thrash Metal del mundo:

metallica

Esta imagen la quiero integrar en una firma de tipo HTML, entonces, debo convertirla al formato de base64, es decir, en texto.

La ventaja principal de manejar las imágenes en este formato, es que no se tienen qué tener solicitudes para traerlas desde algún sitio o cargarla desde un archivo, es decir, hace que mostrar imágenes, sea muy rápido.

La desventaja principal es que no se recomienda para manejar imágenes muy grandes, ya que la ventaja expuesta previamente, no sólo se pierde, sino que se convierte en un problema muy serio para cargar la página o la firma.

Pasemos entonces al tema principal de este post, vamos a convertir una imagen a base64.

En este caso, muestro cómo hacerlo con Firefox porque es lo que uso en mis computadoras; primero, hay que abrir la imagen con esta herramienta, en la siguiente imagen, se puede ver cómo ya tengo mi archivo que mostré en la parte de arriba:

imagenes_base64_01

Sobre dicho archivo de imagen, doy clic derecho del ratón y elijo abrirlo con Firefox:

imagenes_base64_02

Para que se vea como muestro a continuación:

imagenes_base64_03

En la imagen, con el clic derecho del ratón, se elige la opción Inspect Element en el menú flotante que aparece:

imagenes_base64_04

Con lo que se verá como sigue:

imagenes_base64_05

En la parte inferior izquierda se ve marcada en azul, la información relacionada con la imagen; sobre esta sección, se tiene qué dar clic derecho para elegir en el menú flotante que aparece, la opción Copy Image Data-URL como se muestra enseguida:

imagenes_base64_06

Con esta última acción, en el portapapeles del sistema operativo, se queda guardada la imagen ya como una cadena larga de caracteres ya listos para usarse en un archivo de tipo HTML. En este caso, lo he pegado en un archivo de texto simple:

imagenes_base64_07

Sin embargo, hasta que incluyo dicha imagen en el archivo HTML, es cuando toma ya una serie de colores de acuerdo a este tipo de archivos para facilidad de lectura en los editores de texto. Como se puede ver en la siguiente imagen, ya lo puse en un tag que delimita el tamaño que se mostrará cuando abra el archivo creado:

imagenes_base64_08

Después de guardar el archivo, ya sólo se tiene qué presionar la tecla Enter o con doble clic para abrirlo en el navegador de Internet por defecto, con esto, se verá como sigue:

imagenes_base64_09

De esta forma, ya tengo una firma que puedo integrar en algún correo.

Como se puede deducir, no sólo funciona para firmas esta información, también se pueden integrar imágenes en este tipo de archivos para que no se tenga qué abrir como tal un archivo de una imagen, sólo se tiene qué integrar en el mismo archivo HTML y el navegador hará el resto del trabajo.

Si la información de este post te ha sido de utilidad o quieres que agregue algo más, deja por favor un comentario, contestaré a la brevedad.

Anuncios

2 Responses to Imágenes base64 en HTML

  1. Carlos dice:

    Excelente aporte !! Gracias

  2. Orlando Olguín Olvera dice:

    Hola Carlos.

    Qué bueno que te haya gustado.

    Orlando.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: