Convertisseur image en Base64

Comment convertir une image en Base64

1. Déposez une image dans la zone, collez-en une depuis le presse-papiers avec Ctrl+V (Cmd+V sur Mac) ou utilisez le sélecteur de fichiers. Les captures d’écran peuvent venir directement du presse-papiers, et vous pouvez traiter plusieurs fichiers à la fois.
2. Si besoin, réduisez ou convertissez l’image d’abord : saisissez une Largeur max. en pixels, choisissez PNG, JPEG ou WebP sous Convertir en, réglez la Qualité ou cochez Supprimer les métadonnées (EXIF).
3. Choisissez un format sous Sortie en. Cette page démarre sur Data URI.
4. Appuyez sur Copier la sortie, ou sur Enregistrer en .txt pour les longs résultats.

L’aperçu affiche le nom du fichier, sa taille, son type MIME et ses dimensions en pixels. Sous les boutons, vous voyez la taille de l’entrée, celle de la sortie et le surcoût en pourcentage : vous savez ainsi ce que vous allez coller.

Formats de sortie et où les utiliser

Les données Base64 sont les mêmes dans tous les formats. Seule l’enveloppe change. Les exemples ci-dessous, raccourcis, utilisent un PNG de 32×32 nommé logo.png :

La sortie <img> inclut width et height, ce qui permet au navigateur de réserver la place avant que l’image soit décodée. Certains moteurs de rendu Markdown, surtout sur les plateformes hébergées, suppriment les URL data: des images : vérifiez le vôtre avant de compter sur la sortie Markdown.

Redimensionner et convertir avant d’encoder

Base64 ajoute un tiers à la taille de ce que vous lui donnez : le meilleur moyen d’obtenir une chaîne courte est donc une image plus petite. Une photo de téléphone affichée en vignette de 300 pixels n’a pas besoin de ses 4000 pixels d’origine. Régler Largeur max. sur 600, soit le double de la taille d’affichage pour rester net sur les écrans haute densité, fait gagner bien plus que n’importe quelle astuce d’encodage.

Ce que font les options :

• Largeur max. ne fait que réduire. Les images plus étroites gardent leurs dimensions, et les proportions sont toujours conservées.
• Convertir en JPEG remplit les zones transparentes de blanc, car le JPEG n’a pas de canal alpha. Utilisez WebP si vous avez besoin à la fois de transparence et d’une petite taille.
• Qualité s’applique aux sorties JPEG et WebP dès qu’une des autres options déclenche un réencodage. Le PNG est sans perte et l’ignore.
• Supprimer les métadonnées (EXIF) retire les données de l’appareil photo comme les coordonnées GPS, le modèle de l’appareil et l’heure de prise de vue. L’option redessine l’image : un JPEG est donc recompressé à la qualité choisie.
• Les GIF, BMP et AVIF sont écrits en PNG quand ils sont réencodés avec Garder le format, car les navigateurs ne savent pas produire ces formats à partir d’un canvas. Un GIF animé ne garde que sa première image.
• Safari ne sait pas encoder en WebP. Si vous choisissez WebP dans Safari, l’outil vous indique qu’il a produit du PNG à la place.
• Les fichiers SVG sont encodés tels quels. Ce sont déjà du texte, et rastériser un dessin vectoriel lui ferait perdre son intérêt.

Un PNG déjà compressé par un optimiseur peut ressortir plus gros après réencodage. L’aperçu affiche la nouvelle taille à côté de l’originale : comparez avant de copier.

Quand intégrer une image, et quand s’en abstenir

Une data URI économise une requête HTTP et garde tout dans un seul fichier. C’est rentable pour :

• les icônes, logos et petits éléments graphiques d’interface de quelques kilo-octets,
• les documents HTML en un seul fichier comme les rapports, la documentation hors ligne ou les tableaux de bord exportés,
• les minuscules aperçus flous affichés pendant le chargement de l’image réelle,
• les fixtures de tests et les payloads JSON où un fichier séparé serait malcommode.

C’est contre-productif pour les photos et pour tout ce qui est volumineux. La copie encodée est environ 33 % plus grosse, elle ne peut pas être mise en cache indépendamment du HTML ou du CSS qui la contient, et elle est retéléchargée sur chaque page qui l’intègre. Une image dans une feuille de style retarde aussi la feuille de style, et donc le rendu. loading="lazy" n’y change rien non plus : les octets sont déjà dans le document. Plus de détails dans les performances des data URI, et le calculateur de taille affiche la taille encodée avant de vous engager.

Les e-mails sont un cas à part. Gmail et plusieurs autres webmails n’affichent pas du tout les images en data URI : les newsletters utilisent donc normalement des images hébergées ou des pièces jointes CID. Voir Base64 dans les e-mails.

Images pour les API et les modèles d’IA de vision

JSON n’a pas de type binaire : les API qui reçoivent une image dans le corps de la requête attendent donc du Base64. C’est le cas de nombreux modèles d’IA multimodaux capables de décrire, classer ou lire le texte d’une image. L’image y est transmise de l’une de ces deux façons :

• une data URI complète en une seule chaîne : data:image/jpeg;base64,/9j/4AAQ...
• du Base64 seul dans un champ, avec le type de média (image/jpeg) dans un autre.

Utilisez Data URI pour la première et Base64 brut pour la seconde. Envoyer le préfixe data: à une API qui attend du Base64 seul, ou l’inverse, est une raison fréquente de rejet de ce genre de requête. Ces services limitent généralement la taille des requêtes et réduisent souvent les grandes images de leur côté de toute façon : redimensionner avant d’encoder allège donc la requête sans rien vous coûter.

Formats d’image intégrables

Le HEIC et le TIFF s’encodent sans problème, mais leur data URI affiche une image cassée dans Chrome et Firefox. Les pages HEIC et TIFF expliquent quoi faire à la place. Pour d’autres signatures, voir les préfixes Base64 courants.

La même chose dans le code

Dans le navigateur, FileReader renvoie directement une data URI :

function imageToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsDataURL(file);
  });
}

En Python, lisez les octets et ajoutez vous-même le préfixe :

import base64, mimetypes

def to_data_uri(path):
    mime = mimetypes.guess_type(path)[0] or "application/octet-stream"
    with open(path, "rb") as f:
        return f"data:{mime};base64,{base64.b64encode(f.read()).decode()}"

D’autres variantes, dont le traitement en streaming des gros fichiers, se trouvent sur Base64 en JavaScript et Base64 en Python.

Quand l’image ne s’affiche pas

• Image cassée dans le HTML. Décochez URL-safe pour les data URI. Les navigateurs ne décodent les URL data: qu’avec l’alphabet standard, et un - ou un _ à la place de + ou / casse l’image.
• Fonctionne en HTML, échoue en CSS. Couper à 76 insère des sauts de ligne dans la chaîne. Les attributs HTML les tolèrent, mais un saut de ligne dans une chaîne CSS url("...") rend la règle invalide. Laissez la coupure désactivée pour tout ce qui n’est pas un corps d’e-mail.
• Préfixe en double. Une chaîne qui commence par data:image/png;base64,data:image/png;base64, vient d’une data URI collée dans un template qui ajoute son propre préfixe. Utilisez Base64 brut dans ce cas.
• Mauvaise image ou aucune image après décodage. Comparez les premiers caractères au tableau ci-dessus. Si le début ne correspond pas au format, la chaîne a été coupée ou mélangée. Base64 en image montre ce que sont réellement les octets.

FAQ