Suivez cet exemple concret, puis adaptez les mêmes commandes à votre propre image. Ouvrir Convertisseur d'image vers Base64.
Sélectionnez une image et prévisualisez son identité
Ouvrez le convertisseur Image vers Base64. Sélectionnez une image ou Essayez un échantillon. L'exemple utilise le favicon-orbit.png de 512 × 512 pixels, qui contient 202,491 octets. L'éditeur affiche l'image au-dessus de son code afin que vous puissiez confirmer que vous avez sélectionné la ressource prévue.
PNG, JPG, WebP, GIF, BMP et AVIF sont pris en charge lorsque votre navigateur peut les décoder pour la prévisualisation. La taille de fichier maximale est de 25 Mo, avec des limites de 60 mégapixels et 16,000 pixels par côté. Le balisage SVG n'est pas accepté par ce convertisseur matriciel.
L'outil lit les octets du fichier d'origine. Il n'utilise pas la prévisualisation pour reconstruire l'image, la redimensionner ou la recompresser. Les métadonnées existantes et l'animation GIF sont donc conservées dans les données encodées.
Avant l'encodage, utilisez Redimensionner l'image ou Compresseur d'image si vous avez besoin d'une ressource plus petite. Base64 lui-même ne réduit pas la taille de l'image.
Choisissez la représentation attendue par votre projet
Ouvrez Paramètres et sélectionnez image HTML sous Format de code pour cet exemple. Le résultat est une balise img contenant une URL de données Base64. L'attribut alt est initialement vide ; écrivez un texte alternatif utile lorsque l'image communique des informations.
L'URL de données commence par un préfixe tel que data:image/png;base64, suivi des données encodées. Base64 brut contient uniquement les données. L'arrière-plan CSS enveloppe l'URL de données dans une déclaration background-image. Ces représentations servent des destinations différentes, copiez donc la forme demandée par votre application plutôt que de changer uniquement le nom de fichier.
Le panneau de code se met à jour immédiatement après avoir modifié le Format de code. L'icône de copie copie la représentation actuelle et affiche la confirmation de copie partagée. Lorsque l'accès au presse-papiers est bloqué, le code est sélectionné pour une copie manuelle.
Une balise HTML img complète n'est pas la même chose qu'une URL de données. Utilisez uniquement la valeur src lorsqu'un champ demande une URL.
L'exemple dans ce guide
Essayez un exemple : favicon-orbit.png, 512 × 512 px, 202,491 octets. Choisissez l'image HTML sous le format de code. Sélectionnez Démarrer et téléchargez favicon-orbit-base64.txt.
- Original PNG
- 512 × 512 px · 202,491 octets
- Sortie texte HTML
- 270,029 octets
- Encodage
- Octets originaux ; aucune recompression
Téléchargez le code et comprenez sa taille
Sélectionnez Démarrer, puis Télécharger. L'exemple enregistre favicon-orbit-base64.txt contenant HTML code d'image. Ses 270,029 octets sont plus volumineux que la source de 202,491 octets. La comparaison de l'article montre le début réel du texte téléchargé, raccourci uniquement pour la lisibilité.
Le Base64 convertit généralement trois octets sources en quatre caractères textuels, ajoutant environ un tiers avant le petit conteneur. Intégrer une petite icône peut rendre un document autonome, mais placer de grandes chaînes d'image à l'intérieur de HTML ou CSS agrandit également ce document et empêche l'image d'être mise en cache en tant que fichier séparé.
L'encodage n'est pas du chiffrement. Quiconque possède la chaîne Base64 complète peut récupérer l'image sous-jacente. Traitez le code avec le même soin que la source s'il contient des informations privées.
L'extrait tronqué dans cet article est explicatif. Utilisez le TXT téléchargé complet ou copiez le code intégral depuis l'outil.
Questions fréquentes
L'encodage réduit-il la qualité de l'image ?
Non. L'encodage préserve les octets originaux. Il ne redimensionne pas, ne compresse pas et ne redessine pas l'image.
Pourquoi la chaîne Base64 est-elle plus grande que l'image ?
Base64 représente trois octets d'entrée en utilisant quatre caractères textuels, donc cela ajoute normalement environ un tiers avant un wrapper ou un préfixe.
Les animations GIF sont-elles préservées ?
L'encodage préserve les octets GIF originaux, y compris l'animation. Un aperçu peut afficher une image fixe alors que les données encodées conservent toutes les images.
Base64 est-il sûr pour les images secrètes ?
Base64 n'est pas un chiffrement. Gardez la chaîne privée si l'image sous-jacente est privée. Le convertisseur lui-même la traite localement dans votre navigateur.
Transformez la bonne image en bon code.
Essayez un exemple ou utilisez votre propre fichier, et vérifiez le résultat avant de partager.
