Skip to content

Imagen a Base64 (y de vuelta)

Codifica cualquier imagen a una URI de datos, o pega una URI y ve la imagen.

Las URIs de datos Base64 te dejan incrustar una imagen en línea en HTML, CSS o JSON sin un archivo separado. Útil para pequeños iconos SVG, firmas de correo en línea, cargas útiles JWT que incluyen un avatar, o en cualquier lugar donde una solicitud de red sería más molestia de la que vale. La herramienta de abajo codifica o decodifica imágenes completamente en tu navegador usando las APIs FileReader y atob/btoa estándar.

Everything happens locally — the FileReader API runs entirely in your browser. No upload, no analytics on the file contents.

How to use

  1. Elige una dirección

    "Imagen → Base64" codifica un archivo que sueltas. "Base64 → Imagen" decodifica una URI de datos que pegas.

  2. Suelta o pega

    Arrastra un archivo sobre la zona de soltar (codificar), o pega la URI de datos en el área de texto (decodificar). Se aceptan archivos hasta 8 MB.

  3. Copia o guarda el resultado

    La salida codificada es una URI de datos completa lista para soltar en <img src="…">, CSS background-image: url(…), o JSON. La vista previa decodificada se representa debajo del campo de pegado.

Frequently asked questions

¿Se carga la imagen en algún lugar?
No. La conversión sucede en tu navegador vía la API FileReader — los bytes nunca salen de la página. Tampoco hay un evento de análisis que incluya el contenido del archivo.
¿Por qué la URI de datos es más grande que el archivo?
La codificación Base64 infla datos binarios aproximadamente un 33% (cada 3 bytes se convierten en 4 caracteres). Para una imagen de 100 KB, espera ~133 KB de texto. Ese es el costo de incrustar datos binarios en un contenedor de texto.
¿Cuándo debería incrustar una imagen en lugar de vincularla?
Cuando la imagen es pequeña (< 10 KB), se usa una sola vez, y una solicitud HTTP separada ralentizaría la representación crítica. Ejemplos: SVG de sección de héroe, logos de correo en línea, avatares incrustados en JWT. Más allá de ~10 KB, un archivo separado suele ser más rápido en general porque se puede almacenar en caché por separado.
¿Cuál es el tipo MIME para SVG?
`image/svg+xml`. El codificador lo lee del atributo `type` del archivo, que el navegador establece correctamente para formatos de imagen estándar.
¿Puedo codificar archivos que no sean imagen?
Este widget es solo imagen por diseño (y valida el prefijo de URI de datos al decodificar). Para binary → Base64 arbitrario ver /code/base64/, que maneja texto UTF-8 directamente.

About

¿Qué es una URI de datos?

Un esquema URI definido en RFC 2397 que incrusta el recurso en línea. `data:image/png;base64,iVBORw0KGgo...` declara el tipo MIME, dice que la carga útil está codificada en Base64 e incluye los bytes después de la coma. Los navegadores y la mayoría de analizadores lo aceptan en cualquier lugar donde esperaría una URL http(s) en contextos de imagen.

Velocidad de codificación

El `readAsDataURL` de FileReader es asincrónico y usa la implementación Base64 nativa del navegador. Espera menos de 100 ms incluso para archivos de varios MB; el cuello de botella está leyendo el archivo del disco, no la codificación en sí.

Sources & references

Authoritative references behind the math, constants, and tables on this page. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.