Image en base64
Une image que l’on colle dans une feuille de style.
Déposez vos fichiers ici
ou cliquez pour les choisir sur votre appareilFormats acceptés : JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP, HEIC, HEIF, SVG, ICO
Jusqu'à 3 fichiers par opérationJusqu'à 20 Mo par fichier5 opérations par jourSupprimer les limites avec Pro✓ Fonctionne hors ligne
Vos fichiers restent sur votre appareil
Cet outil fonctionne entièrement dans votre navigateur. Rien n'est envoyé, rien n'est stocké, et vous pouvez même couper votre connexion internet avant de commencer.
Exemple
Exemple : le logo d’une page de maintenance tenue dans un seul fichier HTML
Pendant une mise à jour, une boutique en ligne affiche maintenance.html, une page sans dossier d’images : rien ne doit manquer si le reste du site est arrêté. Le logo logo-atelier.png pèse 1 536 octets. Me donner : « Une règle CSS background-image ».
- 1 536 octets font 512 groupes de 3, et chaque groupe devient 4 caractères : 2 048 caractères de base64, un tiers de plus que le fichier.
- La note de taille sous le résultat le chiffre : 1,5 kB devenus 2,0 kB.
- La balise img prend le nom du fichier sans extension comme texte alternatif : remplacez-le par une vraie description.
| Me donner | Le résultat commence par | Caractères |
|---|---|---|
| La data URI seule | data:image/png;base64, | 2 070 |
| Une règle CSS background-image | background-image: url("data:image/png;base64, | 2 096 |
| Une balise img | <img src="data:image/png;base64, | 2 101 |
| Le base64 seul, sans préfixe | directement le base64 | 2 048 |
La règle se colle dans la balise style de maintenance.html : le logo s’affiche sans aucune requête, octet pour octet le PNG d’origine. Une photo de vitrine de 48 kB deviendrait 64 kB de texte à chaque chargement : l’outil le signale, gardez-la en fichier à part.
Comment ça marche
- Ajoutez l’image. PNG, JPEG, GIF, WebP, AVIF, SVG, BMP et ICO fonctionnent.
- Choisissez ce qui l’entoure — data URI nue, règle CSS ou balise img.
- Copiez le résultat.
- Regardez la note de taille. Inliner économise une requête, et cesse d’être rentable plus tôt qu’on ne croit.
Questions fréquentes
- L’image est-elle réencodée ou compressée ?
- Non. Les octets du fichier sont lus et encodés tels quels : un PNG optimisé le reste, un GIF animé reste animé. Un outil qui réencoderait « pour aider » changerait discrètement les couleurs d’une icône.
- De combien cela grossit-il ?
- D’environ un tiers. Le base64 transforme trois octets en quatre, plus le préfixe. C’est le prix d’une requête HTTP économisée.
- Quand cela vaut-il vraiment le coup ?
- Pour quelque chose de petit et immédiatement nécessaire : une icône, un petit logo, une page HTML qui doit tenir en un seul fichier. Au-delà de quelques kilo-octets, les octets ajoutés à chaque chargement coûtent plus que la requête économisée ; l’outil le signale au-dessus de 8 kB.
- Puis-je inliner un SVG ainsi ?
- Vous le pouvez, et souvent vous ne devriez pas : un SVG est du texte, il peut aller directement dans le HTML où le CSS peut le colorer. Le base64 sert quand il faut absolument une seule chaîne opaque.
- Puis-je encoder plusieurs images à la fois ?
- Oui, 3 par opération en gratuit : les résultats se suivent dans le même texte, chacun précédé d’un commentaire avec le nom du fichier, sa taille avant et après. Le tout se copie ou se télécharge en base64.txt.
- Y a-t-il un envoi ?
- Non. Tout se passe dans votre navigateur.