Loading...
Loading...
Déposez un JPG, PNG, WebP, GIF ou SVG pour obtenir une URL de données Base64 avec des extraits à copier-coller pour CSS, HTML et Markdown — ou collez une chaîne Base64 pour la décoder en une image téléchargeable.
Le Base64 est un moyen de représenter des données binaires — comme une image — en utilisant uniquement des caractères ASCII imprimables. La forme d'URL de données (une chaîne commençant par data:image/png;base64,...) vous permet de coller une image entière directement dans HTML, CSS, JSON, Markdown, une signature d'email ou une réponse de serveur, sans fichier séparé requis. L'encodage est sans perte : le décodage du Base64 produit exactement les mêmes octets qui ont été introduits. Le compromis est la taille — le Base64 prend environ 33% de caractères en plus que le binaire sous-jacent, donc un PNG de 100 Ko devient environ 134 Ko de texte Base64. Cela le rend idéal pour les petites icônes, les SVG en ligne et les extraits uniques, et un mauvais choix pour les grandes images héroïques. Cet outil encode n'importe quelle image que vous déposez et décode n'importe quelle chaîne Base64 en une image téléchargeable, le tout effectué entièrement dans votre navigateur.
Utilisez Image → Base64 pour encoder une image que vous avez sur disque. Utilisez Base64 → Image pour décoder une chaîne que vous avez copiée d'une URL de données, d'une réponse API ou d'un fichier CSS.
Pour l'encodage, faites glisser un JPG, PNG, WebP, GIF, SVG, BMP, ICO ou AVIF dans la zone de téléchargement ou cliquez pour choisir depuis votre appareil. L'image s'aperçoit en haut de la carte de résultat.
Cinq extraits prêts à coller sont générés : l'URL de données complète, le Base64 brut (sans préfixe), l'image de fond CSS, la balise HTML <img> et l'image Markdown. Cliquez sur Copier sur celui que vous voulez.
Passez à Base64 → Image, collez soit une URL de données complète, soit la portion Base64 brute. L'outil ajoute automatiquement des espaces aux chaînes courtes et suppose PNG lorsque le préfixe est manquant — cliquez sur Décoder pour prévisualiser.
Une fois décodée, la carte de prévisualisation affiche les dimensions de l'image et une taille de fichier estimée. Cliquez sur Télécharger pour enregistrer les octets originaux sur le disque avec l'extension correcte.
1. Le FileReader.readAsDataURL() du navigateur lit le fichier image en binaire. 2. Il regroupe les octets en morceaux de 3 (24 bits) et réencode chaque morceau en 4 caractères ASCII. 3. L'alphabet de 64 caractères est A-Z, a-z, 0-9, plus '+' et '/' (avec '=' pour le remplissage). 4. La sortie est préfixée par 'data:<mime>;base64,' pour en faire une URL de données utilisable. 5. Le décodage inverse chaque étape : supprimer le préfixe, normaliser les variantes sûres pour l'URL, remplir à un multiple de 4. 6. Les octets décodés sont enveloppés dans un Blob et exposés via createObjectURL — ou simplement utilisés comme l'URL de données directement.
La surcharge de taille de 33 % est intégrée dans les calculs : 3 octets de binaire deviennent 4 octets d'ASCII, un ratio de 4/3. C'est un plancher dur — il n'existe pas de variante Base64 compressée largement utilisée. Le préfixe MIME dans une URL de données n'est pas une décoration optionnelle : les navigateurs, les rendus Markdown et les clients de messagerie l'utilisent pour décider comment rendre les octets. Si vous collez du Base64 brut sans préfixe 'data:image/...', cet outil par défaut à PNG, ce qui est une supposition sûre pour les captures d'écran et les icônes, mais peut produire un aperçu corrompu si la source était en fait JPG. La meilleure pratique est de conserver le format complet de l'URL de données chaque fois que vous copiez ou collez.
Référence : MDN — URL de données
| Cas d'utilisation | Meilleur extrait à copier |
|---|---|
Intégrer une petite icône directement dans le CSS | Copiez l'extrait de background-image CSS. Élimine une requête HTTP pour les icônes de moins de ~5 Ko. Fonctionne bien pour les spinners, les coches, les icônes de style sprite. |
Intégrer une image dans une réponse JSON ou REST API | Copiez l'extrait de l'URL de données. Le destinataire peut le coller directement dans <img src> ou un arrière-plan CSS. Commun pour les applications de chat, les captures d'écran et les téléchargements d'avatar. |
Collez une capture d'écran dans un article de blog Markdown ou un problème GitHub | Copiez l'extrait d'image Markdown. Rendu en ligne sans téléchargement vers un CDN. Certains rendus Markdown (GitHub) rejettent les URL de données très grandes — gardez-les petites. |
Décoder une chaîne Base64 d'un e-mail ou d'une API en un fichier utilisable | Passez à Base64 → Image, collez la chaîne, appuyez sur Décoder, puis Téléchargez. Fonctionne également pour le Base64 brut — par défaut à PNG lorsque le MIME est manquant. |
Découpez le sujet de n'importe quelle photo avec l'IA sur appareil — aucun téléchargement requis.
Réduisez les fichiers JPG, PNG ou WebP dans votre navigateur avec un curseur de qualité interactif.
Ajustez, filtrez, faites pivoter et recadrez des photos dans le navigateur — pas de téléchargements, pas de filigrane.
Composez des mèmes et des collages d'écran avec de vraies couches — collez, faites glisser, recadrez, légendez, exportez.
Dernière mise à jour