Base64 para texto, archivos y Data URLs: qué cambia

Respuesta breve

Una cadena Base64 no indica por sí sola si contiene texto, una imagen o cualquier otro archivo. Para texto necesitas conocer la codificación, por ejemplo UTF-8; para archivos debes conservar los bytes y el tipo MIME. Una Data URL añade metadatos y una coma delante de los datos: ese prefijo no forma parte del Base64.

Tres objetos que se parecen pero no son iguales

El Base64 de un texto UTF-8 contiene los bytes obtenidos al codificar sus caracteres. El Base64 de un PNG contiene directamente los bytes binarios del archivo. Ambos usan el mismo alfabeto, pero solo el primero puede convertirse en texto mediante UTF-8.

Una Data URL empaqueta además un tipo de contenido:

data:image/png;base64,iVBORw0KGgo...

La parte Base64 empieza después de la primera coma. data:image/png;base64, es un encabezado que describe el medio y el modo de codificación. Si lo pegas completo en un decodificador que espera Base64 puro, las letras del prefijo pueden provocar un error o, en validadores permisivos, producir bytes basura.

Cuándo usar el conversor de texto

El conversor Base64 y Base64URL está diseñado para texto UTF-8. Es apropiado para una cadena de configuración, un fragmento JSON tratado como texto o una prueba de interoperabilidad. Rechaza una salida que no sea UTF-8 para no mostrar datos binarios como caracteres engañosos.

No es un visor de imágenes ni un conversor de archivos. Aunque un PNG válido pueda escribirse como Base64, intentar leer sus bytes con UTF-8 no aporta información y puede fallar correctamente.

Cómo reconocer y separar una Data URL

Según la RFC 2397, una Data URL tiene la forma data:[mediatype][;base64],data. Busca la coma que termina los metadatos, comprueba que exista el indicador ;base64 y decodifica únicamente lo posterior. Si no aparece ;base64, los datos usan codificación porcentual, no Base64.

No deduzcas el tipo real solo del texto declarado. Un origen no confiable puede afirmar image/png y entregar otro formato. Para permitir descargas o vistas previas hay que validar también las firmas del archivo, limitar el tamaño y aplicar una política de tipos.

Texto frente a bytes de archivo

Para texto, el contrato mínimo debe indicar UTF-8 + Base64 o UTF-8 + Base64URL, además de la regla de padding. Para un archivo, registra su nombre si es necesario, tipo MIME, tamaño esperado y hash. Tras decodificar, escribe los bytes directamente; no pases por una cadena Unicode intermedia.

Esta distinción evita el patrón defectuoso «binario → string → Base64», que puede modificar bytes. En el navegador, File.arrayBuffer() o Blob.arrayBuffer() ofrecen los bytes; TextEncoder se reserva para texto.

Coste de tamaño y memoria

Base64 aumenta el tamaño aproximadamente un tercio porque cada tres bytes se representan con cuatro caracteres, a lo que una Data URL suma su encabezado. En HTML o JSON, una imagen grande embebida puede duplicar temporalmente el uso de memoria y bloquear el hilo principal durante la conversión.

Para archivos grandes suele ser mejor una URL normal, almacenamiento de objetos o una subida binaria. Data URLs resultan útiles para recursos pequeños y autocontenidos, no como sustituto universal de archivos.

Lista de comprobación

Antes de decodificar, pregunta qué capa tienes: Base64 puro o Data URL; alfabeto estándar o URL-safe; texto o binario; UTF-8 u otra codificación. Luego valida tamaño y sintaxis, separa el prefijo si existe y conserva los bytes. Solo convierte a texto cuando el contrato lo diga. Base64 transporta la información, pero no aporta por sí mismo el nombre, el tipo real, la seguridad ni la codificación de caracteres.