Image vers Base64
Convertissez des images en Base64 : intégrez des images directement dans le code et CSS.
Comment utiliser Image vers Base64
- Téléchargez l'image — il est préférable d'intégrer de petits fichiers.
- Copiez l'URI des données — la chaîne complète data :image/…;base64,….
- Intégrez-la : src="data:…" en HTML, url(data:…) en CSS ou en tant que valeur de chaîne JSON.
- Respectez la règle de taille — icônes oui, photos non ; au-delà d'environ 20 Ko, hébergez le fichier à la place.
Qu'est-ce que Image vers Base64 ?
Un convertisseur d'image en Base64 encode un fichier image sous forme de texte : l'URI de données (data:image/png;base64,iVBORw0…) qui intègre l'image directement dans HTML, CSS, JSON ou JavaScript au lieu de référencer un fichier séparé. L'image devient une partie du code.
Le commerce se fait entre requêtes et octets : une image intégrée enregistre une requête HTTP (une fois significative, moins sous HTTP/2+) mais coûte environ 33 % de surcharge de taille (taxe d'encodage Base64) et perd la mise en cache indépendante. Le sweet spot est petit : des icônes, de minuscules logos et des images d'espace réservé sous quelques Ko sont bien en ligne ; les photos ne le font pas.
À propos de Image vers Base64
Téléchargez l'image et copiez son URI de données Base64.
Là où l'inline gagne sa place : petites icônes et décorations en CSS (une feuille de style, aucune requête supplémentaire - l'utilisation classique), HTML à fichier unique autonome (modèles d'e-mail où les images liées sont bloquées, documents hors ligne, démos de code dans des bacs à sable), images dans des charges utiles JSON (API et configurations qui doivent contenir une image dans le texte) et prototypage rapide sans hébergement d'actifs. Le cas du courrier électronique est important : les images intégrées s'affichent sans le message "charger les images ?" gate — bien que la discipline en matière de taille soit doublement importante.
La règle de jugement : moins de ~ 5 Ko, inline librement ; 5 à 20 Ko, considérez ; au-delà, hébergez le fichier : la surcharge de 33 % et la perte de mise en cache dépassent la demande enregistrée. Et notez que les URI de données gonflent visiblement le fichier contenant : une feuille de style contenant dix icônes en ligne les porte dans sa taille. Les fichiers sont convertis et renvoyés, non stockés.
Foire aux questions
Learn more
Comment convertir une image en URI de données Base64
L'intégration de petites images directement dans le code peut enregistrer les requêtes HTTP. Voici comment fonctionne la conversion d'image Base64 et quand l'utiliser.
Read the guide