Convertir une image en Base64

Ce que vous pouvez faire ici

• Lire localement une image de 5 Mo maximum.
• Afficher une URL de données avec type MIME et contenu Base64.
• Indiquer le poids, les dimensions et la longueur totale de la chaîne.
• Copier la Data URI ou une déclaration CSS background-image.
• Conserver les octets du format source sans réencodage de l’image.

Réponse rapide : transformer une image en Base64

Choisissez l’image et attendez l’affichage du poids, des dimensions et de la chaîne. Cliquez sur « Copier l’URL de données » si le champ attendu accepte une valeur commençant par `data:image/…;base64,`. Utilisez « Copier pour CSS » pour obtenir une déclaration `background-image`. Collez d’abord le résultat dans un fichier de test.

La sortie est une Data URI complète, pas uniquement le bloc Base64. Le texte avant la virgule décrit le type de contenu et l’encodage. Une API peut demander seulement la partie située après la virgule ; un attribut HTML ou une propriété CSS attend souvent l’URL complète. Suivez le contrat exact de la destination.

Comprendre une Data URI image

Une URL de données suit la forme `data:type/sous-type;base64,données`. Pour une image, le type peut être `image/png`, `image/jpeg`, `image/webp`, `image/gif` ou un autre MIME fourni par le fichier. La virgule sépare l’en-tête du contenu. Le navigateur peut ensuite reconstruire la ressource sans appeler une URL d’image externe.

Base64 représente des octets avec un alphabet textuel. Il ne transforme pas un PNG en JPG et ne redessine pas l’image. Un GIF animé conserve ses octets animés dans la chaîne ; un SVG reste un SVG encodé. L’outil lit le fichier avec FileReader, ce qui évite une perte de qualité mais n’effectue aucune optimisation.

Base64 augmente le volume et ne chiffre rien

La représentation Base64 utilise quatre caractères pour trois octets dans le cas général, auxquels s’ajoute l’en-tête. La chaîne est donc habituellement plus volumineuse que le fichier binaire avant compression de transport. La longueur exacte affichée permet de constater le coût réel. Convertir une photo de 400 Ko ne la rend pas plus légère.

Base64 n’est ni un chiffrement, ni un mot de passe, ni une anonymisation. Toute personne disposant de la chaîne peut reconstruire l’image. Ne publiez pas une signature, un document personnel ou une capture confidentielle sous prétexte que son contenu ressemble à une suite de caractères. La conversion locale protège seulement l’opération sur cette page.

Quand intégrer une petite image dans HTML ou CSS

Une Data URI peut être pratique pour un minuscule pictogramme, un prototype autonome, une démonstration technique ou un format de configuration qui n’accepte que du texte. En HTML, une image informative doit toujours conserver un texte alternatif pertinent. En CSS, le bouton prépare seulement `background-image`; il ne choisit ni sélecteur, ni taille, ni position.

Pour une photo, un fond lourd ou une ressource réutilisée sur plusieurs pages, une URL de fichier optimisé est souvent préférable. Le navigateur peut mettre ce fichier en cache séparément, le code reste lisible et la même image n’est pas répétée dans chaque document. Mesurez le HTML ou le CSS final, pas seulement le nombre de requêtes.

CSP, API, messagerie et compatibilité

Le système qui reçoit la chaîne peut imposer ses propres règles. Une Content Security Policy peut interdire `data:` pour les images. Un éditeur peut tronquer un champ, une API peut refuser l’en-tête, un client de messagerie peut supprimer le contenu embarqué. Une chaîne valide dans ce navigateur n’est donc pas une garantie universelle.

Vérifiez le type MIME, la présence de `;base64,`, le premier et le dernier caractère après la copie. Testez le résultat dans l’environnement réel avec une image fictive. Si le presse-papiers est bloqué, le navigateur peut proposer une copie manuelle ; assurez-vous alors que la longue valeur n’a pas été sélectionnée partiellement.

Limite de 5 Mo et méthode de vérification

La limite de 5 Mo évite de placer une chaîne immense dans la page et le presse-papiers. Une URL de données occupe plus de mémoire que le fichier, surtout sur téléphone. Pour une ressource trop grande, compressez ou redimensionnez une copie, ou conservez un fichier servi par URL normale.

Pour vérifier, placez la Data URI dans un document de test, ouvrez-le et comparez dimensions, transparence, animation et contenu avec l’original. Confirmez aussi le comportement de la CSP et le poids du document final. La longueur n’est ni une mesure de qualité, ni une preuve de sécurité.

Mode d’emploi étape par étape

1. Choisissez une image de 5 Mo maximum.
2. Contrôlez le type MIME, les dimensions et la longueur de la Data URI.
3. Copiez l’URL complète ou la déclaration CSS selon le champ attendu.
4. Testez la chaîne dans un fichier fictif et dans la destination réelle.
5. Vérifiez poids, cache, CSP et confidentialité avant publication.

Dans quelles situations cet outil est utile

• Intégrer un petit pictogramme dans un prototype HTML autonome.
• Créer un background-image CSS pour une démonstration locale.
• Préparer une valeur pour une API qui documente une Data URI.
• Comparer la longueur Base64 d’un PNG et d’une copie optimisée.
• Identifier qu’un champ demande le bloc après la virgule uniquement.

Exemples détaillés

Limites et vérifications importantes

• La sortie est une URL de données complète.
• Base64 encode les octets mais ne compresse, ne chiffre et n’anonymise pas.
• La chaîne est généralement plus grande que le fichier binaire.
• Une CSP, une API ou un éditeur peut refuser ou tronquer la valeur.
• Toute personne ayant la chaîne peut reconstruire l’image.

Sources et documentation à consulter

• MDN — URL de données Syntaxe et comportement du schéma data:.
• RFC 4648 — Base64 Spécification des codages Base16, Base32 et Base64.

Questions fréquentes