Convertidor de Imagen a Base64
Convierte una imagen a un data URI en Base64, o pega uno para previsualizarlo y descargarlo. Ambas direcciones funcionan enteramente en tu navegador — nada se sube nunca.
Base64 byte a byte, no una copia recodificada
La codificación lee tu archivo con FileReader.readAsDataURL(file), que representa los
bytes originales exactos del archivo como texto en Base64 —
nada se decodifica, recomprime o redibuja, a diferencia de pasar
la imagen por un lienzo. La decodificación simplemente invierte
el proceso: el texto que pegas se convierte directamente en el src de un elemento <img>, y el
navegador lo decodifica de vuelta a píxeles para la vista
previa.
Ejemplo práctico: por qué Base64 es aproximadamente un 33% más grande
Base64 convierte cada 3 bytes de entrada en 4 caracteres de
salida, cada uno de 64 símbolos posibles (A–Z, a–z, 0–9, +, /). Tres bytes en bruto, por ejemplo [0xF0, 0x9F, 0x98], se convierten exactamente en
la cadena de 4 caracteres 8J+Y. Esa proporción fija
de 3 a 4 es exactamente 4/3, así que un PNG de 300 KB se
convierte en aproximadamente 400 KB de texto Base64 — esta
herramienta calcula y muestra el porcentaje real para tu archivo
en concreto, en lugar de una regla general redondeada.
Preguntas frecuentes
¿Por qué usar FileReader en vez del lienzo, como hace el conversor de formato?
Porque esta herramienta necesita conservar el archivo tal cual es. Dibujar una imagen en un lienzo la decodifica en píxeles y luego recodifica esos píxeles — para un formato con pérdida eso es una recompresión real, e incluso para PNG puede cambiar los bytes exactos (otro codificador, otros metadatos). FileReader.readAsDataURL() en cambio lee los bytes originales del archivo directamente y los representa en Base64, así que lo que obtienes es exactamente el mismo archivo, byte a byte, solo recodificado como texto.
¿Por qué el texto en Base64 es más largo que el archivo original?
Base64 representa cada 3 bytes de datos binarios como 4 caracteres de texto, cada uno tomado de un alfabeto de 64 caracteres — así que el texto codificado siempre ocupa unas 4/3 partes del tamaño original, aproximadamente un 33% más. Ese sobrecoste es el precio de representar datos binarios arbitrarios usando solo letras, dígitos y un par de símbolos, lo que permite incrustarlo de forma segura en sitios que esperan texto plano, como un background-image de CSS o un campo JSON.
¿Qué pasa si pego Base64 en bruto sin el prefijo data:?
Esta herramienta detecta que el texto pegado no empieza por data: y añade automáticamente data:image/png;base64, antes de intentar mostrarlo. Si la imagen en realidad es un JPEG o WebP, la mayoría de los navegadores actuales la mostrarán igualmente bien porque comprueban la firma real del archivo en los bytes en lugar de confiar en el tipo declarado — pero para tener total seguridad, pega el data URI completo (con su tipo mime correcto) en lugar de solo la parte en Base64.
¿Por qué veo 'no es una imagen válida' en vez de un icono de imagen rota?
Asignar datos inválidos al src de un elemento <img> normalmente te deja mirando un icono de imagen rota sin explicación. Esta herramienta escucha el propio evento onerror de la imagen y lo sustituye por un mensaje claro y directo — así que una cadena corrupta, un pegado incompleto o texto normal pegado por error reciben todos una explicación sencilla en vez de un callejón sin salida.
¿Se envía a un servidor algo de lo que pego o subo aquí?
No. La codificación usa FileReader enteramente dentro de tu navegador, y la decodificación asigna el src de un elemento <img> directamente al texto que escribiste — ninguno de los dos pasos toca nunca una petición de red. Eso es así en cada herramienta de este sitio.