Convertidor de imagen a Base64 (y de Base64 a imagen)

Qué es este convertidor de imagen a Base64

Base64 es una codificación que representa cualquier secuencia de bytes —el contenido binario de una imagen, por ejemplo— usando solo 64 caracteres ASCII imprimibles: las letras mayúsculas y minúsculas, los dígitos y dos símbolos más. Convertir una imagen a Base64 sirve para poder pegar ese binario dentro de un archivo de texto —HTML, CSS, JSON— sin que se corrompa por el camino.

Un data URI añade un prefijo con el tipo MIME delante de esa cadena, por ejemplo data:image/png;base64,iVBORw0KGgo…, de modo que el navegador sabe qué formato decodificar sin necesidad de una petición HTTP aparte: la imagen queda incrustada directamente en el HTML o la hoja de estilos que la usa.

Esta herramienta convierte imagen a Base64 y también Base64 a imagen en el sentido contrario: suelta o elige un archivo PNG, JPEG, GIF, WebP, BMP, SVG o ICO para obtener su Base64 en varios formatos listos para copiar, o pega un Base64 o data URI para recuperar la imagen y descargarla. Todo ocurre en tu navegador; ningún archivo se sube a ningún servidor.

Cómo usar el conversor

1. Elige el sentido de la conversión: en el selector de dirección, marca imagen a Base64 para codificar un archivo o Base64 a imagen para el camino contrario. En el primer modo, arrastra la imagen a la zona de arrastre o usa el botón elegir una imagen; acepta PNG, JPEG, GIF, WebP, BMP, SVG e ICO, con un límite de 10 MB.
2. Copia el resultado que necesites: el resultado aparece en cuatro salidas independientes —el Base64 en bruto, el data URI completo, una declaración CSS background y una etiqueta HTML img—, y un clic sobre cualquiera de ellas la copia al portapapeles. Debajo, el panel de tamaño muestra el nombre y tipo de archivo, los bytes originales, los caracteres de Base64, la sobrecarga y las dimensiones en píxeles.
3. Para el camino inverso, cambia a Base64 a imagen: pega en el cuadro de texto un data URI completo o solo la cadena Base64 —la herramienta identifica el formato por sus primeros bytes—, revisa la previsualización y pulsa descargar imagen. El botón vaciar borra todo para empezar de nuevo.

Cuándo conviene incrustar una imagen y cuándo no

Un data URI no se puede cachear por separado: forma parte del archivo HTML o CSS que lo contiene, así que el navegador lo vuelve a descargar cada vez que ese archivo cambia, aunque la imagen en sí no haya cambiado, y no se puede reaprovechar entre páginas distintas como sí ocurre con un archivo de imagen normal servido desde su propia URL.

Tampoco admite carga diferida ni entrega responsive: no hay forma de aplicarle carga perezosa ni de ofrecer variantes por tamaño de pantalla con srcset, porque no es un recurso independiente que el navegador pueda decidir cuándo pedir. Si se incrusta dentro de una hoja de estilos, además, queda dentro de un recurso que bloquea el renderizado, lo que retrasa el primer pintado de la página mientras el CSS se procesa entero antes de mostrar nada.

A eso se suma que el texto Base64 decodificado ocupa un tercio más que el binario original, tanto en memoria como en el propio archivo que hay que editar a mano cada vez que la imagen cambia.

La recomendación honesta: incrusta imágenes pequeñas, estáticas y que se necesiten siempre —un icono, un degradado de un píxel— y deja las fotografías y cualquier imagen que se repita entre páginas como archivos normales, con su propia URL cacheable.

El tamaño real: por qué la cifra del 33% no es la que importa

La aritmética de Base64 es exacta: toma los bytes de tres en tres y los reescribe como cuatro caracteres de un alfabeto de 64 símbolos, así que la longitud codificada es siempre 4 × redondeo-hacia-arriba(n / 3) caracteres para n bytes, comprobado para cada longitud entre 0 y 4.000. Cuando el número de bytes no es múltiplo de tres, el resultado se rellena con uno o dos signos =: 3 bytes dan 4 caracteres sin relleno, 4 bytes dan 8 caracteres con dos =, y 5 bytes dan 8 caracteres con un =. Al crecer el tamaño, esa sobrecarga tiende exactamente a un tercio, un 33,33%.

Esa cifra del 33% es la que todo el mundo repite, y es cierta para el texto Base64 ya decodificado, pero casi siempre falsa para lo que realmente viaja por la red, porque las respuestas HTTP se comprimen con gzip. El motivo es medible: Base64 usa exactamente 64 símbolos distintos, es decir log2(64) = 6,00 bits de información por cada carácter de 8 bits, y la etapa Huffman de Deflate detecta esa redundancia y recupera casi toda la expansión.

Midiendo imágenes PNG de tamaño creciente, comparando el gzip del archivo original contra el gzip de su Base64, la diferencia real es esta: 8×8 píxeles +11,3%, 16×16 +4,2%, 32×32 +1,5%, 64×64 +0,9%, 128×128 +0,9%, 256×256 +0,9%, y 512×512 +0,9%. Con 60.000 bytes de datos aleatorios e incompresibles por naturaleza, Base64 sí pesa un 33,33% más en crudo, pero solo un 0,97% más tras pasar por gzip.

En la práctica, desde unos 64×64 píxeles en adelante, incrustar una imagen cuesta alrededor de un 1% sobre una respuesta HTTP comprimida normal, no un 33%. Conviene leer esa cifra como «alrededor del uno por ciento» y no como una constante: depende de qué implementación de Deflate comprima la respuesta, y dos de ellas medidas aquí difieren en décimas. La sobrecarga clásica solo pesa de verdad en payloads muy pequeños, donde lo que domina es la tabla propia del compresor.

Por qué es gratis

Esta herramienta lee y codifica el archivo enteramente en tu navegador, así que no hay ningún servidor que reciba tu imagen ni que pague por procesarla: el coste de ejecutarla es cero sea cual sea el tamaño del archivo o el número de veces que la uses.

Por eso no pide cuenta ni registro, no añade ninguna marca de agua al resultado y no impone un límite de usos diarios. El único límite es el de 10 MB por archivo, que existe para que la pestaña no se quede colgada procesando algo demasiado grande, no para cobrar por más.