Qu'est-ce qu'une image Base64
Base64 est un moyen de coder des données binaires en texte pur. Une image convertie en Base64 devient une longue chaîne de texte, qui peut être intégrée directement dans HTML/CSS, sans nécessiter de fichier image séparé. Cette utilisation s'appelle « image en ligne ».
Quand utiliser les images Base64
Scénarios adaptés à l'intégration en ligne
- Petites icônes : les petites icônes de quelques Ko intégrées réduisent les requêtes HTTP, chargent plus vite
- Modèles d'e-mail : les clients de messagerie restreignent les images externes, l'intégration est plus fiable
- Livraison en un fichier : rapports HTML, démos à regrouper en un seul fichier
- URI de données : images de fond CSS, références SVG
Scénarios non adaptés à l'intégration en ligne
- Grandes images : le codage Base64 augmente la taille de 33 % par rapport à l'original, l'intégration des grandes images est plus lente
- Images à mettre en cache : les images en ligne ne peuvent pas être mises en cache séparément par le navigateur, elles sont rechargées à chaque chargement HTML
- Images fréquemment réutilisées : pour les images partagées entre plusieurs pages, fichier externe + cache est plus efficace
Comment convertir
Utilisez l'outil de conversion d'image en Base64 DocsAll pour convertir en un clic :
- Ouvrez Image vers Base64
- Téléchargez l'image
- Génération automatique de la chaîne Base64 et du Data URL
- Copiez pour utiliser
Inversement, pour restaurer une image depuis Base64, utilisez l'outil Base64 vers image.
Mode d'emploi
Le format Data URL obtenu ressemble à data:image/png;base64,iVBORw0KGgo... une longue chaîne.
- En HTML : à écrire directement dans l'attribut src de la balise img
- En CSS : à écrire dans le url() de background-image
Compromis
| Dimension | Fichier image externe | Intégration Base64 |
|---|---|---|
| Requête HTTP | une requête par image | aucune requête supplémentaire |
| Taille | taille d'origine | 33 % plus grand |
| Cache | peut être mis en cache indépendamment | mis en cache avec le HTML |
| Utilisation | grandes images, images réutilisées | petites icônes, fichier unique |
Recommandation
Intégrez les petites images de type icône (moins de 4 Ko), utilisez des fichiers externes pour les grandes photos. Combiné avec la compression d'images pour réduire d'abord la taille, puis décidez d'intégrer ou non, l'effet est optimal. Pour en savoir plus sur Base64, consultez le Guide d'encodage et décodage Base64.