🖼️ Convertisseur d'images Base64

Convertissez des images en chaînes Base64 ou restaurez une image à partir de Base64.

Fichier image

📁

Cliquez ou glissez-déposez une image

Inclure le Data URL

GUIDE

Learn more

1. Qu'est-ce que l'encodage Base64

Base64 est une méthode d'encodage qui convertit des données binaires en chaînes ASCII. Elle permet de représenter des fichiers binaires comme les images, l'audio et la vidéo sous forme de texte, ce qui rend possible la transmission de données binaires via des protocoles textuels tels que l'e-mail, JSON et XML. Elle n'utilise que 64 caractères ASCII (A-Z, a-z, 0-9, +, /) pour représenter toutes les données binaires. Utile pour l'insertion en ligne d'images dans du HTML via des Data URL ou pour inclure des images dans des réponses d'API. Cependant, elle augmente la taille d'origine d'environ 33 %.

2. Cas d'usage des images Base64

Les images Base64 sont utilisées dans divers scénarios de développement web. L'insertion en ligne de petites icônes en tant que background-image CSS réduit les requêtes HTTP, améliorant ainsi la vitesse de chargement de la page. Utilisée dans les modèles d'e-mail pour contourner le blocage des images externes. Lors du déploiement de pages web complètes sous forme de fichiers HTML uniques, toutes les images peuvent être incluses en Base64. Dans les API RESTful, les images peuvent être directement incluses dans les réponses JSON sans téléchargement de fichier séparé. Également utilisée lors de la transmission au serveur d'images créées avec l'API Canvas.

3. Format Data URL

Le Data URL est un schéma permettant de représenter des fichiers sous forme d'URL. Format : data:[<mediatype>][;base64],<data>. Exemple : data:image/png;base64,iVBORw0KG... Le mediatype spécifie un type MIME comme image/png, image/jpeg, image/gif. ;base64 indique la méthode d'encodage, suivie de la chaîne Base64 réelle. Peut être utilisé directement dans les balises img HTML comme <img src="data:image/png;base64,...">. Également utilisé en CSS comme background: url(data:image/svg+xml;base64,...). Les navigateurs traitent les Data URL comme des URL classiques pour afficher les images.

4. Considérations d'optimisation des performances

Les performances doivent être prises en compte lors de l'utilisation d'images Base64. Les petites images (moins de 1 à 2 Ko) bénéficient de l'insertion en ligne plutôt que de l'overhead des requêtes HTTP. Les grandes images peuvent en réalité ralentir en raison de l'augmentation de taille de 33 % et de l'overhead d'analyse lié à Base64. Les images Base64 ne peuvent pas utiliser le cache du navigateur et sont téléchargées à chaque fois avec le HTML/CSS. Les images utilisées fréquemment devraient être fournies sous forme de fichiers séparés pour permettre la mise en cache. La compression Gzip est efficace sur les chaînes Base64, il convient donc de l'activer sur les serveurs. Il est approprié d'utiliser Base64 pour des images décoratives ou des icônes, et non pour du contenu critique.

5. Considérations de sécurité

Des risques de sécurité existent avec les images Base64. Lors de l'affichage d'images téléchargées par les utilisateurs et converties en Base64, méfiez-vous des attaques XSS. Les images SVG sont particulièrement dangereuses car elles peuvent contenir du JavaScript. Les en-têtes Content-Security-Policy peuvent restreindre l'utilisation du schéma data:. Définissez des limites de taille de fichier pour prévenir les attaques par épuisement de la mémoire. Validez les types d'images pour ne traiter que les types MIME autorisés (image/png, image/jpeg). La vérification côté serveur doit confirmer qu'il s'agit bien de fichiers image réels et vérifier l'absence de code malveillant.

6. Conversion Base64 selon le langage de programmation

La plupart des langages de programmation fournissent nativement l'encodage Base64. JavaScript utilise btoa() pour encoder, atob() pour décoder, et l'API FileReader pour lire des fichiers en Base64. Python fournit b64encode() et b64decode() dans le module base64. PHP utilise les fonctions base64_encode() et base64_decode(). Java fournit getEncoder() et getDecoder() via la classe java.util.Base64. Node.js encode avec Buffer.from(data).toString("base64") et décode avec Buffer.from(base64, "base64"). La lecture de fichiers image et leur conversion en Base64 sont facilement implémentées avec les bibliothèques standard dans tous les langages.