UltKit

Convertir une image en Base64

Transformez un fichier image en une ligne de texte à coller dans du HTML, du CSS, une requête JSON ou un fichier Markdown. Le préfixe data URI est déjà ajouté devant, le texte fonctionne donc dès que vous le collez.

Convertisseur de données

ou déposez Fichiers CSV, TSV, TXT … ici ·

95 Mo max. par fichier· Jusqu'à 20 fichiers· Supprimés après 30 minutes

Sortie

Les fichiers sont traités sur nos serveurs et supprimés après 30 minutes.

Comment utiliser cet outil

  1. 1

    Ajoutez les images

    Déposez vos fichiers PNG, JPG, GIF, WebP ou SVG dans la zone d'import, jusqu'à 20 à la fois et 95 Mo chacun.

  2. 2

    Gardez ou retirez le préfixe

    Préfixe Data URI est activé : le résultat commence donc par data:image/png;base64, ou par le type correspondant. Désactivez-le dans Réglages avancés lorsqu'une API attend la chaîne Base64 seule.

  3. 3

    Convertissez et copiez

    Cliquez sur Convertir en Base64 text et téléchargez un fichier .txt par image, prêt à être collé dans votre code.

Importez l'image et cliquez sur Convertir en Base64 text. Vous obtenez le fichier encodé en simples caractères, commençant par data:image/…;base64, pour l'insérer directement dans un img src ou un url() CSS. L'image elle-même ne change pas.

À quoi sert une image en Base64

Le Base64 est défini dans la RFC 4648 (2006) et associe chaque groupe de 3 octets de données binaires à 4 caractères d'un alphabet de 64 symboles : A–Z, a–z, 0–9, + et /. Le résultat passe par tout canal conçu pour le texte. Le schéma data URI, rédigé par Larry Masinter dans la RFC 2397 en 1998, permet ensuite au navigateur de traiter ce texte comme un fichier.

Les développeurs front-end intègrent de petites icônes, des indicateurs de chargement et des images de substitution pour qu'une page s'affiche sans requêtes supplémentaires. Les développeurs back-end envoient des images dans du JSON, car de nombreuses API, dont les services de vision et d'OCR, acceptent une image dans un champ Base64. Les testeurs conservent des jeux de test dans le code source, et ceux qui créent des rapports HTML en un seul fichier ou des notes Markdown y intègrent des captures d'écran pour que le fichier reste autonome lorsqu'il est envoyé par e-mail ou archivé.

À quoi ressemble le résultat en Base64

Un PNG transparent de 1 × 1 (68 octets) en data URI dans une balise img
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAXpeqz8AAAAASUVORK5CYII=" width="1" height="1" alt="Pixel">

Fichier d'icône PNG

24 Ko

jeu d'icônes de barre d'outils typique, 96 × 96 px

+ 33 % de taille, aucune perte de qualité

Texte Base64

32 Ko

4 caractères pour 3 octets, plus le préfixe

ANY I

Toute image

Cet outil accepte les formats d'image courants, notamment JPG, PNG, WebP, HEIC, GIF, BMP et TIFF. Le format est détecté automatiquement à partir du fichier, vous n'avez donc pas besoin de savoir de quel type d'image il s'agit.

Convertisseur Any image

BASE64

Texte encodé en Base64

Le Base64 est un encodage, défini dans la RFC 4648, qui transforme n'importe quelles données binaires en une chaîne de 64 caractères texte sûrs. Il sert à intégrer des images dans le HTML et le CSS sous forme d'URI de données, à joindre des fichiers à un e-mail et à envoyer des données binaires en JSON ou en XML. L'encodage est entièrement réversible mais augmente la taille des données d'environ 33 %. Le Base64 n'est pas du chiffrement et n'offre aucune sécurité ; n'importe qui peut le décoder.

Compression
Sans perte
Transparence
–
Animation
–
Année de création
–
Convertisseur BASE64

Les images deviennent du texte Base64 quand elles doivent voyager dans un support qui ne transporte que du texte : un fichier HTML ou CSS sans requête séparée, un champ JSON d'un appel d'API, un jeu de test ou un rapport en un seul fichier.

Quand intégrer une image aide une page, et quand cela la pénalise

L'intégration directe économise une requête, ce qui comptait surtout sous HTTP/1.1, quand les navigateurs n'ouvraient que quelques connexions par site. Avec le multiplexage de HTTP/2 et HTTP/3, les petites requêtes supplémentaires coûtent peu : l'avantage diminue alors que les inconvénients demeurent. L'image encodée ne peut pas être mise en cache séparément, elle est retéléchargée à chaque modification du HTML ou du CSS, et elle retarde l'analyse du fichier qui la contient.

Une règle raisonnable consiste à n'intégrer que des images de quelques kilo-octets présentes sur chaque page, comme un logo ou un sprite d'icônes, et à servir tout le reste sous forme de fichiers. Les photos n'ont presque jamais leur place en ligne. Si vous avez besoin d'un autre type de fichier plutôt que de texte, le convertisseur d'image s'en charge.

Atouts d'une image en Base64

  • Un seul fichier HTML, CSS ou JSON autonome
  • Aucune requête supplémentaire pour de minuscules icônes
  • Sûr dans le JSON, le XML et d'autres formats texte
  • Sans perte et réversible

Inconvénients d'une image en Base64

  • Environ 33 % plus volumineux que le fichier binaire
  • Non mis en cache séparément par le navigateur
  • Bloqué comme image par de nombreux clients de messagerie
  • Difficile à relire dans les diffs de code

Questions sur la conversion d’image en Base64

Quelle différence entre Base64 et data URI ?

Le Base64, ce sont uniquement les caractères encodés. Un data URI les enveloppe avec un schéma et un type, data:image/png;base64, suivi des caractères, afin que le navigateur sache les décoder et les afficher. HTML et CSS demandent le data URI complet ; la plupart des API JSON attendent seulement la partie Base64.

De combien une image grossit-elle en Base64 ?

Le Base64 écrit 4 caractères pour 3 octets : le texte est donc environ un tiers plus gros que le fichier, plus le court préfixe. Un PNG de 30 Ko donne environ 40 Ko de texte. Si le HTML ou le CSS est servi compressé en gzip, une partie de ce surcoût est récupérée lors du transfert.

Peut-on utiliser une image en Base64 dans une signature d’e-mail ?

Ce n'est pas fiable. Gmail n'affiche pas les images en data URI et plusieurs clients de messagerie de bureau les suppriment aussi : les destinataires voient une icône cassée. Hébergez l'image sur un serveur web ou joignez-la, et réservez le Base64 aux pages web et aux applications.

Faut-il encoder une icône SVG en Base64 ?

Cela fonctionne, mais le SVG est déjà du texte. Encoder le code en URL plutôt qu'en Base64 donne généralement un data URI plus court et lisible. Au-delà d'une petite icône, un fichier SVG séparé que le navigateur peut mettre en cache est préférable.

Peut-on reconvertir le texte Base64 en image ?

Oui, l'encodage est sans perte et entièrement réversible : le décodage restitue exactement les octets d'origine. Chaque langage de programmation fournit un décodeur, et coller un data URI complet dans la barre d'adresse du navigateur affiche l'image.

L’encodage modifie-t-il la qualité de l’image ?

Non. Le Base64 change la façon d'écrire les octets, pas les pixels. Pour raccourcir la chaîne, réduisez d'abord l'image, par exemple avec compresser une image à 20 Ko, puis encodez le fichier plus léger.