Base64, Data URL y Blob URL: qué cambia y cuándo usar cada uno

Base64 es una codificación de texto

Base64 representa bytes mediante caracteres ASCII. Permite colocar un archivo dentro de JSON o de un canal que solo admite texto. No es una URL por sí mismo, no cifra el contenido y normalmente aumenta el volumen alrededor de un tercio antes de considerar encabezados o escapado.

Es razonable cuando una API lo exige o cuando la carga es pequeña. Para archivos grandes, mantener simultáneamente los bytes, la cadena Base64 y sus copias intermedias puede consumir bastante memoria.

Data URL añade contexto

Una Data URL combina un esquema, un tipo MIME y los datos: data:image/png;base64,iVBORw0.... Puede asignarse directamente a ciertos atributos como src, siempre que la política de seguridad y el navegador lo permitan. Su ventaja es ser autocontenida; su desventaja es repetir una cadena extensa cada vez que se utiliza.

El tipo MIME declarado debe considerarse una indicación. Si recibes información no confiable, valida los bytes antes de mostrarla o descargarla. Algunos formatos activos, como SVG o HTML, requieren controles adicionales.

Blob URL referencia datos en memoria

El navegador puede crear una URL temporal con URL.createObjectURL(blob). Esa dirección comienza normalmente con blob: y referencia un objeto que ya está en memoria; no contiene todos sus bytes escritos como texto. Resulta adecuada para previsualizar un PDF, una imagen o preparar una descarga local sin convertir el archivo completo a una cadena larga.

Comparación para decisiones reales

• Enviar en JSON: Base64, si la API no acepta una carga binaria.
• Incrustar un icono muy pequeño: una Data URL puede ser práctica.
• Previsualizar un archivo seleccionado: suele convenir una Blob URL.
• Compartir un enlace entre usuarios: ninguna de las tres por sí sola; se necesita almacenamiento autorizado y una URL de red.
• Subir archivos grandes: normalmente conviene binario, multipart/form-data o carga por partes.

Memoria y rendimiento

En JavaScript, una cadena extensa puede ocupar más memoria que los bytes originales. Si el flujo primero lee un archivo, luego genera Base64 y después construye otra Data URL, pueden coexistir varias representaciones. Para reducir picos, evita conversiones innecesarias, impone límites de tamaño y libera referencias cuando termina la operación.

Al usar Blob URL, llama URL.revokeObjectURL cuando la vista previa ya no se necesita. No la revoques antes de que el navegador termine de cargar o descargar el recurso.

Seguridad y privacidad

Que un proceso ocurra en el navegador no convierte automáticamente el contenido en seguro. Una biblioteca externa aún forma parte de la página; una extensión puede tener permisos; el historial o portapapeles pueden conservar datos. Comprueba el tratamiento del sitio y evita copiar información confidencial si no es necesario.

Base64 tampoco anonimiza: quien recibe la cadena puede recuperar el archivo exacto. Si necesitas confidencialidad, utiliza cifrado y controles de acceso diseñados para ese objetivo.

Ejemplo de flujo eficiente

1. El usuario selecciona un PDF.
2. La aplicación valida tamaño, tipo y firma.
3. Crea un Blob URL para la vista previa.
4. Solo genera Base64 si el sistema de destino lo exige.
5. Envía o descarga el resultado.
6. Revoca la Blob URL y elimina referencias temporales.

Este orden evita codificar un documento que el usuario todavía no ha confirmado y mantiene separadas la vista previa local y la transferencia final.