¿Qué es Base64?
Base64 es un esquema de codificación que convierte datos binarios en una representación
de texto utilizando 64 caracteres diferentes. Este sistema permite transmitir datos binarios a través
de canales que solo admiten texto, como correo electrónico, JSON, XML o URLs.
¿Cómo funciona?
Base64 toma grupos de 3 bytes (24 bits) y los divide en 4 grupos de 6 bits cada uno. Cada grupo de 6 bits
se representa con un carácter del alfabeto Base64:
- A-Z (26 caracteres) → valores 0-25
- a-z (26 caracteres) → valores 26-51
- 0-9 (10 caracteres) → valores 52-61
- + → valor 62
- / → valor 63
- = → padding (relleno)
💡 ¿Sabías qué?
El nombre "Base64" viene de usar una base numérica de 64 símbolos, similar a como el sistema decimal
usa base 10 y el binario usa base 2.
Proceso de codificación paso a paso
- Toma el texto original y convierte cada carácter a su valor ASCII
- Agrupa los valores en grupos de 3 bytes (24 bits)
- Divide cada grupo de 24 bits en 4 grupos de 6 bits
- Convierte cada grupo de 6 bits a su carácter Base64 correspondiente
- Agrega padding "=" si es necesario
Ejemplo visual
Texto: "Hi"
ASCII: H(72) i(105)
Binario: 01001000 01101001
Con padding: 01001000 01101001 00000000
Grupos de 6 bits: 010010 000110 100100 000000
Valores decimales: 18 6 36 0
Caracteres Base64: S G k =
Resultado: "SGk="
Variantes de Base64
| Variante |
Caracteres especiales |
Uso |
| Base64 estándar |
+ / |
Email, MIME |
| Base64URL |
- _ |
URLs, JWT |
| Base64 segura |
- _ |
Nombres de archivo |
Ventajas y desventajas
✅ Ventajas:
- Permite transmitir datos binarios por canales de texto
- Compatible con casi todos los sistemas
- Fácil de implementar
⚠️ Desventajas:
- Aumenta el tamaño en un 33%
- No es cifrado (no ofrece seguridad)
- Requiere decodificación para recuperar los datos originales
Errores Comunes al trabajar con Base64
1. Error: "Invalid Base64 string"
Este es el error más común. Ocurre cuando el string no tiene el formato válido de Base64.
Causas típicas:
- El string contiene espacios o saltos de línea no codificados
- Faltan caracteres de padding (=)
- Contiene caracteres inválidos (otros que A-Z, a-z, 0-9, +, /, =)
- El string está truncado o incompleto
Solución: Usa nuestra herramienta con la opción "Decodificar cada línea por separado"
o limpia el string antes de decodificar.
2. Problemas con caracteres especiales y emojis
Los caracteres no ASCII (como ñ, á, emojis) pueden causar problemas si no se usa UTF-8.
// Codificando sin UTF-8
btoa("Hola ñ") // Error: Failed to execute 'btoa'
// Codificando con UTF-8
const encoder = new TextEncoder();
const data = encoder.encode("Hola ñ");
const base64 = btoa(String.fromCharCode(...data));
// Resultado: "SG9sYSB4w60="
3. Error de padding incorrecto
Base64 usa "=" como relleno cuando los datos originales no son múltiplos de 3 bytes.
| Bytes originales |
Padding |
Ejemplo |
| 3 bytes |
Sin padding |
SGVsbG8= → Hola |
| 2 bytes |
1 = |
SGk= → Hi |
| 1 byte |
2 == |
QQ== → A |
4. Confundir Base64 con cifrado
⚠️ Base64 NO es cifrado:
Base64 es solo codificación, no cifrado. Cualquier persona puede decodificar un Base64 y ver el contenido original.
Nunca uses Base64 para proteger información sensible como contraseñas o datos financieros.
5. Problemas con Base64URL
Al usar JWT o URLs, los caracteres + y / pueden causar problemas:
// Base64 estándar en URL
"https://api.com?token=abc+def/ghi"
// El + se interprema como espacio
// La / se interprema como ruta
// Base64URL para JWT y URLs
"https://api.com?token=abc-def_ghi"
// Usa - y _ en lugar de + y /
6. Olvidar el orden de bytes (Endianness)
Al codificar datos binarios, el orden de los bytes importa. Big-endian y Little-endian producen resultados diferentes.
7. Error: String demasiado largo
Algunos navegadores tienen límites en el tamaño del string que pueden procesar. Para archivos grandes,
considera procesar en chunks.
💡 Tip de debugging:
Si tienes un Base64 que no decodifica, verifica que:
- Solo contenga caracteres válidos (A-Z, a-z, 0-9, +, /, =)
- La longitud sea múltiplo de 4
- Tenga el padding correcto al final
- No tenga espacios ni saltos de línea (o elimínalos primero)
UTF-8 vs ASCII en Base64
¿Qué es ASCII?
ASCII (American Standard Code for Information Interchange) usa 7 bits para representar
128 caracteres (letras inglesas, números, símbolos básicos). Con 8 bits (ASCII extendido) alcanza 256 caracteres.
- A-Z: 65-90
- a-z: 97-122
- 0-9: 48-57
- Espacio: 32
¿Qué es UTF-8?
UTF-8 es una codificación de caracteres variable que puede representar cualquier carácter Unicode.
Usa 1 byte para caracteres ASCII y hasta 4 bytes para otros caracteres.
Comparación
| Característica |
ASCII |
UTF-8 |
| Bytes por carácter |
1 byte fijo |
1-4 bytes variable |
| Caracteres soportados |
128 (inglés básico) |
1,112,064 (todos) |
| Ñ, Á, É |
❌ No soportados |
✅ Soportados (2 bytes) |
| Emojis |
❌ No soportados |
✅ Soportados (4 bytes) |
| Compatibilidad |
Universal (subset de UTF-8) |
Retrocompatible con ASCII |
Impacto en Base64
La codificación elegida afecta directamente al resultado Base64:
// Texto: "Hola"
// ASCII: H(72) o(111) l(108) a(97)
// Base64: "SG9sYQ=="
// Texto: "ña"
// UTF-8: ñ(195 177) a(97) = 3 bytes
// Base64: "xMSY="
// Intentando con ASCII sin UTF-8:
// btoa("ña") // ¡ERROR!
Cómo codificar correctamente con UTF-8
// Método moderno (recomendado)
function toBase64UTF8(str) {
const encoder = new TextEncoder();
const data = encoder.encode(str);
return btoa(String.fromCharCode(...data));
}
// Método de decodificación
function fromBase64UTF8(base64) {
const binaryString = atob(base64);
const bytes = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
const decoder = new TextDecoder();
return decoder.decode(bytes);
}
// Ejemplo:
const texto = "Hola 😊 👋";
const encoded = toBase64UTF8(texto);
// "SG9sYSB8J0Dwn4m8IPCfjI0="
Emojis y caracteres especiales
Los emojis requieren UTF-8 para funcionar correctamente:
😊 → "8J+YhQ=="
👋 → "8J+Riw=="
🔐 → "8J+SsA=="
Español: "España" → "RXNwYcOxYQ=="
Japonés: "日本" → "5pel5pys"
Chino: "中国" → "5Lit5paH"
Árabe: "مرحبا" → "2YfYpdmK2YPYp9mE2Kk="
Cuándo usar cada uno
Usa ASCII cuando:
- Solo trabajas con texto en inglés
- Necesitas máxima compatibilidad
- Procesas datos legacy
Usa UTF-8 cuando:
- Trabajas con múltiples idiomas
- Necesitas emojis o símbolos especiales
- Desarrollas aplicaciones modernas
- Procesas datos de usuarios internacionales
⚠️ Atención:
Siempre que codifiques texto con caracteres no ASCII, especifica UTF-8 explícitamente.
Nuestra herramienta usa UTF-8 por defecto para evitar problemas.
Ejemplos Prácticos de Base64
1. Autenticación HTTP Basic
HTTP Basic Authentication usa Base64 para enviar credenciales:
// Formato: username:password
// Credenciales: usuario:secreto123
// Paso 1: Crear el string
const credentials = "usuario:secreto123";
// Paso 2: Codificar en Base64
const encoded = btoa(credentials);
// "dXN1YXJpbzpzZWNyZXRvMTIz"
// Paso 3: Usar en el header
Authorization: Basic dXN1YXJpbzpzZWNyZXRvMTIz
2. JWT (JSON Web Tokens)
Los JWT usan Base64URL para codificar sus partes:
// JWT = Header.Payload.Signature
// Cada parte está codificada en Base64URL
// Header (ejemplo)
{
"alg": "HS256",
"typ": "JWT"
}
// Base64URL: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
// Payload (ejemplo)
{
"sub": "1234567890",
"name": "Juan Pérez",
"iat": 1516239022
}
// Base64URL: eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6Ikp1YW4gUMOpcmV6IiwiaWF0IjoxNTE2MjM5MDIyfQ
// JWT completo:
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6Ikp1YW4gUMOpcmV6IiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
💡 Nota: Los JWT usan Base64URL (con - y _) en lugar de Base64 estándar (con + y /)
para ser seguros en URLs.
3. Imágenes embebidas en HTML/CSS
Puedes embeber imágenes directamente usando Base64:
/* En CSS */
.logo {
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PC9zdmc+');
}
4. Datos JSON con caracteres especiales
// JSON original (con emoji)
{
"mensaje": "¡Hola! 👋",
"usuario": "María García"
}
// Codificado para transmitir por URL
eyAibWVuc2FqZSI6ICLCokhvbGEhIPCfjI0iLCAidXN1YXJpbyI6ICJNYXLDrWEgR2FyY8OtYSIgfQ==
5. Archivos binarios
Para codificar archivos completos:
// Codificar archivo a Base64
function fileToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
reader.readAsDataURL(file);
});
}
// Uso
const fileInput = document.querySelector('#fileInput');
fileInput.addEventListener('change', async (e) => {
const file = e.target.files[0];
const base64 = await fileToBase64(file);
console.log(base64);
// data:image/png;base64,iVBORw0KGgo...
});
6. Cookies con valores complejos
// Objeto JavaScript
const sessionData = {
userId: 12345,
preferences: { theme: 'dark', lang: 'es' },
cart: ['item1', 'item2']
};
// Convertir a JSON y codificar
const encoded = btoa(JSON.stringify(sessionData));
// "eyJ1c2VySWQiOjEyMzQ1LCJwcmVmZXJlbmNlcyI6eyJ0aGVtZSI6ImRhcmsiLCJsYW5nIjoiZXMifSwiY2FydCI6WyJpdGVtMSIsIml0ZW0yIl19"
// Guardar en cookie
document.cookie = `session=${encoded}; path=/; max-age=3600`;
7. URLs con datos (Data URLs)
data:[][;base64],
Ejemplos:
- data:text/plain;base64,SGVsbG8=
- data:text/html;base64,PGgxPkhlbGxvPC9oMT4=
- data:image/png;base64,iVBORw0KGgo...
- data:application/pdf;base64,JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwogIC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXwKICAvTWVkaWFCb3ggWyAwIDAgNTk1LjI4IDg0MS44OSBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0KPj4KZW5kb2JqCg...
8. Comunicación con APIs
// Subiendo imagen codificada
async function uploadImage(base64Image) {
// Remover el prefijo data:image/...;base64,
const base64Data = base64Image.split(',')[1];
const response = await fetch('https://api.example.com/upload', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
image: base64Data,
filename: 'photo.png'
})
});
return response.json();
}
Best Practices
✅ Haz esto:
- Usa UTF-8 para caracteres no ASCII
- Usa Base64URL para URLs y JWT
- Valida el string antes de decodificar
- Maneja los errores apropiadamente
❌ Evita esto:
- Usar Base64 para cifrado (no es seguro)
- Codificar archivos muy grandes en memoria
- Olivar especificar la codificación (charset)
