Conversores

Convertir imagen a Base64

De imagen a Base64 y de Base64 a imagen, con el data URI listo para CSS, HTML, Markdown o JSON.

Qué es y para qué sirve

Base64 es una manera de escribir un archivo cualquiera usando solo sesenta y cuatro caracteres corrientes: las letras, los números y los signos + y /. Sirve para meter algo binario, como una imagen, allí donde solo se admite texto: dentro de una hoja de estilos, de un HTML, de un JSON, de un correo o de una columna de base de datos. No cifra, no comprime y no protege nada; solo reescribe los mismos bytes de otra forma, y por eso el resultado ocupa siempre alrededor de un tercio más que el archivo original.

Lo que se pega en una página no suele ser el Base64 pelado, sino un data URI: la cadena que empieza por «data:image/png;base64,» y sigue con todo el contenido detrás. Esa cabecera es la que le dice al navegador qué está recibiendo, y es una URL como cualquier otra, solo que en lugar de apuntar a un archivo lo lleva dentro. Puesta en el src de una etiqueta img, en un url() de CSS o en un enlace de Markdown, la imagen aparece sin que el navegador tenga que pedir nada a ningún servidor.

Esta página hace los dos caminos. Hacia un lado convierte tus imágenes (PNG, JPG, GIF, WebP, AVIF, SVG, BMP o ICO) y te da el resultado ya escrito para donde vaya: el data URI a secas, el Base64 sin cabecera, la regla de CSS, la etiqueta de HTML, el enlace de Markdown o el campo de un JSON. Hacia el otro recupera la imagen a partir de lo que le pegues, sea un data URI entero, el Base64 suelto, el atributo src copiado de un HTML o el url() de una hoja de estilos.

La parte que suele faltar en estas herramientas es el criterio para saber cuándo usarlo. Incrustar un icono de tres kilobytes ahorra una petición al servidor y hace que aparezca a la vez que la página; incrustar una foto de dos megas la convierte en dos megas y pico de texto que se descargan enteros con cada visita, porque un data URI no se guarda en la caché por separado. Por eso aquí se ve siempre cuánto ocupa el resultado, se avisa cuando el tamaño desaconseja incrustar, y hay un paso opcional para encoger la imagen antes de convertirla.

Casos de uso

  • Meter un icono o un logotipo pequeño directamente en el CSS, sin un archivo aparte ni una petición más.
  • Incrustar imágenes en un correo HTML, donde no hay servidor propio que las sirva.
  • Guardar una imagen dentro de un JSON, un YAML o un archivo de configuración que viaja solo.
  • Ver qué imagen es un Base64 que ha aparecido en un registro, en una respuesta de API o en el código de una página.
  • Recuperar como archivo una imagen que solo tienes en forma de data URI.
  • Meter una firma o un sello escaneado en una plantilla de documento.
  • Guardar una foto pequeña en una base de datos o en el almacenamiento local del navegador.
  • Comprobar qué formato es realmente un Base64 cuya cabecera dice una cosa y sus bytes otra.
  • Preparar el juego de iconos de un proyecto y copiarlos todos de una vez como JSON o como reglas de CSS.
  • Pasar un SVG a data URI para usarlo de fondo en CSS, que es donde más se nota el ahorro.

Cómo se usa

  1. Arrastra las imágenes al recuadro, pégalas con Ctrl+V o elígelas con el botón. Puedes soltar varias a la vez.
  2. Si el resultado va a ir a una página, marca «Encoger la imagen antes de convertirla» y elige ancho, formato y calidad: es lo que decide si el data URI ocupa tres kilobytes o trescientos.
  3. Elige en qué formato lo quieres: data URI, Base64 a secas, CSS, HTML, Markdown o JSON.
  4. Copia el resultado o descárgalo como archivo de texto. Con varias imágenes, los botones de «Todas en JSON» y «Todas en CSS» las sacan de golpe.
  5. Para el camino contrario, pega abajo el data URI, el Base64 o el src que hayas copiado.
  6. Verás la imagen, su formato real, sus medidas y su peso, y podrás descargarla con la extensión que le corresponde.

Qué incluye Convertir imagen a Base64

  • Conversión de PNG, JPG, GIF, WebP, AVIF, SVG, BMP e ICO, de varias imágenes a la vez.
  • Entrada arrastrando, eligiendo el archivo o pegando con Ctrl+V, que va también con las capturas de pantalla.
  • Salida en seis formatos: data URI, Base64 a secas, regla de CSS, etiqueta HTML, enlace de Markdown y campo de JSON.
  • Copiado de todas las imágenes de golpe como objeto JSON o como reglas de CSS, para juegos de iconos.
  • Encogido opcional antes de convertir: ancho máximo, cambio a WebP, JPG o PNG y calidad ajustable.
  • Para los SVG, un data URI sin Base64 que ocupa entre un 20 % y un 30 % menos y encima se sigue leyendo.
  • Aviso, con el tamaño delante, de cuándo incrustar sale a cuenta y cuándo es mejor un archivo aparte.
  • Descodificación de cualquier cosa que pegues: data URI, Base64 pelado, el src de una etiqueta img, un url() de CSS, con comillas, partido en líneas o en Base64 para URL.
  • El formato se reconoce por los primeros bytes del archivo, no por lo que diga la cabecera, y se avisa cuando no coinciden.
  • Arreglo automático de lo que suele venir mal: espacios y saltos de línea de más, relleno de = que falta, caracteres - y _ del Base64 de URL.
  • Errores explicados: dónde está el carácter que no pinta nada, o por qué el texto parece cortado.
  • Detección de lo que no es una imagen: si lo que pegas resulta ser un PDF, un ZIP o texto, se dice.
  • Vista previa sobre cuadros para ver la transparencia, con medidas y peso reales.
  • Nada se sube a ningún servidor: la conversión ocurre entera en tu navegador.

Preguntas frecuentes

¿Se suben mis imágenes a algún servidor?
No. Los archivos se leen en tu propio navegador y todo el trabajo se hace ahí: esta página no tiene servidor al que enviarlos. Es lo que permite pasar por aquí una captura con datos de trabajo, un documento escaneado o el logotipo de un cliente sin que salga del equipo. Una vez cargada, la herramienta funciona incluso sin conexión.
¿Por qué el Base64 ocupa más que la imagen original?
Porque usa cuatro caracteres para escribir cada tres bytes, así que crece un 33 % de partida, más los caracteres de la cabecera. Base64 no es un formato de compresión: no reduce nada, solo reescribe los mismos bytes con un alfabeto que se puede meter en un texto. Si lo que quieres es que la imagen ocupe menos, lo que hay que hacer es comprimirla antes, y para eso está aquí el paso de encoger.
¿Cuándo merece la pena incrustar una imagen y cuándo no?
La frontera está más o menos en los diez kilobytes. Por debajo, incrustar ahorra una petición al servidor y evita el parpadeo de la imagen que llega tarde, que es justo lo que se busca con iconos y logotipos pequeños. Por encima, sale caro: el data URI viaja dentro del HTML o del CSS, así que se descarga entero cada vez que se pide esa página y el navegador no lo puede guardar en caché por su cuenta como haría con un archivo. Para fotos, siempre archivo aparte.
¿Qué es exactamente un data URI?
Una URL que en lugar de apuntar a un archivo lo lleva dentro. Tiene tres partes: el esquema «data:», el tipo de contenido con el aviso de que viene codificado («image/png;base64») y, tras la coma, el contenido. Se puede usar en cualquier sitio donde vaya una dirección: el src de una img, el url() de CSS, el href de un enlace o el src de un iframe. Lo entienden todos los navegadores desde hace muchos años.
He pegado un Base64 y dice que el formato no es el que pone la cabecera, ¿por qué?
Porque el formato se decide aquí mirando los primeros bytes del archivo, que son los que lo identifican de verdad, y no lo que anuncia la cabecera. Esa cabecera la escribe quien genera el texto y muy a menudo se queda vieja: alguien copió un ejemplo con «image/png», cambió la imagen por un JPEG y no tocó la cabecera. Hazle caso a los bytes, y si necesitas la cadena bien formada, el botón de copiar el data URI la devuelve con el tipo correcto.
¿Puedo pegar el Base64 partido en varias líneas?
Sí. Los saltos de línea y los espacios se quitan antes de descodificar, igual que las comillas de los extremos. También se admite el Base64 que usa - y _ en lugar de + y / (la variante pensada para las URL) y el que ha perdido los = del final. Lo único que no se puede arreglar es un texto cortado: si le faltan caracteres de en medio, la imagen no está entera y se avisa.
¿Para qué sirve encoger la imagen antes de convertirla?
Para que el resultado sea utilizable. El Base64 no comprime, así que el tamaño del data URI depende por entero del archivo que le des: una foto de móvil de cuatro megas se queda en un texto de cinco y medio, y eso no cabe en ningún sitio razonable. Bajando el ancho a lo que de verdad se ve en pantalla y pasando la imagen a WebP con una calidad del 80 %, esa misma foto se suele quedar en unas decenas de kilobytes. Ojo con una cosa: al redibujar la imagen se pierden sus metadatos, incluido el EXIF con la fecha y la posición, cosa que a veces es justo lo que interesa.
¿Por qué un SVG puede ir en un data URI sin Base64?
Porque un SVG ya es texto, y para meter texto en una URL basta con escapar los caracteres que darían problemas, sin cambiar el resto. Sale entre un 20 % y un 30 % más corto que pasarlo por Base64, y además se sigue leyendo y se puede editar a mano dentro del propio CSS. Cuando subes un SVG, aquí aparece esa opción aparte. Un detalle: dentro de un data URI conviene usar comillas simples en el SVG, y por eso se cambian solas.
¿El Base64 protege o esconde la imagen de alguna manera?
En absoluto, y conviene tenerlo claro. Es una transformación pública y reversible que cualquiera deshace en un segundo, como acabas de hacer tú en esta página. No cifra, no firma y no oculta: si lo que llevas dentro es un documento sensible, sigue siendo igual de legible para quien tenga el texto. Que parezca ilegible es solo un efecto óptico.
¿Sirve para archivos que no sean imágenes?
El Base64 vale para cualquier archivo, pero esta herramienta está pensada para imágenes: convierte imágenes y previsualiza imágenes. Si le pegas el Base64 de un PDF, de un ZIP o de un texto, lo descodifica igual y te dice qué es en realidad, aunque no lo podrá enseñar. La descarga también funciona, con la extensión que le corresponda.
¿Hay un límite de tamaño?
Aquí se admiten archivos de hasta 25 MB, más que de sobra para lo que tiene sentido incrustar. El límite de verdad lo ponen los sitios donde va a acabar el resultado: las hojas de estilo y los HTML muy grandes se vuelven lentos de procesar, muchos clientes de correo se atragantan con adjuntos incrustados de más de un mega y las direcciones largas se cortan en la barra del navegador. Si el data URI se te va de varios cientos de kilobytes, lo que quieres es un archivo aparte.
¿Los navegadores viejos entienden los data URI?
Sí, hace ya muchos años que sí, tanto en HTML como en CSS. Donde sí hay que ir con cuidado es en el correo: algunos clientes, con Outlook a la cabeza, bloquean o no pintan las imágenes incrustadas de esta forma. Si el destino es un correo que tiene que verse en todas partes, lo más seguro sigue siendo adjuntar la imagen y enlazarla con cid, o alojarla y enlazarla normal.

Privacidad

Convertir imagen a Base64 funciona íntegramente en tu navegador. No hay servidor detrás: los datos que introduces no se envían a ninguna parte y desaparecen al cerrar la pestaña.