Guide développeur
Image Base64 en HTML, CSS et JavaScript
Exemples pratiques pour intégrer des données d'image Base64 dans le code front-end, avec des notes sur les performances et la taille des fichiers.
4.8 / 5 124 avis
Qu'est-ce qu'une data URI d'image Base64 ?
Une data URI combine le type MIME et le contenu Base64 en une seule chaîne. Un format courant ressemble à data:image/png;base64,iVBORw0KGgo...
Vous utilisez une valeur data image base64 lorsque vous voulez référencer une image sans URL de fichier séparée. Le navigateur lit le texte et affiche l'image directement.
Note : les recherches html to base64 font généralement référence à l'encodage d'un fichier HTML lui-même. Ce guide se concentre sur l'intégration de données d'image Base64 dans HTML, CSS et JavaScript.
Image Base64 dans une balise HTML img
Utilisez une data URI dans l'attribut src lorsque vous avez besoin d'un extrait HTML autonome avec un modèle base64 img tag.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" alt="1x1 pixel" />Remplacez la valeur d'exemple par la sortie du convertisseur Image en Base64.
Image d'arrière-plan Base64 en CSS
Utilisez des images encodées pour de petites icônes, placeholders et arrière-plans décoratifs avec un modèle background image base64.
.icon { width: 24px; height: 24px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=="); background-size: cover; }Gardez les data URIs CSS petites pour que votre feuille de style reste rapide à analyser et télécharger.
Convertir une image en Base64 avec JavaScript
Générez Base64 dans le navigateur lorsque vous avez besoin de workflows convert image to base64 javascript pour des téléversements, aperçus ou appels API.
function fileToDataUrl(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(file); }); }Le résultat inclut le préfixe data URI et le contenu encodé. C'est une approche image to base64 javascript courante.
const dataUrl = canvas.toDataURL('image/png'); const base64 = dataUrl.split(',')[1];Utilisez la sortie canvas lorsque vous avez déjà dessiné l'image sur un élément canvas.
Exemples d'images Base64
Les chaînes PNG et GIF Base64 sont courantes pour de petites ressources UI comme les icônes, placeholders et points de chargement.
JPEG Base64 commence souvent par /9j/ lorsque vous consultez uniquement les caractères encodés sans le préfixe.
Lorsque la documentation mentionne une chaîne image to base64, elle désigne généralement soit les caractères encodés bruts, soit la data URI complète. Les deux formats apparaissent dans les projets réels.
Utilisez nos pages convertisseur pour créer un exemple base64 image ou image base64 example à partir de vos propres fichiers au lieu de vous fier à du texte placeholder.
Convertisseurs associés
Avantages et inconvénients des images Base64
Avantages
Vous réduisez les requêtes de fichiers séparées pour de minuscules ressources, transmettez facilement des images via JSON et copiez une seule chaîne à plusieurs endroits.
Inconvénients
La sortie Base64 image encode est plus volumineuse que le fichier source, plus difficile à mettre en cache comme ressource autonome, et peu adaptée aux grandes photos.
Questions fréquentes
Collez la data URI complète dans l'attribut src d'une balise img. Vous pouvez copier un extrait prêt à l'emploi depuis le convertisseur Image en Base64.
Utilisez Base64 en CSS pour de très petites ressources comme les icônes. Évitez les grandes valeurs background image base64 car elles augmentent la taille de la feuille de style.
Base64 peut aider pour de minuscules fichiers, mais il nuit généralement aux performances pour les grandes images car la chaîne encodée est plus volumineuse et plus difficile à mettre en cache séparément.
Utilisez FileReader avec readAsDataURL pour les téléversements ou canvas.toDataURL lorsque l'image est déjà dessinée sur un canvas. Les deux méthodes renvoient une chaîne que vous pouvez diviser ou coller directement.