Encodeur d'images Base64

Qu'est-ce que l'encodage d'image en Base64 ?

L'encodage d'image en Base64 convertit les données binaires d'une image en une chaîne ASCII qui peut être intégrée directement dans HTML, CSS ou JSON sans référencer un fichier externe. Le résultat est un data URI — une chaîne autonome qui commence par data:image/png;base64, suivi des octets encodés en Base64 de l'image. Les navigateurs traitent les data URIs exactement comme des URLs d'images externes : ils décodent la charge utile Base64 et affichent l'image en ligne.

La technique est définie par la RFC 2397 (schéma data URI) et la RFC 4648 (encodage Base64). Lorsqu'une image est encodée en Base64, chaque groupe de 3 octets de données binaires de pixels devient 4 caractères ASCII, augmentant la taille de la charge utile d'environ 33 %. Malgré cet overhead, les images intégrées éliminent une requête HTTP par ressource — une optimisation significative quand les images sont petites (icônes, logos, pixels de suivi 1x1) et que la latence aller-retour d'une requête séparée dépasse le coût des octets supplémentaires.

Les data URIs sont pris en charge dans tous les navigateurs modernes, les clients de messagerie (avec des nuances) et tout contexte acceptant la syntaxe URI standard. Ils sont largement utilisés dans les applications monopage, les modèles d'e-mail HTML, les sprites SVG et les déclarations CSS background-image où réduire le nombre total de requêtes réseau améliore le temps de chargement perçu.

Pourquoi utiliser cet encodeur d'images Base64 ?

Cet outil convertit n'importe quelle image en un data URI prêt à l'emploi directement dans votre navigateur — sans téléchargement, sans serveur, sans compte requis.

Cas d'usage de l'encodage d'images en Base64

Structure d'un data URI

Un data URI encode le format de l'image et son contenu binaire dans une seule chaîne. Comprendre sa structure aide à construire ou analyser des data URIs par programmation :

Comparaison des formats d'image pour l'encodage Base64

Le choix du format d'image influe sur la taille du résultat Base64, la compatibilité navigateur et les caractéristiques de rendu. Utilisez le format le plus adapté à votre type de contenu :

Exemples de code

Comment convertir des images en data URIs Base64 dans les langages et environnements courants :

// Convert a File object to a Base64 data URI
function fileToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(file)
    // reader.result → "data:image/png;base64,iVBORw0KGgo..."
  })
}

// Convert a canvas element to a data URI
const dataUri = canvas.toDataURL('image/png')
// → "data:image/png;base64,iVBORw0KGgo..."

// Convert with quality parameter (JPEG/WebP only)
const jpegUri = canvas.toDataURL('image/jpeg', 0.8)
// → "data:image/jpeg;base64,/9j/4AAQ..."

import base64

# Read an image file and encode it to a data URI
with open('logo.png', 'rb') as f:
    encoded = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:image/png;base64,{encoded}'
# → "data:image/png;base64,iVBORw0KGgo..."

# Detect MIME type automatically
import mimetypes
mime, _ = mimetypes.guess_type('photo.jpg')
# mime → "image/jpeg"

with open('photo.jpg', 'rb') as f:
    b64 = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:{mime};base64,{b64}'

import { readFileSync } from 'fs'
import { lookup } from 'mime-types'

// Read file and encode to data URI
const buffer = readFileSync('icon.png')
const base64 = buffer.toString('base64')
const mime = lookup('icon.png') // → "image/png"

const dataUri = `data:${mime};base64,${base64}`
// → "data:image/png;base64,iVBORw0KGgo..."

// From a Buffer received via HTTP/API
function bufferToDataUri(buf, mimeType) {
  return `data:${mimeType};base64,${buf.toString('base64')}`
}

# Encode an image to Base64 (macOS)
base64 -i logo.png | tr -d '\n'

# Encode an image to a full data URI (Linux)
echo -n "data:image/png;base64,$(base64 -w 0 logo.png)"

# Encode and copy to clipboard (macOS)
echo -n "data:image/png;base64,$(base64 -i logo.png | tr -d '\n')" | pbcopy

# Detect MIME type and encode (Linux, requires file command)
MIME=$(file -b --mime-type image.webp)
echo -n "data:$MIME;base64,$(base64 -w 0 image.webp)"

Questions fréquentes