Encodage & Décodage Base64 : Guide Complet avec Exemples de Code

L'encodage Base64 est l'un des schemas d'encodage de donnees les plus fondamentaux en informatique. Chaque jour, des millions de developpeurs utilisent les operations base64 encode et base64 decode pour integrer des images dans du HTML, transmettre des donnees binaires et gerer des jetons d'authentification. Ce guide complet couvre tout, de l'algorithme de mappage 6 bits aux exemples de code pratiques en JavaScript, Python, Bash et PowerShell.

Essayez notre outil gratuit d'encodage/decodage Base64 en ligne.

Qu'est-ce que l'encodage Base64 ?

Base64 est un schema d'encodage binaire vers texte qui represente les donnees binaires en utilisant 64 caracteres ASCII imprimables. L'alphabet comprend : A-Z (26), a-z (26), 0-9 (10), plus + et /. Le caractere = est utilise pour le remplissage. L'encodeur traite les donnees par groupes de 3 octets (24 bits) et les convertit en 4 caracteres Base64.

L'algorithme prend chaque trois octets et les divise en quatre groupes de 6 bits. Chaque valeur 6 bits (0 a 63) correspond a un caractere de l'alphabet Base64. Quand la longueur n'est pas un multiple de trois, des caracteres de remplissage = sont ajoutes.

L'encodage Base64 augmente la taille des donnees d'environ 33%. Ce surcout est le compromis pour transmettre des donnees binaires en toute securite via des canaux texte.

Comment fonctionne l'encodage/decodage Base64

Voyons etape par etape le processus d'encodage base64, en convertissant la chaine ASCII Man :

Le resultat est TWFu. Pour decoder, inversez le processus.

Exemple de remplissage : Encoder Ma (2 octets) donne TWE=. Pour un seul octet M, le resultat est TQ==.

Cas d'utilisation courants de Base64

L'encodage Base64 est omnipresent dans le developpement logiciel moderne :

URIs de donnees (images Base64) : Integrez des images directement dans le HTML/CSS avec data:image/png;base64,..., eliminant les requetes HTTP supplementaires.

Pieces jointes email (MIME) : Le standard MIME utilise Base64 pour encoder les fichiers binaires dans les emails.

Authentification API (HTTP Basic Auth) : L'authentification HTTP basique encode la paire utilisateur:mot_de_passe en Base64.

JSON Web Tokens (JWT) : Les JWT sont composes de trois segments encodes en Base64URL.

Transfert de donnees URL-safe : Base64 assure que les donnees ne contiennent que des caracteres ASCII surs pour les URL.

Exemples de code Base64 encodage/decodage

JavaScript Base64 encodage/decodage

Dans le navigateur, utilisez btoa() pour encoder et atob() pour decoder. Pour Node.js, utilisez 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 encodage/decodage

En Python, utilisez le module integre 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 encodage/decodage

Sur Linux/macOS, utilisez la commande 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 encodage/decodage

Dans PowerShell, utilisez la classe .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

Table d'encodage Base64

L'alphabet Base64 complet mappe chaque valeur 6 bits (0-63) a un caractere ASCII imprimable (RFC 4648) :

Padding: =

Encodage Base64 URL-Safe

Le Base64 standard utilise + et / qui ont des significations speciales dans les URL. Base64URL les remplace par - et _, et omet generalement le remplissage =.

Base64URL est defini dans la RFC 4648 Section 5 et est utilise dans les JWT, OAuth 2.0 PKCE et de nombreuses API modernes.

Comparaison entre Base64 standard et 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;
}

Encodage d'images en Base64

L'une des utilisations les plus populaires de Base64 est l'integration d'images dans le HTML/CSS via des URIs de donnees au format data:[type-media];base64,[donnees].

Cas courants : images inline dans les emails HTML, petites icones en CSS, images dans les reponses API JSON, et assets dans les SPA.

Performance : Les images Base64 sont environ 33% plus lourdes. Pour les images de plus de quelques KB, servez-les comme fichiers separes. L'integration Base64 est ideale pour les petites images (moins de 10KB).

Utilisation d'images 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..." />

Utilisation d'images 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');
}

Conversion d'une image en 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}`;

Questions frequemment posees

A quoi sert l'encodage Base64 ?

L'encodage Base64 convertit les donnees binaires en texte ASCII pour une transmission sure via des protocoles texte : URIs de donnees, pieces jointes email, APIs JSON/XML, authentification HTTP Basic, JWT et stockage de donnees binaires.

Comment encoder une chaine en Base64 en JavaScript ?

Utilisez btoa("Hello World") qui retourne "SGVsbG8gV29ybGQ=". Pour decoder : atob("SGVsbG8gV29ybGQ="). Pour l'Unicode : btoa(unescape(encodeURIComponent(text))). En Node.js : Buffer.from("Hello World").toString("base64").

L'encodage Base64 est-il equivalent au chiffrement ?

Non. Base64 est un encodage reversible sans cle. Il n'offre aucune securite et ne doit jamais proteger des donnees sensibles. Utilisez AES-256 ou RSA pour le chiffrement.

L'encodage Base64 est une competence fondamentale pour tout developpeur. Utilisez notre outil gratuit pour un encodage et decodage instantanes.

Encodez et decodez Base64 instantanement avec notre outil gratuit.