Conversor de Imagen a Base64

¿Qué es una Imagen Base64 (Data URI)?

<!-- The same 1×1 transparent PNG, four ways -->

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="pixel">

/* CSS */
.badge {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==");
}

<!-- Markdown -->
![pixel](data:image/png;base64,iVBORw0KGgo…)

// JSON
{ "mime": "image/png", "data": "iVBORw0KGgo…" }

Características principales

Ejemplos

transparent-1x1.png  (un PNG de 68 bytes)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

icon.svg

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…" alt="icon">

photo.jpg  (12 KB)

![photo](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ…)

Cómo convertir una imagen a Base64

1. 1

   Añade tu imagen

   Arrastra una imagen a la zona de soltar, haz clic para explorar, o pega desde el portapapeles con Ctrl+V / Cmd+V. PNG, JPG, GIF, WebP, SVG, ICO y BMP son todos compatibles y se codifican enteramente en tu navegador.

2. 2

   Elige un formato de salida

   Elige Data URI, Base64 en bruto, HTML , fondo CSS, Markdown o JSON en las pestañas. Consulta la barra de metadatos para ver el aumento de tamaño y la insignia de consejo para saber si merece la pena incrustar.

3. 3

   Copia o descarga

   Haz clic en Copiar para tomar el fragmento, o en Descargar para guardarlo como archivo. Para invertir el proceso, cambia a la pestaña Base64 → Imagen, pega una cadena y descarga la imagen reconstruida.

Errores comunes

data:base64,iVBORw0KGgo…
<!-- no MIME type — will not render -->

data:image/png;base64,iVBORw0KGgo…
<!-- correct: image/png -->

data:image/png;base64,iVBORw0KGgoAAAANS
UhEUgAAAAEAAAABCAYAAAA…
<!-- embedded newline breaks the attribute -->

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAA…
<!-- single unbroken line -->

…WjR9awAAAABJRU5ErkJggg
<!-- missing trailing == -->

…WjR9awAAAABJRU5ErkJggg==
<!-- complete with padding -->

/* 380 KB hero photo inlined into a global stylesheet */
.hero { background-image: url("data:image/jpeg;base64,/9j/…(½ MB of text)…"); }

/* Serve it as a cached file instead */
.hero { background-image: url("/img/hero.jpg"); }

Casos de uso comunes

Incrustar un logotipo o icono en CSS

Suelta un PNG o icono SVG pequeño, copia el fragmento background-image de CSS y pégalo en tu hoja de estilos para eliminar una solicitud HTTP de un recurso que rara vez cambia. Mantenlo por debajo de ~2 KB (observa la insignia verde) para que la hoja de estilos se mantenga ligera.

Incrustar imágenes en correo HTML

Los clientes de correo a menudo bloquean las imágenes remotas. Codifica tu logotipo como data URI y pega el elemento en la plantilla para que se renderice sin una solicitud al servidor. Pruébalo en distintos clientes — limita las incrustaciones a iconos pequeños, no fotos.

Markdown y READMEs autónomos

Cuando no puedes alojar una imagen — un issue de GitHub, un notebook, un documento sin conexión — la salida Markdown incrusta la imagen directamente en el archivo para que viaje con el texto. Ideal para diagramas pequeños e insignias.

Imágenes dentro de JSON o payloads de API

¿Necesitas enviar una miniatura dentro de un documento JSON o un archivo de configuración? La salida JSON te da un objeto { mime, data } que puedes colocar directamente, y el decodificador recupera la imagen en el otro extremo.

Depuración rápida de data URI

¿Encontraste un misterioso URI data: en una hoja de estilos o una respuesta de API? Pégalo en la pestaña Base64 → Imagen para ver qué es realmente, leer sus dimensiones reales y descargarlo como un archivo normal para inspeccionarlo de cerca.

Widgets y bookmarklets de un solo archivo

Los bookmarklets y los widgets incrustables deben ser autónomos sin dependencias externas. Incrustar sus iconos como Base64 mantiene todo en un único archivo que funciona sin importar dónde se coloque.

Detalles técnicos

Cómo funciona la codificación Base64

Base64 toma el flujo binario de la imagen de tres en tres bytes (24 bits) y lo divide en cuatro grupos de 6 bits, cada uno mapeado a un carácter del alfabeto de 64 símbolos. Cuando la longitud de la entrada no es múltiplo de tres, uno o dos caracteres de relleno = marcan el resto. Esta proporción de 3 a 4 es la razón por la que el texto codificado es aproximadamente un 33% mayor que la fuente. La herramienta calcula la longitud en bytes decodificada directamente a partir de la longitud de la cadena y el relleno, de modo que las cifras de tamaño que informa son exactas, no estimadas.

Detección de MIME y bytes mágicos

Cuando codificas un archivo, su tipo MIME proviene del objeto File del navegador. Cuando decodificas una cadena Base64 en bruto sin prefijo data:, la herramienta inspecciona los caracteres iniciales, que corresponden a los bytes mágicos de la imagen: iVBORw0KGgo para PNG, /9j/ para JPEG, R0lGOD para GIF, UklGR para WebP, y PHN2Zy o PD94bWw para SVG. Esto permite al decodificador reconstruir un data URI correcto y descargar con la extensión de archivo adecuada incluso cuando la entrada es solo la carga útil desnuda.

Procesamiento solo local

La codificación usa readAsDataURL de la API FileReader, que devuelve un data URI sintetizado enteramente en el navegador. La decodificación para descargar usa atob más un Uint8Array para reconstruir el binario, y luego un Blob y un object URL — de nuevo sin red de por medio. El resultado es una herramienta que puedes ejecutar sin conexión y en la que confiar con imágenes confidenciales, porque los bytes nunca salen de la página. Puedes verificar el comportamiento de cero solicitudes en las herramientas de desarrollador de tu navegador.

Buenas prácticas

Incrusta solo recursos pequeños y estables

El punto óptimo para Base64 son los recursos por debajo de ~2 KB que cambian rara vez y aparecen en pocas páginas — iconos, logotipos diminutos, sprites de interfaz. Por encima de ~10 KB, la penalización de tamaño y el caché perdido superan a la solicitud ahorrada, especialmente ahora que HTTP/2 hace que las solicitudes adicionales sean baratas. Deja que la insignia de consejo te guíe, y sirve las fotos y los gráficos grandes como archivos normales en caché.

Prefiere la codificación URL para SVG

SVG es texto, así que Base64 lo infla sin ganancia. Al incrustar SVG en CSS o HTML, codifica el marcado en URL en su lugar — suele ser más pequeño, sigue siendo legible para humanos y se comprime mejor con gzip/brotli. Reserva el SVG en Base64 para flujos de trabajo que lo requieran específicamente. Nuestro Codificador/Decodificador URL se encarga de la codificación con porcentajes.

Establece siempre el tipo MIME correcto

Un data URI solo se renderiza si su tipo MIME coincide con el contenido: image/png, image/jpeg, image/gif, image/webp, image/svg+xml. Un tipo incorrecto o ausente es la razón número uno por la que una imagen incrustada no se muestra. Cuando copias desde esta herramienta el tipo se establece por ti; si ensamblas los URI a mano, comprueba dos veces el prefijo.

Comprime antes de codificar

Como Base64 añade ~33% sobre el tamaño del archivo, reducir la fuente primero rinde el doble. Pasa las imágenes por nuestro Compresor de Imágenes — o expórtalas en las dimensiones adecuadas — antes de codificar, para que el data URI resultante sea lo más pequeño posible. Un PNG comprimido de 4 KB gana a un original de 40 KB tanto como archivo como incrustado.

Nunca confíes en Base64 para la privacidad

Base64 es trivialmente reversible y no ofrece protección. No lo uses para ocultar contenido de imagen sensible — cualquiera puede decodificarlo al instante, incluso con la pestaña de esta página. Si el contenido debe protegerse, usa controles de acceso reales y cifrado en el servidor, y sirve la imagen a través de un endpoint autenticado.

Preguntas frecuentes

¿Qué hace este conversor de Imagen a Base64?

Lee una imagen que sueltas, pegas o seleccionas y codifica sus bytes como una cadena Base64 — completamente dentro de tu navegador. Obtienes el Base64 en bruto, un data URI listo para usar (data:image/png;base64,…) y fragmentos para copiar y pegar en HTML , background-image de CSS, Markdown y JSON. Una barra de metadatos informa del tamaño del archivo original, el tamaño codificado, el porcentaje exacto de aumento (Base64 es aproximadamente un 33% mayor), las dimensiones en píxeles y el tipo MIME. No se sube nada: la codificación se ejecuta localmente mediante la API FileReader, por lo que la misma herramienta es segura para capturas de pantalla, recursos internos y material gráfico sin publicar. Para ir en sentido contrario, usa la pestaña Base64 → Imagen o nuestro decodificador de Base64 a Imagen.

¿Se suben mis imágenes a un servidor?

No. Cada paso ocurre del lado del cliente en tu navegador usando la API FileReader y la codificación de cadenas de JavaScript. Tu imagen nunca se transmite, nunca se almacena y nunca se registra. Puedes confirmarlo abriendo la pestaña Red de tu navegador — codificar una imagen no genera ninguna solicitud de red. Esto hace que la herramienta sea segura para material sensible: capturas de producto antes del lanzamiento, diagramas internos, recursos de clientes y cualquier cosa bajo acuerdo de confidencialidad. No hay límite de tamaño de archivo impuesto por un límite de subida, solo el límite práctico del tamaño de cadena Base64 que tu navegador y el sistema de destino pueden manejar cómodamente.

¿Cuánto agranda Base64 una imagen?

Base64 codifica cada 3 bytes de datos binarios como 4 caracteres ASCII, por lo que la cadena codificada es aproximadamente un 33% mayor que el archivo original (más algunos bytes de relleno y el prefijo data:). Un PNG de 9 KB se convierte en unos 12 KB de texto. Esta sobrecarga es la razón más importante para no codificar imágenes grandes en Base64: envías más bytes y, como la cadena queda incrustada en tu HTML o CSS, esos bytes se vuelven a descargar cada vez que el archivo que los contiene cambia y no se pueden almacenar en caché de forma independiente. La herramienta muestra el aumento exacto para tu archivo concreto en la barra de metadatos, para que decidas con cifras reales.

¿Cuándo debería usar una imagen en Base64 en lugar de un archivo normal?

Base64 (como data URI) encaja bien con recursos pequeños y que rara vez cambian, donde evitar una solicitud HTTP separada importa más que el caché: iconos y logotipos diminutos incrustados en CSS, imágenes en correos HTML (muchos clientes bloquean imágenes externas pero renderizan data URI), widgets o bookmarklets de un solo archivo que deben ser autónomos, hojas de sprites SVG e imágenes almacenadas dentro de payloads JSON/API. Una regla práctica: por debajo de unos 2 KB y usado en una o dos páginas, incrustar suele ganar. La insignia de consejo de esta herramienta codifica exactamente esa heurística — verde por debajo de 2 KB, ámbar hasta 10 KB, rojo por encima.

¿Cuándo NO debería usar imágenes en Base64?

Evita Base64 para cualquier cosa grande o reutilizada en varias páginas. Cuatro razones concretas: (1) el aumento de tamaño de ~33% significa más bytes por la red; (2) una imagen incrustada no se puede almacenar en caché por sí sola — se vuelve a descargar con cada cambio del HTML o CSS que la contiene y se repite en cada página que la incrusta; (3) decodificar un data URI grande consume CPU y batería, algo que se nota en móvil; y (4) pierdes las imágenes responsivas (srcset/sizes) y la carga diferida. Como HTTP/2 multiplexa muchas solicitudes pequeñas de forma barata, la razón original para incrustar — reducir el número de solicitudes — ya rara vez aplica. Para fotos, imágenes de héroe o cualquier cosa por encima de ~10 KB, un archivo normal en caché casi siempre carga más rápido. Si el objetivo es un archivo más pequeño, pásalo primero por nuestro Compresor de Imágenes.

¿Cómo uso la salida Base64 en HTML y CSS?

Para HTML, cambia a la pestaña HTML y pega el elemento generado: . Para CSS, usa la pestaña CSS, que envuelve el data URI en background-image: url("data:image/png;base64,…"). Ambos funcionan en cualquier lugar donde se acepte una URL — src de img, fondo CSS, mask-image, incluso etiquetas link de favicon. El esquema data: es compatible con todos los navegadores modernos. Una advertencia: los data URI muy largos en HTML en línea pueden dañar la legibilidad y, en CSS, inflar la hoja de estilos que se envía a cada visitante, así que reserva la incrustación para recursos realmente pequeños.

¿Qué formatos de imagen son compatibles?

PNG, JPEG/JPG, GIF (incluido el animado), WebP, SVG, ICO y BMP son todos compatibles, además de AVIF donde el navegador pueda decodificarlo. Como la herramienta codifica los bytes en bruto en lugar de volver a renderizar la imagen, los GIF animados siguen animados, los PNG transparentes conservan su canal alfa y los SVG siguen siendo totalmente escalables. El tipo MIME se lee del propio archivo y, cuando pegas Base64 en bruto en el decodificador, se infiere de los bytes mágicos de los datos. No hay conversión de formato durante la codificación — la salida representa exactamente el archivo que proporcionaste.

¿Por qué SVG es un caso especial?

SVG es texto XML, no binario, así que Base64 en realidad lo hace más grande y más difícil de leer sin ningún beneficio. Para incrustar SVG en CSS o HTML, codificar en URL el marcado (codificar con porcentajes un puñado de caracteres como #, <, > y comillas) suele ser más pequeño que Base64 y mantiene el código legible y compatible con gzip. Esta herramienta sigue ofreciendo salida SVG en Base64 porque algunos flujos de trabajo lo requieren, pero si estás optimizando CSS a mano, prefiere un data URI codificado en URL. Nuestro Codificador/Decodificador URL ayuda con ese enfoque.

¿Es Base64 lo mismo que el cifrado?

No. Base64 es una codificación, no un cifrado — es totalmente reversible por cualquiera, sin necesidad de clave. Existe para representar datos binarios usando un conjunto seguro de caracteres ASCII imprimibles, de modo que los datos sobrevivan al transporte a través de sistemas que solo manejan texto (HTML, JSON, cabeceras de correo, URLs). Cualquiera puede decodificar una cadena Base64 de vuelta a la imagen original en segundos, incluso con la pestaña Base64 → Imagen de aquí. Nunca trates Base64 como una forma de ocultar o proteger contenido de imagen sensible; no ofrece ninguna confidencialidad.

¿Puedo incrustar una imagen Base64 en un correo electrónico?

Sí, y es uno de los mejores usos de la técnica. Muchos clientes de correo bloquean por defecto las imágenes alojadas externamente por privacidad, lo que rompe los diseños que dependen de logotipos remotos. Incrustar imágenes pequeñas como data URI garantiza que se rendericen de inmediato sin una solicitud al servidor. Las desventajas: algunos clientes antiguos (en particular ciertas versiones de Outlook) tienen un soporte irregular de data URI, y las incrustaciones grandes inflan el tamaño del mensaje que cada destinatario descarga. Mantén las imágenes incrustadas pequeñas — logotipos e iconos, no fotografías — y pruébalas en tus clientes de destino.

¿Por qué no se renderiza mi imagen Base64?

Las causas más comunes: un tipo MIME ausente o incorrecto en el prefijo data: (usa image/png para PNG, image/jpeg para JPG, image/svg+xml para SVG), espacios en blanco o saltos de línea insertados accidentalmente en la cadena, una copia truncada que perdió el relleno final (= o ==), o pegar solo el Base64 en bruto sin el prefijo data:…;base64, donde se espera una URL. El decodificador de esta herramienta es tolerante — elimina los espacios en blanco, acepta entradas con o sin el prefijo e infiere el MIME de los bytes mágicos de la imagen — así que pegar tu cadena en la pestaña Base64 → Imagen es la forma más rápida de confirmar si los datos en sí son válidos.