Conversor y decodificador de imagen a Base64

Base64 es una forma de escribir datos binarios, como un archivo de imagen, usando solo 64 caracteres de texto seguros: letras, dígitos, el signo más y la barra. Cada tres bytes del archivo se convierten en cuatro caracteres de texto. Así el contenido binario puede pasar por sistemas que solo manejan texto, como JSON, los atributos HTML, los archivos CSS y algunos formatos de correo.

Un data URI envuelve ese texto con un encabezado corto que le dice al navegador qué contiene, por ejemplo data:image/png;base64, seguido del archivo codificado. Los navegadores pueden mostrarlo exactamente igual que un enlace a una imagen normal.

Cuándo insertar en línea

Al comparar Base64 con los enlaces a archivos de imagen, lo que se juega es el tamaño y la caché. El texto Base64 pesa cerca de un tercio más que el archivo original, y el navegador no puede guardarlo en caché por separado. Un archivo normal se descarga una vez y se reutiliza. Base64 brilla con imágenes muy pequeñas, donde ahorrar una solicitud extra importa más que unos cientos de bytes.

Agrega una imagen en la pestaña Imagen a Base64. La herramienta la lee en tu dispositivo, detecta su tipo real a partir de los bytes del archivo y muestra el tamaño original, el codificado y el aumento. Abajo hay cinco fragmentos listos con botones para copiar. Las cadenas muy largas se acortan en los recuadros para que todo vaya rápido, pero el botón de copiar siempre copia el texto completo.

También puedes descargar el data URI como archivo de texto, algo útil con cadenas muy largas o cuando tienes que enviarlas a un colega.

Formatos comunes

PNG a Base64 es el caso más común, porque los íconos y logotipos suelen ser archivos PNG con transparencia. JPG a Base64 funciona igual y va bien con fotos pequeñas como avatares. Los archivos SVG también se codifican; en SVG, el texto codificado para URL puede ser aún más ligero, pero Base64 es la opción más compatible.

En HTML

Para usar una imagen Base64 en HTML, pega el fragmento img en tu página. Ya incluye un texto alternativo basado en el nombre del archivo y el ancho y el alto, lo que ayuda a evitar saltos en el diseño. Edita el texto alternativo para que describa la imagen a los lectores de pantalla.

En CSS

Para una imagen de fondo Base64 en CSS, pega la regla background-image en tu hoja de estilos. Va bien con patrones e íconos pequeños. Deja las fotos grandes como archivos, porque insertarlas hace que toda la hoja de estilos tarde más en descargarse y procesarse.

Markdown y JSON

El fragmento Markdown funciona en muchos editores y herramientas de documentación que aceptan data URI. Para APIs y JSON, usa el fragmento de solo Base64, sin el encabezado data:, a menos que la documentación de la API pida un data URI completo.

Cambia a la pestaña Base64 a imagen y pega una cadena Base64 sin procesar o un data URI completo. La herramienta quita espacios y saltos de línea, acepta caracteres seguros para URL, agrega el relleno que falte, decodifica el texto y revisa los primeros bytes para reconocer el tipo real de imagen. Luego ves la imagen, sus dimensiones y su peso, y un botón de descarga con la extensión correcta.

Si el texto no es Base64 válido, está cortado o contiene otro tipo de archivo, un mensaje claro explica qué salió mal. Eso hace útil el decodificador para depurar respuestas de API, campos de bases de datos y el código fuente de correos.

Como regla general, inserta en línea las imágenes de menos de unos pocos kilobytes y deja todo lo demás como archivos. La herramienta te avisa cuando una imagen pesa más de 100 KB, porque insertarla haría pesado tu HTML o tu CSS. Para imágenes más grandes, comprímelas primero con nuestra herramienta para comprimir imágenes o conviértelas a WebP.

Base64 es una codificación, no un cifrado. Cualquiera puede decodificarlo, así que nunca lo uses como forma de ocultar o proteger una imagen.

Privacidad

La codificación y la decodificación ocurren por completo en tu navegador, con funciones integradas. No se sube ni se guarda nada, y la herramienta es gratis, ilimitada y no usa créditos de EnhancerPro.

¿Por qué mi cadena es tan larga?

Cada tres bytes se convierten en cuatro caracteres, así que una imagen de 30 KB se convierte en unos 40 000 caracteres. Es lo esperado. Si es demasiado larga para tu uso, reduce las dimensiones de la imagen o comprímela antes de codificarla.

Saltos de línea y correo

Algunos sistemas de correo cortan el Base64 en líneas de 76 caracteres. El decodificador ignora esos saltos de línea automáticamente, así que puedes pegar el texto cortado directamente.

Favicons e íconos

Insertar un favicon como data URI funciona en la mayoría de los navegadores, pero un favicon.ico real y archivos PNG son más fiables para marcadores y pantallas de inicio. Nuestro generador de favicon crea el juego completo.

Un logo en la firma de correo

Algunos clientes de correo bloquean las imágenes enlazadas hasta que el lector las permite, pero el soporte de los data URI insertados también varía. Para las firmas, un PNG pequeño enlazado y alojado en tu sitio suele ser la opción más fiable, y Base64 es un respaldo para sistemas que exigen todo en un solo bloque de HTML. En cualquier caso, mantén el logo por debajo de unos pocos kilobytes.

Marcadores de posición e imágenes de carga

Una versión diminuta y desenfocada de una foto codificada en Base64 puede aparecer al instante mientras carga la imagen completa. Reduce la imagen a unos 20 píxeles de ancho, codifícala y úsala como fondo detrás de la imagen real. Solo agrega unos cientos de bytes a la página.

Guardar imágenes en JSON

Algunas APIs y archivos de configuración aceptan imágenes como cadenas Base64. Usa el fragmento de solo Base64 y revisa en la documentación los límites de tamaño. Cuando recibas datos así, pégalos en el decodificador para confirmar el tipo y las dimensiones de la imagen antes de guardarla.

Pruebas y prototipos

Cuando compartes un prototipo rápido como un solo archivo HTML, insertar en línea las imágenes pequeñas hace que nada se rompa al mover o enviar el archivo por correo. Para todo lo que vaya a producción, vuelve a reemplazar las imágenes grandes insertadas por archivos normales para que los navegadores puedan guardarlas en caché.

Cómo saber qué contiene una cadena

El texto Base64 no da pistas sobre su contenido. Los primeros caracteres suelen sugerir el tipo, como iVBOR para PNG o /9j/ para JPEG, pero el decodificador es la forma fiable de saberlo. Lee la firma real del archivo en lugar de confiar en la etiqueta del data URI.

Lista de rendimiento

Antes de insertar una imagen en línea, hazte tres preguntas. ¿Es pequeña, idealmente de menos de unos pocos kilobytes? ¿Se usa en una sola página, de modo que la caché no ayudaría mucho? ¿Una solicitud extra haría notablemente más lenta la primera vista? Si las tres respuestas son sí, Base64 es buena opción. Si no, sirve un archivo normal en un formato moderno como WebP, define su ancho y su alto, y deja que el navegador lo guarde en caché para todas las páginas que lo usan. Así tu HTML queda ligero y tus páginas rápidas.

Convertir de ida y vuelta

Codificar y luego decodificar una imagen te devuelve exactamente los mismos bytes; Base64 no tiene pérdida. Por eso el decodificador es una forma rápida de confirmar que una cadena que copiaste está completa. Si la imagen decodificada está cortada o no se muestra, se perdió parte del texto al copiarlo, muchas veces al final, donde están los caracteres de relleno. Cópiala de nuevo desde la fuente y vuelve a decodificar. La herramienta te confirmará cuando esté completa.