Cómo usarla
- Elige Imagen → Base64 y selecciona un archivo de imagen, o elige Base64 → Imagen para hacer el proceso inverso.
- Selecciona el formato de salida que necesites: URL de datos, Base64 sin formato, una etiqueta img de HTML, una regla background-image de CSS o Markdown.
- Copia el resultado y pégalo en tu código, plantilla de correo o JSON.
- Para decodificar, pega una URL de datos o Base64 sin formato; podrás ver una vista previa de la imagen y descargarla.
Cómo funciona
Base64 representa datos binarios con 64 caracteres imprimibles, lo que permite incluir una imagen directamente en formatos de texto. Una URL de datos añade delante el tipo de medio, por ejemplo data:image/png;base64, seguido de los bytes codificados. Los navegadores aceptan URL de datos en cualquier lugar donde se permita una URL de imagen: en el atributo src de una etiqueta img, en un url() de CSS o en una referencia a una imagen SVG.
El texto codificado siempre ocupa aproximadamente un tercio más que el archivo original (4 caracteres por cada 3 bytes). Incluir iconos pequeños y marcadores de posición puede evitar una solicitud de red independiente, pero los datos incluidos no se pueden almacenar en caché por separado y se descargan de nuevo con cada página u hoja de estilos que los contiene. Por eso, rara vez resulta conveniente si ocupan más de unos pocos kilobytes. Muchos clientes de correo bloquean o eliminan las imágenes de URL de datos, así que pruébalas antes de usarlas en boletines.
El archivo se codifica byte por byte: no se vuelve a comprimir y se conservan los metadatos del archivo (como EXIF). Al decodificar, la herramienta acepta una URL de datos completa, Base64 sin formato, Base64 seguro para URL y texto copiado junto con un contenedor url(…) de CSS. El tipo de imagen se detecta a partir de los bytes decodificados, en lugar de confiar en la etiqueta.
Ejemplos
Icono pequeño en una hoja de estilos
Un icono PNG de 600 bytes se convierte en una cadena Base64 de 800 caracteres. La salida CSS genera una regla background-image que puedes pegar en una clase sin alojar un archivo aparte.
Imagen de una respuesta de API
Una API devuelve un campo JSON como "iVBORw0KGgoAAAANSUhEUg…". Pégalo en Base64 → Imagen para ver la imagen, comprobar su tamaño y descargarla como PNG.
Logotipo SVG en HTML
Al codificar un SVG se obtiene una URL data:image/svg+xml;base64 que funciona en una etiqueta img. En el caso de SVG, el código SVG sin comprimir suele ocupar menos que Base64, así que puedes incluir directamente el SVG.
Preguntas frecuentes
¿Por qué la versión Base64 ocupa más que mi imagen?
Base64 usa 4 caracteres de texto para almacenar 3 bytes, lo que añade aproximadamente un 33 %, más un pequeño extra por el prefijo de la URL de datos. La compresión Gzip o Brotli en un servidor web reduce la diferencia, pero no la elimina.
¿La codificación modifica o comprime la imagen?
No. Se codifican los bytes exactos del archivo, incluidos los metadatos. Para acortar la cadena, comprime o cambia el tamaño de la imagen antes.
¿Cuál es la diferencia entre una URL de datos y Base64 sin formato?
Base64 sin formato contiene únicamente los bytes codificados. Una URL de datos añade un prefijo, como data:image/jpeg;base64,, que indica al navegador qué tipo de archivo es para poder usarlo directamente como origen de una imagen.
¿Hay un límite de tamaño?
Aquí se pueden codificar archivos de hasta 10 MB. Las cadenas muy largas pueden ralentizar los campos de texto y los editores, y las URL de datos de ese tamaño no son prácticas en sitios web.
Privacidad
La codificación y la decodificación se realizan en tu navegador. La imagen y el texto Base64 no se suben, almacenan ni incluyen en las analíticas.