BassedasTech

¿Imágenes en los códigos? Base64

Jonathan Bassedas
¿Imágenes en los códigos? Base64

¿Qué es Base64?

Tabla de contenido

  1. ¿Qué es Base64?
  2. ¿Qué es una imagen en Base64?
  3. Ventajas de utilizar imágenes en Base64
  4. Cómo convertir una imagen a Base64
  5. Cómo añadir una imagen en Base64 a un código HTML
  6. Cómo añadir una imagen en Base64 a un código CSS
  7. Cuándo es mejor evitar usar Base64 para imágenes
  8. Conclusión

¿Qué es Base64?

Base64 es un sistema de codificación que permite representar datos binarios (como imágenes, videos, o archivos) en una cadena de texto utilizando un conjunto de 64 caracteres. Estos caracteres incluyen letras mayúsculas, minúsculas, números y algunos símbolos, como el + y /. El propósito de esta codificación es hacer que los datos puedan ser manejados de manera segura en entornos que solo aceptan texto, como en HTML o en correos electrónicos.

Cuando codificas una imagen en Base64, transformas su representación binaria en una cadena de caracteres que puede ser incrustada directamente en un documento. De esta manera, puedes evitar enlaces externos o archivos adicionales, facilitando la gestión de pequeños recursos en tus proyectos.

¿Qué es una imagen en Base64?

Una imagen en Base64 no es más que la representación de la imagen en formato de texto. Al convertir una imagen a Base64, obtienes una cadena larga de caracteres que incluye toda la información visual de la imagen. Esta cadena se puede incrustar directamente en un archivo HTML o CSS, permitiendo que la imagen se cargue sin la necesidad de realizar una solicitud externa al servidor.

Por ejemplo, una imagen pequeña de 1×1 píxeles en formato PNG convertida a Base64 se vería algo así:

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAgEBAP1BSN0AAAAASUVORK5CYII=

Esta cadena puede ser utilizada en lugar de una URL en una etiqueta HTML <img>, haciendo que la imagen se renderice directamente desde el documento.

Ventajas de utilizar imágenes en Base64

Existen varios motivos por los que podrías querer usar imágenes en Base64 en tus proyectos:

  1. Facilidad para crear archivos independientes: Usando imágenes en Base64, puedes enviar todo el archivo en un solo documento HTML sin tener que depender de un archivo CSS o imágenes externas. Esto es especialmente útil en situaciones donde necesitas que todo el contenido esté en un solo archivo, como en archivos interactivos enviados por correo electrónico o para lectores de archivos en dispositivos móviles. Muchos lectores de archivos móviles no aceptan JavaScript y no buscarán URLs externas para cargar imágenes, por lo que incrustarlas en Base64 garantiza que todo el contenido visual esté accesible directamente desde el archivo HTML.
  2. Portabilidad del código: Incrustar las imágenes en el propio archivo hace que el código sea más portátil. No necesitas incluir archivos de imágenes separados al enviar o compartir tu código.
  3. Evitar problemas de enlaces rotos: Con Base64, no necesitas preocuparte por enlaces rotos a imágenes externas, ya que la imagen está incrustada directamente en el código.
  4. Uso en emails y documentos: Muchas veces, al enviar correos electrónicos HTML, los enlaces a imágenes externas pueden ser bloqueados. Incrustar imágenes en Base64 es una forma de asegurar que las imágenes se muestren correctamente en esos contextos.

Cómo convertir una imagen a Base64

Existen diversas maneras de convertir una imagen a Base64. A continuación, te explico algunas de las opciones más comunes:

1. Utilizar herramientas online

Puedes usar herramientas en línea que convierten una imagen a Base64 de manera rápida. Simplemente subes tu imagen y la herramienta generará el código Base64 correspondiente.

Algunos ejemplos de herramientas son:

2. Uso de programas como Python

Si prefieres hacerlo de manera local, también puedes usar lenguajes de programación como Python. Aquí te dejo un ejemplo de cómo hacerlo:

with open("imagen.png", "rb") as image_file:
    base64_string = base64.b64encode(image_file.read()).decode('utf-8')
    print(base64_string)

Este script lee una imagen llamada imagen.png, la convierte a Base64, y luego imprime el resultado.

3. Herramientas para desarrolladores (Browser)

Otra opción es usar las herramientas de desarrollo en el navegador. Por ejemplo, si utilizas Google Chrome, puedes abrir la consola de desarrollo, subir la imagen en la pestaña «Network», y convertirla a Base64 desde allí.

Cómo añadir una imagen en Base64 a un código HTML

Agregar una imagen en Base64 a un archivo HTML es bastante sencillo. Utilizas la etiqueta <img>, pero en lugar de vincular a un archivo externo, introduces la cadena Base64 directamente en el atributo src.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAgEBAP1BSN0AAAAASUVORK5CYII=" alt="Imagen en Base64">

Aquí, la estructura básica del valor src es:

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de imagen en Base64</title>
</head>
<body>
    <h1>Imagen en Base64</h1>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAgEBAP1BSN0AAAAASUVORK5CYII=" alt="Imagen en Base64">
</body>
</html>

Este código HTML mostrará una pequeña imagen de 1×1 píxel generada en Base64.

Cómo añadir una imagen en Base64 a un código CSS

Además de HTML, también puedes usar imágenes en Base64 directamente en tu código CSS, lo cual es útil cuando quieres establecer una imagen como fondo.

Uso en el background de CSS

body {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAgEBAP1BSN0AAAAASUVORK5CYII=');
}

Este código asignará la imagen Base64 como fondo de la página. Igual que en HTML, la estructura comienza con data:image/png;base64, seguida de la cadena Base64 de la imagen.

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo CSS Base64</title>
    <style>
        body {
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAgEBAP1BSN0AAAAASUVORK5CYII=');
        }
    </style>
</head>
<body>
    <h1>Fondo en Base64</h1>
</body>
</html>

En este ejemplo, el fondo de la página será una imagen en Base64.

Cuándo es mejor evitar usar Base64 para imágenes

Aunque incrustar imágenes en Base64 tiene muchas ventajas, no siempre es la mejor opción. Aquí te dejo algunos casos en los que sería mejor evitarlo:

  1. Imágenes grandes: Si bien Base64 es eficiente para imágenes pequeñas, cuando trabajas con imágenes grandes, la cadena de texto puede volverse extremadamente larga, lo que afecta la velocidad de carga de la página. Es preferible alojar las imágenes grandes en el servidor y referenciarlas en el código.
  2. Dificultad para mantener el código: Incrustar muchas imágenes en Base64 puede hacer que el código sea más difícil de mantener. Si necesitas realizar cambios en una imagen, tendrás que actualizar manualmente toda la cadena Base64.
  3. Impacto en SEO: Aunque esto depende del contexto, el uso excesivo de imágenes en Base64 podría tener un impacto en el rendimiento de la página y, por lo tanto, afectar la experiencia de usuario, algo que los motores de búsqueda como Google tienen en cuenta para el SEO.

Conclusión

Las imágenes en Base64 son una herramienta útil cuando necesitas reducir el número de solicitudes HTTP o cuando quieres hacer que tu código sea más portátil. Son especialmente útiles para imágenes pequeñas o en entornos como correos electrónicos donde los enlaces externos pueden estar bloqueados.

Sin embargo, hay que tener en cuenta que el uso de imágenes Base64 no es adecuado para todos los casos, ya que para archivos grandes puede afectar el rendimiento de la página y dificultar el mantenimiento del código. Utiliza esta técnica con moderación y en los contextos donde aporte mayor valor.

Con el conocimiento adecuado, ahora puedes integrar imágenes en Base64 en tus proyectos HTML y CSS de manera efectiva y con un mayor control sobre cómo se cargan y se gestionan en tu sitio o aplicación web.

Salir de la versión móvil