Convertir imagen a Base64 online

Qué puedes hacer aquí

• Leer una imagen de hasta 5 MB como URL de datos en el navegador.
• Mostrar el tipo MIME y el contenido Base64 en una sola cadena copiable.
• Indicar dimensiones, tamaño original y longitud total de la URL generada.
• Copiar la URL de datos o una declaración CSS background-image preparada.
• Mantener los bytes originales sin convertir, comprimir ni subir el archivo.

Respuesta rápida: cómo convertir una imagen a Base64

Selecciona la imagen y espera a que aparezcan las dimensiones y la cadena. Usa «Copiar URL de datos» si necesitas el valor que comienza por `data:image/…;base64,`; usa «Copiar como CSS» si necesitas una declaración `background-image`. Pega el resultado en un entorno de prueba y confirma que la imagen se muestra antes de incorporarlo a producción.

La herramienta entrega una URL de datos completa, no solo los caracteres Base64. Esa cabecera identifica el tipo del archivo y permite que un navegador interprete la cadena. Si una API solicita Base64 puro, revisa su contrato: puede ser necesario retirar todo lo anterior a la coma. No elimines esa parte cuando el destino espera una URL de datos.

Qué es una URL de datos y qué partes contiene

El esquema `data:` permite incluir un elemento pequeño directamente donde normalmente habría una URL externa. Una imagen suele seguir la forma `data:tipo/subtipo;base64,contenido`. El tipo puede ser `image/png`, `image/jpeg`, `image/webp` u otro valor informado por el archivo; `;base64` indica cómo están representados los bytes y la coma separa la cabecera de los datos.

Base64 es una codificación, no un nuevo formato de imagen. Un PNG sigue siendo PNG y un GIF animado sigue conteniendo sus bytes originales dentro de la cadena. La herramienta no dibuja la imagen en canvas: FileReader lee el archivo como URL de datos. Por eso no mejora la calidad, no elimina el fondo y no convierte entre JPG, PNG o WebP.

Base64 no comprime ni protege la imagen

La representación Base64 utiliza caracteres de texto para expresar datos binarios y normalmente necesita aproximadamente cuatro caracteres por cada tres bytes, además de la cabecera. El valor exacto aparece como «Longitud de la URL de datos». Una imagen de 300 KB no se convierte en una imagen más ligera; la cadena suele ocupar más antes de que intervenga cualquier compresión de transferencia.

Tampoco es cifrado ni anonimización. Cualquier persona o programa que reciba la cadena puede reconstruir la imagen. No pegues documentos personales, firmas, capturas privadas o secretos en código público creyendo que el texto los oculta. El hecho de que la conversión sea local protege el trayecto hacia FunnyTools, no el lugar donde decidas guardar o publicar el resultado.

Cuándo conviene utilizar Base64 en HTML o CSS

Una URL de datos puede resultar práctica para un icono muy pequeño, una demostración autocontenida, un archivo de configuración que solo admite texto o un prototipo sin servidor de imágenes. En HTML se coloca como valor de una fuente de imagen y debe mantenerse un texto alternativo adecuado; en CSS puede utilizarse dentro de `url(...)` para un fondo decorativo.

No es automáticamente una optimización. Una cadena grande aumenta el tamaño del documento o la hoja de estilo, dificulta la lectura del código, puede repetirse, bloquear la descarga del recurso contenedor y no siempre aprovecha una caché independiente. Para fotografías, fondos grandes o recursos reutilizados en muchas páginas suele ser preferible un archivo optimizado con una URL normal.

Compatibilidad, CSP, correo y límites del destino

El navegador puede mostrar muchas URL de datos, pero el entorno de destino decide si las acepta. Una política de seguridad de contenido puede bloquear `data:` en imágenes; un editor puede truncar cadenas largas; una API puede requerir solo el bloque Base64; y algunos clientes de correo eliminan o modifican contenido embebido. Prueba siempre en el sistema real.

El botón CSS añade comillas alrededor de la URL y genera una sola declaración. No crea una clase, selector, tamaño, posición ni texto alternativo. El botón de copia utiliza el portapapeles cuando está disponible; si el navegador lo bloquea, puede mostrar un cuadro para copiar manualmente. Revisa que la cadena no se haya cortado al principio o al final.

Límite de 5 MB y comprobación del resultado

La entrada está limitada a 5 MB porque una URL de datos es más larga que el archivo y un textarea enorme puede consumir memoria o bloquear el navegador. La página acepta archivos marcados como imagen que el navegador pueda leer; un MIME incorrecto, un archivo dañado o una política del navegador pueden impedir mostrar sus dimensiones.

Para verificar, comprueba que la cadena empiece por `data:image/`, contenga `;base64,` y muestre la imagen en un documento de prueba. Compara las dimensiones con el original y, si el destino permite descargar la imagen reconstruida, compara también el tipo y el archivo. No uses la longitud como medida de calidad ni como prueba de que la cadena está protegida.

Cómo utilizarla paso a paso

1. Selecciona una imagen de hasta 5 MB que el navegador pueda abrir.
2. Comprueba el tipo, las dimensiones y la longitud de la URL de datos generada.
3. Elige copiar la URL completa o la declaración CSS background-image.
4. Pega el resultado en un archivo de prueba sin datos sensibles y verifica que se muestre.
5. Evalúa el peso, la CSP y las reglas del destino antes de incluir la cadena en producción.

Situaciones en las que resulta útil

• Incluir un icono pequeño en un prototipo HTML autocontenido.
• Preparar un background-image de CSS para una demostración sin archivos externos.
• Enviar una imagen a una API que documenta expresamente una URL de datos.
• Guardar una miniatura pequeña dentro de una configuración que solo admite texto.
• Comprobar cómo comienza y cuánto mide la representación Base64 de una imagen.

Ejemplos completos

Límites y comprobaciones importantes

• La salida es una URL de datos completa; una API puede pedir Base64 sin cabecera.
• Base64 codifica, pero no comprime, cifra, anonimiza ni mejora la imagen.
• La cadena suele ser mayor que el archivo binario y el límite de entrada es 5 MB.
• El destino puede bloquear data: mediante CSP, truncar la cadena o exigir otro formato.
• No publiques información sensible: cualquiera que tenga la cadena puede reconstruir el archivo.

Preguntas frecuentes