Codificación y Decodificación Base64: Guía Completa con Ejemplos de Código

La codificacion Base64 es uno de los esquemas de codificacion de datos mas fundamentales en informatica. Cada dia, millones de desarrolladores usan operaciones de base64 encode y base64 decode para incrustar imagenes en HTML, transmitir datos binarios y manejar tokens de autenticacion. Esta guia completa cubre desde el algoritmo de mapeo de 6 bits hasta ejemplos de codigo practicos en JavaScript, Python, Bash y PowerShell.

Prueba nuestra herramienta gratuita de codificacion/decodificacion Base64 en linea.

Que es la codificacion Base64?

Base64 es un esquema de codificacion de binario a texto que representa datos binarios usando 64 caracteres ASCII imprimibles. El alfabeto incluye: A-Z (26), a-z (26), 0-9 (10), mas + y /. El caracter = se usa como relleno. El codificador procesa datos en grupos de 3 bytes (24 bits) y los convierte en 4 caracteres Base64.

El algoritmo toma cada tres bytes y los divide en cuatro grupos de 6 bits. Cada valor de 6 bits (0-63) se mapea a un caracter del alfabeto Base64. Cuando la longitud no es multiplo de tres, se agregan caracteres de relleno =.

La codificacion Base64 aumenta el tamano de los datos aproximadamente un 33%. Esta sobrecarga es el precio por transmitir datos binarios de forma segura a traves de canales de solo texto.

Como funciona la codificacion/decodificacion Base64

Veamos paso a paso el proceso de codificacion base64, convirtiendo la cadena ASCII Man:

El resultado es TWFu. Para decodificar, se invierte el proceso.

Ejemplo de relleno: Codificar Ma (2 bytes) da TWE=. Para un solo byte M, el resultado es TQ==.

Casos de uso comunes de Base64

La codificacion Base64 esta en todas partes en el desarrollo de software moderno:

URIs de datos (imagenes Base64): Incrusta imagenes directamente en HTML/CSS con data:image/png;base64,....

Adjuntos de email (MIME): El estandar MIME usa Base64 para codificar archivos binarios en emails.

Autenticacion API (HTTP Basic Auth): La autenticacion HTTP basica codifica usuario:contrasena en Base64.

JSON Web Tokens (JWT): Los JWT consisten en tres segmentos codificados en Base64URL.

Transferencia de datos URL-safe: Base64 asegura que los datos solo contengan caracteres ASCII seguros.

Ejemplos de codigo Base64 codificacion/decodificacion

JavaScript Base64 codificacion/decodificacion

En el navegador, usa btoa() para codificar y atob() para decodificar. En Node.js, usa Buffer:

// ===== Browser: btoa() and atob() =====

// Base64 encode a string
const encoded = btoa('Hello World');
console.log(encoded); // "SGVsbG8gV29ybGQ="

// Base64 decode a string
const decoded = atob('SGVsbG8gV29ybGQ=');
console.log(decoded); // "Hello World"

// Handle Unicode strings (btoa only supports Latin-1)
function base64EncodeUnicode(str) {
  return btoa(encodeURIComponent(str).replace(
    /%([0-9A-F]{2})/g,
    (_, p1) => String.fromCharCode(parseInt(p1, 16))
  ));
}

function base64DecodeUnicode(str) {
  return decodeURIComponent(
    Array.from(atob(str))
      .map(c => '%' + c.charCodeAt(0).toString(16).padStart(2, '0'))
      .join('')
  );
}

base64EncodeUnicode('Hello 🌍');  // "SGVsbG8g8J+MjQ=="
base64DecodeUnicode('SGVsbG8g8J+MjQ=='); // "Hello 🌍"

// ===== Node.js: Buffer =====

// Encode
const buf = Buffer.from('Hello World', 'utf-8');
const b64 = buf.toString('base64');
console.log(b64); // "SGVsbG8gV29ybGQ="

// Decode
const original = Buffer.from(b64, 'base64').toString('utf-8');
console.log(original); // "Hello World"

// URL-safe Base64 in Node.js
const urlSafe = buf.toString('base64url');
console.log(urlSafe); // "SGVsbG8gV29ybGQ"

Python Base64 codificacion/decodificacion

En Python, usa el modulo incorporado base64:

import base64

# Standard Base64 encode
text = "Hello World"
encoded = base64.b64encode(text.encode('utf-8'))
print(encoded)          # b'SGVsbG8gV29ybGQ='
print(encoded.decode())  # "SGVsbG8gV29ybGQ="

# Standard Base64 decode
decoded = base64.b64decode(encoded)
print(decoded.decode('utf-8'))  # "Hello World"

# URL-safe Base64 (replaces + with - and / with _)
url_encoded = base64.urlsafe_b64encode(text.encode('utf-8'))
print(url_encoded.decode())  # "SGVsbG8gV29ybGQ="

url_decoded = base64.urlsafe_b64decode(url_encoded)
print(url_decoded.decode('utf-8'))  # "Hello World"

# Encode a file (e.g., an image)
with open('image.png', 'rb') as f:
    image_b64 = base64.b64encode(f.read()).decode('utf-8')
    data_uri = f"data:image/png;base64,{image_b64}"

# Decode Base64 back to file
with open('output.png', 'wb') as f:
    f.write(base64.b64decode(image_b64))

Bash / Linux Base64 codificacion/decodificacion

En Linux/macOS, usa el comando base64:

# Base64 encode a string (Linux)
echo -n "Hello World" | base64
# Output: SGVsbG8gV29ybGQ=

# Base64 decode a string (Linux)
echo "SGVsbG8gV29ybGQ=" | base64 --decode
# Output: Hello World

# macOS uses -D instead of --decode
echo "SGVsbG8gV29ybGQ=" | base64 -D
# Output: Hello World

# Base64 encode a file
base64 image.png > image_b64.txt

# Base64 decode a file
base64 --decode image_b64.txt > restored_image.png

# Encode and use inline (e.g., for curl auth header)
AUTH=$(echo -n "user:password" | base64)
curl -H "Authorization: Basic $AUTH" https://api.example.com/data

# Pipe from/to files
cat document.pdf | base64 > document_b64.txt
cat document_b64.txt | base64 --decode > restored.pdf

# Wrap lines at 76 characters (MIME standard)
echo -n "Long text..." | base64 -w 76

PowerShell Base64 codificacion/decodificacion

En PowerShell, usa la clase .NET [Convert]:

# PowerShell Base64 encode (UTF-16LE by default)
$text = "Hello World"
$bytes = [System.Text.Encoding]::UTF8.GetBytes($text)
$encoded = [Convert]::ToBase64String($bytes)
Write-Output $encoded
# Output: SGVsbG8gV29ybGQ=

# PowerShell Base64 decode
$decoded = [Convert]::FromBase64String($encoded)
$original = [System.Text.Encoding]::UTF8.GetString($decoded)
Write-Output $original
# Output: Hello World

# Encode a file to Base64
$fileBytes = [IO.File]::ReadAllBytes("C:\image.png")
$fileBase64 = [Convert]::ToBase64String($fileBytes)

# Decode Base64 to file
$decodedBytes = [Convert]::FromBase64String($fileBase64)
[IO.File]::WriteAllBytes("C:\restored.png", $decodedBytes)

# One-liner for encoding strings (UTF-8)
[Convert]::ToBase64String(
  [Text.Encoding]::UTF8.GetBytes("Hello World")
)

# Using UTF-16LE (default Windows encoding)
$utf16 = [Convert]::ToBase64String(
  [Text.Encoding]::Unicode.GetBytes("Hello World")
)
# Note: UTF-16LE produces different output than UTF-8

Tabla de codificacion Base64

El alfabeto Base64 completo mapea cada valor de 6 bits (0-63) a un caracter ASCII imprimible (RFC 4648):

Padding: =

Codificacion Base64 URL-Safe

El Base64 estandar usa + y / que tienen significados especiales en URLs. Base64URL los reemplaza por - y _, y normalmente omite el relleno =.

Base64URL esta definido en RFC 4648 Seccion 5 y se usa en JWT, OAuth 2.0 PKCE y muchas APIs modernas.

Comparacion entre Base64 estandar y Base64URL:

// Standard Base64 vs Base64URL comparison

// Standard Base64 (RFC 4648 Section 4)
// Alphabet: A-Z, a-z, 0-9, +, /
// Padding:  = (required)
"Hello World?" → "SGVsbG8gV29ybGQ/"   // contains /
"subjects?"    → "c3ViamVjdHM/"       // contains /
"<<???>>"     → "PDw/Pz8+Pg=="        // contains + and =

// Base64URL (RFC 4648 Section 5)
// Alphabet: A-Z, a-z, 0-9, -, _
// Padding:  omitted (optional)
"Hello World?" → "SGVsbG8gV29ybGQ_"   // / replaced with _
"subjects?"    → "c3ViamVjdHM_"       // / replaced with _
"<<???>>"     → "PDw_Pz8-Pg"          // + → -, / → _, no padding

// JavaScript conversion between formats
function base64ToBase64Url(base64) {
  return base64
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
}

function base64UrlToBase64(base64url) {
  let base64 = base64url
    .replace(/-/g, '+')
    .replace(/_/g, '/');
  // Add padding
  while (base64.length % 4 !== 0) {
    base64 += '=';
  }
  return base64;
}

Codificacion de imagenes en Base64

Uno de los usos mas populares de Base64 es incrustar imagenes en HTML/CSS mediante URIs de datos con formato data:[tipo-media];base64,[datos].

Casos comunes: imagenes inline en emails HTML, iconos pequenos en CSS, imagenes en respuestas API JSON y assets en SPAs.

Rendimiento: Las imagenes Base64 son aproximadamente un 33% mas grandes. Para imagenes mayores de unos KB, es mas eficiente servirlas como archivos separados. Base64 es ideal para imagenes pequenas (menos de 10KB).

Uso de imagenes Base64 en HTML:

<!-- Inline Base64 image in HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAADElEQVQI12P4//8/AwAI/AL+hc2rNAAAAABJRU5E
rkJggg==" alt="Red dot" width="5" height="5" />

<!-- Base64 SVG in HTML -->
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDov
L3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMT
AwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0icmVk
Ii8+PC9zdmc+" alt="Red circle" />

<!-- Base64 favicon -->
<link rel="icon" href="data:image/x-icon;base64,AAABAA..." />

Uso de imagenes Base64 en CSS:

/* Base64 background image in CSS */
.icon-check {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bW...');
  background-size: contain;
  width: 24px;
  height: 24px;
}

/* Base64 cursor in CSS */
.custom-cursor {
  cursor: url('data:image/png;base64,iVBORw0KGgo...'), auto;
}

/* Base64 font in CSS (@font-face) */
@font-face {
  font-family: 'CustomFont';
  src: url('data:font/woff2;base64,d09GMgABAAAAAD...') format('woff2');
}

Convertir imagen a Base64 en JavaScript:

// Convert image file to Base64 data URI (browser)
function imageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// Usage with file input
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const dataUri = await imageToBase64(file);
  console.log(dataUri);
  // "data:image/png;base64,iVBORw0KGgo..."
});

// Convert canvas to Base64
const canvas = document.getElementById('myCanvas');
const base64Image = canvas.toDataURL('image/png');
// "data:image/png;base64,iVBORw0KGgo..."

// Node.js: encode image file to Base64
const fs = require('fs');
const imageBuffer = fs.readFileSync('photo.jpg');
const base64String = imageBuffer.toString('base64');
const dataUri = `data:image/jpeg;base64,${base64String}`;

Preguntas frecuentes

Para que se usa la codificacion Base64?

Base64 convierte datos binarios en texto ASCII para transmision segura: URIs de datos, adjuntos de email, APIs JSON/XML, HTTP Basic Auth, JWT y almacenamiento de datos binarios en bases de datos de texto.

Como codifico una cadena en Base64 con JavaScript?

Usa btoa("Hello World") = "SGVsbG8gV29ybGQ=". Decodificacion: atob("SGVsbG8gV29ybGQ="). Para Unicode: btoa(unescape(encodeURIComponent(text))). En Node.js: Buffer.from("Hello World").toString("base64").

Es la codificacion Base64 lo mismo que el cifrado?

No. Base64 es una codificacion reversible sin clave. No ofrece seguridad. Usa AES-256 o RSA para cifrado real.

La codificacion Base64 es una habilidad fundamental para todo desarrollador. Usa nuestra herramienta gratuita para codificar y decodificar al instante.

Codifica y decodifica Base64 al instante con nuestra herramienta gratuita en linea.