Base64: codificar y decodificar texto, archivos e imágenes en línea

El codificador es un bisturí para una cadena que puedes pegar, no un CDN.

Si la respuesta depende de un archivo que el navegador no debería sostener, o de criptografía, quédate en CI o en un gestor de secretos.

Quien pueda leer la cadena puede decodificarla. Base64 no tiene clave, ni control de integridad, ni confidencialidad. Un token que parece opaco en un log sigue siendo texto claro tras una sola decodificación. Si los bytes deben permanecer secretos, cífralos (o no los pongas en el payload). Si deben permanecer auténticos, fírmalos con un HMAC o con una firma JWT, no con Base64 en sí.

RFC 4648 define dos alfabetos. El Base64 estándar usa + y / y suele conservar el padding =. El Base64 URL-safe (JWT, cookies, rutas) usa - y _ y normalmente omite el padding. La opción URL-safe de FastMinify hace ambas sustituciones y quita el padding al codificar. Al decodificar, el modo URL-safe restaura el alfabeto estándar y el padding, mientras que el modo estándar pasa la cadena tal cual a atob: atob tolera un padding ausente, pero rechaza - y _. Una cadena URL-safe con la opción desactivada da, por tanto, un error de entrada inválida, y una cadena estándar con la opción activada se decodifica igualmente, porque solo se sustituyen esos dos caracteres.

Un JWT compacto está formado por tres segmentos Base64URL separados por puntos, escritos header.payload.signature. Los puntos no son Base64. La herramienta Base64 decodifica una cadena de alfabeto, no un token con puntos. Su mensaje de error lo dice: pega solo los caracteres codificados, sin puntos. Para un JWT, copia cada parte entre los puntos o abre el decodificador JWT e inspecciona header y payload en un paso.

Base64 infla los datos binarios alrededor de un 33 % (3 bytes se convierten en 4 caracteres ASCII). Un JPEG de 200 KiB pasa a ser unos 267 KiB de CSS. La imagen deja de poder almacenarse en caché por separado de la hoja de estilo y hace más pesada una hoja que ya bloquea el renderizado. Con HTTP/2, las peticiones adicionales cuestan poco, lo que elimina el principal motivo para incrustar. Las data URI compensan en iconos minúsculos que de otro modo costarían una petición. Pierden con imágenes de cabecera, fotos de producto y todo lo que ya publicas minificado como archivo.

Los bytes no cambian. La escritura sí. El Base64 estándar es lo que emiten el MIME del correo y la mayoría de las API. El Base64 URL-safe es lo que necesitan JWT, cookies firmadas y segmentos de ruta para que + y / no choquen con la sintaxis de las consultas. Una data URI es Base64 estándar con el prefijo data:<mime>;base64, para que un navegador trate la cadena como un recurso.

Tres herramientas, tres entradas. El codificador de texto aplica UTF-8 y luego Base64 a una cadena, pegada o leída de un archivo de texto. No interpreta un PNG como píxeles. El convertidor de imagen lee los bytes del archivo y comprueba el tipo MIME. Se aceptan PNG, JPEG, GIF, WebP y SVG, y un tipo MIME vacío se rechaza en lugar de adivinarse. Limita los archivos a 32 MiB y emite una data URI o Base64 en bruto. La vista previa usa solo un elemento img: el SVG nunca se inyecta en el DOM como marcado. Para un SVG usado en CSS, con elección entre utf-8 y Base64 y un fragmento CSS dedicado, usa SVG a data URI en el hub SVG. Su entrada SVG está limitada a 512 KiB, un límite distinto para otro trabajo.

Se mezclan porque todos «hacen una cadena más segura». Resuelven colisiones distintas. URL encode codifica en porcentaje los caracteres reservados de una URI. Las entidades HTML escapan el marcado para que una cadena quepa en un atributo. Un hash (SHA-256, HMAC) ofrece integridad o autenticidad en un solo sentido; consulta las herramientas de hash y HMAC del hub de codificación, no este artículo. Base64 solo cambia cómo se escriben los bytes.

Base64 toma 24 bits (3 bytes) y los escribe como 4 caracteres de un alfabeto de 64 símbolos. Por eso la salida es más larga: 4/3, es decir, un 33 % más, más padding si la longitud de entrada no es múltiplo de 3. Ese sobrecoste es el precio de un alfabeto que sobrevive al correo, a las cadenas JSON y al CSS. Es lo contrario de la minificación. Si el payload es JSON que vas a servir por HTTP, minifica primero el JSON y codifica solo si una capa envolvente exige ASCII; consulta la guía de minificación JSON.

El btoa nativo de JavaScript opera sobre una cadena binaria (valores 0–255). Pásale café y codifica sin avisar el único byte Latin-1 de é en lugar de los dos bytes UTF-8; con un emoji o un carácter CJK lanza una excepción. FastMinify codifica los bytes UTF-8 con TextEncoder y luego Base64, con el mismo contrato que Node Buffer.from(text, 'utf8').toString('base64'). La decodificación hace lo inverso con TextDecoder. Los emojis y el CJK sobreviven. Si decodificas un blob que nunca fue texto UTF-8 (un PNG, un flujo gzip), obtienes caracteres de reemplazo, no un archivo. Ese blob va en image-to-base64 o en un volcado hex, no en un campo de texto.

Cuando la longitud en bytes no es múltiplo de 3, el Base64 estándar añade = o == para que la longitud de la cadena sea múltiplo de 4. Los contextos URL-safe (JWT, algunas cookies) omiten ese padding porque = es un delimitador en las consultas. La codificación URL-safe de FastMinify lo quita; la decodificación URL-safe lo restaura antes de atob. La decodificación estándar no lo necesita, porque atob tolera un padding ausente. Ejemplos clásicos de la RFC: f → Zg==, fo → Zm8=, foo → Zm9v.

Abre el codificador/decodificador Base64. Pega el texto o selecciona un archivo de texto (el límite en el navegador es de 32 MiB, como en las demás selecciones de archivos del sitio). Elige Codificar o Decodificar. Deja desactivada la opción Base64 compatible con URL (URL-safe) para MIME, payloads de data URI y la mayoría de los ejemplos de API. Actívala para segmentos JWT, valores de cookies firmadas y todo lo que vaya en una ruta. Carga el ejemplo si solo quieres ver cómo funciona. Todo permanece en la pestaña.

Abre la herramienta imagen a Base64. Elige una imagen (PNG, JPEG, GIF, WebP o SVG, de hasta 32 MiB) o suéltala en la página. Elige Data URI para el CSS (url()) y para img src, o Base64 en bruto para pasarlo a otra herramienta. La vista previa pasa por un elemento img y el SVG no se monta como DOM. Los tipos MIME vacíos o no compatibles se rechazan porque la herramienta no adivina. Tras un icono minúsculo, puedes pegar la URI en el CSS. Tras una fotografía, en general no conviene.

La codificación suele ser un paso de una sesión de depuración más larga. El hub de codificación reúne las herramientas vecinas.

Si la cadena ya vive en un script, el Buffer de Node sigue el mismo camino UTF-8 luego Base64 que FastMinify. Usa base64url cuando el consumidor es una librería JWT.

El par nativo btoa / atob es una API de cadena binaria. Envuélvelo con TextEncoder/TextDecoder o corromperás todo lo que salga de Latin-1. Esa envoltura es exactamente lo que ya hace la herramienta de texto de FastMinify.

Un PEM local, un archivo binario de prueba o un job de CI que no debe abrir un navegador: openssl sigue siendo la herramienta adecuada. FastMinify no sustituye un pipeline que ya calcula hashes o firma archivos en disco.

Sin instalación, sin enviar nada, texto UTF-8 más un convertidor de imagen dedicado con un tope de 32 MiB y una opción URL-safe. Los límites: la herramienta de texto no es un codificador de archivos binarios, HEIC y PDF quedan fuera de la herramienta de imagen y la verificación JWT es otra página. Úsala para inspeccionar, enseñar y salir del paso en una máquina sin Node, y mantén openssl o Buffer en CI.