Décodeur d'Images Base64

Qu'est-ce que le décodage d'images Base64 ?

Le décodage d'images Base64 est l'inverse du codage d'images : il prend une string Base64 ou un data URI qui représente une image et le reconvertit en données binaires visibles. Lorsque vous recevez une string comme data:image/png;base64,iVBORw0KGgo..., le décodage supprime le préfixe data URI, inverse le codage Base64 défini dans RFC 4648 et reconstruit les octets originaux de l'image. Le navigateur peut alors afficher les octets décodés sous forme d'image visible.

Les data URIs (RFC 2397) regroupent le type MIME et le contenu codé en Base64 dans une seule string. Ils apparaissent fréquemment dans les réponses API, le code source des e-mails HTML, les feuilles de style CSS et les enregistrements de base de données où les images sont stockées sous forme de texte plutôt que de fichiers binaires. Décoder ces strings est nécessaire pour prévisualiser l'image, vérifier son contenu ou l'enregistrer en tant que fichier autonome. Comme Base64 utilise 4 caractères ASCII pour représenter chaque 3 octets de données binaires, la string codée est toujours environ 33% plus grande que l'image originale.

Cet outil analyse à la fois les data URIs complets (data:image/png;base64,...) et les strings Base64 brutes sans le préfixe data:. Pour les strings brutes, le format de l'image est détecté automatiquement en inspectant les premiers caractères Base64, qui correspondent aux octets magiques du fichier — par exemple, iVBORw0KGgo indique toujours un fichier PNG. L'image décodée est affichée directement dans le navigateur et peut être téléchargée en tant que fichier.

Un scénario courant est de travailler avec une API REST qui renvoie une photo de profil ou une miniature de document sous forme de string Base64 dans un champ JSON — par exemple, {"avatar": "data:image/png;base64,iVBORw0KGgo..."}. Pour utiliser l'image, vous extrayez la valeur du champ, supprimez le préfixe data URI jusqu'à la virgule incluse, puis alimentez les caractères Base64 restants via un décodeur tel que atob() en JavaScript ou base64.b64decode() en Python pour récupérer les octets bruts. Coller la valeur complète dans cet outil ignore toutes ces étapes manuelles et affiche l'image immédiatement.

Pourquoi utiliser ce décodeur d'images Base64 ?

Cet outil convertit les données d'images Base64 en image visible et téléchargeable entièrement dans ton navigateur — pas de téléversement, pas de traitement serveur, pas de compte requis.

Cas d'usage du décodage d'images Base64

Structure data URI pour les images

Un data URI empaquette le type d'image et le contenu codé dans une seule string. Chaque composant est essentiel pour un décodage correct : le schéma (data:) signale que l'URL est autonome plutôt qu'une référence à une ressource externe ; le type MIME (par exemple, image/png) indique au moteur de rendu quel format utiliser lors de l'interprétation des octets bruts ; le marqueur ;base64, distingue le contenu codé en Base64 des data URIs qui utilisent l'encodage en pourcentage pour les formats de texte brut. La charge utile Base64 elle-même peut se terminer par un ou deux caractères de remplissage = — ceux-ci sont nécessaires lorsque le nombre d'octets d'entrée n'est pas un multiple de trois, garantissant que la longueur codée est toujours un multiple de quatre. L'omission ou la troncature de l'un de ces composants cause l'échec du décodage ou produit une image corrompue.

Détection du format d'image à partir de Base64

Lorsqu'une string Base64 ne dispose pas d'un préfixe data:, le format de l'image peut être identifié en inspectant les premiers caractères. Ces caractères correspondent aux octets magiques du fichier — des séquences d'octets fixes au début de chaque fichier image qui identifient le format :

Exemples de code

Comment décoder les strings d'images Base64 en fichiers d'image dans les langages et environnements populaires :

// Decode a Base64 data URI to a Blob and create a download link
const dataUri = 'data:image/png;base64,iVBORw0KGgo...'

// Method 1: fetch API (simplest)
const res  = await fetch(dataUri)
const blob = await res.blob()
// blob.type → "image/png", blob.size → 2048

// Method 2: manual decode for older environments
const [header, b64] = dataUri.split(',')
const mime    = header.match(/:(.*?);/)[1]   // → "image/png"
const binary  = atob(b64)
const bytes   = Uint8Array.from(binary, c => c.charCodeAt(0))
const blob2   = new Blob([bytes], { type: mime })

// Create a download link
const url = URL.createObjectURL(blob)
const a   = document.createElement('a')
a.href = url
a.download = 'decoded.png'
a.click()
URL.revokeObjectURL(url)

import base64
import re

data_uri = 'data:image/png;base64,iVBORw0KGgo...'

# Parse the data URI
match = re.match(r'data:(image/[\w+.-]+);base64,(.+)', data_uri)
mime_type = match.group(1)    # → "image/png"
b64_data  = match.group(2)

# Decode and write to file
image_bytes = base64.b64decode(b64_data)
ext = mime_type.split('/')[1].replace('jpeg', 'jpg').replace('svg+xml', 'svg')

with open(f'output.{ext}', 'wb') as f:
    f.write(image_bytes)
# → writes output.png (byte-for-byte identical to the original)

# Decode raw Base64 (no data: prefix)
raw_b64 = 'iVBORw0KGgo...'
image_bytes = base64.b64decode(raw_b64)

import { writeFileSync } from 'fs'

const dataUri = 'data:image/png;base64,iVBORw0KGgo...'

// Extract MIME type and Base64 payload
const [meta, b64] = dataUri.split(',')
const mime = meta.match(/:(.*?);/)[1]  // → "image/png"

// Decode to Buffer and save
const buffer = Buffer.from(b64, 'base64')
writeFileSync('output.png', buffer)
// → output.png (identical to the original file)

// Validate by checking magic bytes
console.log(buffer.subarray(0, 4))
// PNG → <Buffer 89 50 4e 47>  (\x89PNG)
// JPEG → <Buffer ff d8 ff e0>

# Decode a raw Base64 string to an image file (Linux)
echo 'iVBORw0KGgo...' | base64 -d > output.png

# Decode a raw Base64 string to an image file (macOS)
echo 'iVBORw0KGgo...' | base64 -D > output.png

# Extract Base64 from a data URI and decode
echo 'data:image/png;base64,iVBORw0KGgo...' | \
  sed 's/^data:.*base64,//' | base64 -d > output.png

# Identify the image format from the decoded file
file output.png
# → output.png: PNG image data, 64 x 64, 8-bit/color RGBA

Questions fréquemment posées