KivTools

Encoder une image en URL de données Base64

Choisissez l’image pour encoder ses octets. Base64 représente les données sous forme de texte, sans les compresser, et augmente généralement leur taille.

Fonctionne localement dans votre navigateur

Comment transformer un fichier image en URL de données Base64

L’outil fonctionne dans les deux sens : choisissez une image et les octets du fichier reviennent sous forme d’URL data:image/…;base64,… ; ou collez une telle URL (ou une charge Base64 nue) et la page montre ce qu’elle contient.

Tout se passe dans cet onglet avec le FileReader et le décodeur d’images du navigateur ; le fichier n’est pas envoyé. Ici, pas de compression, de redimensionnement ni de suppression des métadonnées : cela demande un éditeur d’images.

  1. Cliquez sur Choisir une image et sélectionnez un fichier. Le champ se remplit d’une URL data:image/…;base64,… qui commence par le type détecté, et l’aperçu en dessous affiche l’image.
  2. Cliquez sur Copier pour reprendre l’URL complète en CSS (background-image:url("data:…")), en HTML (<img src="data:…">) ou dans une charge JSON.
  3. Pour vérifier ce que vous avez reçu, collez l’URL de données ou la charge Base64 nue dans le champ puis cliquez sur Afficher l’aperçu. La page lit les premiers octets (PNG, JPEG, GIF, WebP, BMP, ICO ou SVG), ajoute le préfixe manquant et affiche l’image.
  4. Cliquez sur Encapsuler dans une balise img lorsque le champ doit contenir un élément <img src="…" alt="…" /> prêt à coller plutôt que l’URL brute.
  5. Cliquez sur Effacer pour vider le champ, l’aperçu et le sélecteur de fichier avant l’image suivante. Une charge tronquée, non Base64 ou qui n’est pas une image le signale au lieu de laisser une image cassée.

Ce que Base64 change — et ce qu’il ne règle pas

Ce que Base64 fait à une image

Base64 associe quatre caractères imprimables à trois octets, si bien que les mêmes octets traversent des canaux texte qui abîmeraient ou tronqueraient des données binaires : HTML, CSS, JSON, XML ou le corps d’un e-mail. Rien n’est compressé — le texte encodé est environ un tiers plus long que le fichier — et le navigateur décode l’URL de données pendant l’analyse de la page, jamais comme un fichier mis en cache à part.

Ce n’est pas non plus du chiffrement : quiconque possède la page ou l’e-mail peut décoder la charge et retrouver les octets d’origine avec n’importe quel décodeur Base64. Une URL de données ne doit donc rien contenir que vous ne publieriez pas.

Quand une URL de données vaut le coup

Un petit logo, une puce de liste ou une texture de fond qui coûterait une requête HTTP par page peut voyager dans la feuille de style. Cela supprime un aller-retour et garantit que l’image est là avant le premier rendu.

Le prix monte avec la taille du fichier : le balisage devient illisible, le HTML se comprime moins bien et aucun navigateur ne peut mettre l’image en cache sans la page. Réservez les URL de données aux ressources bien en dessous de 10 Ko et laissez les photos, les sprites et tout ce qui sert sur plusieurs pages en fichiers séparés.

Vérifier une charge que vous n’avez pas produite

Le Base64 collé arrive généralement sans son type MIME. Cette page lit les premiers octets des données décodées — la signature PNG, JPEG, GIF, WebP, BMP ou ICO, ou la racine <svg d’un document SVG — et écrit le préfixe data:image/…;base64, correspondant : une charge nue cesse d’être une image cassée.

Si les octets ne correspondent à aucun format connu, si l’alphabet ou le remplissage Base64 sont incorrects, ou si le navigateur ne peut pas afficher les données décodées, la ligne d’état précise lequel de ces cas s’est produit. Testez d’abord un petit fichier dont vous connaissez l’image, et décodez aussi avec un second outil ce qui part en production.

Outils récents :