Français
العربية
Deutsch
English
Español
Italiano
Português
Русский
Türkçe
Tiếng Việt
Convertisseur image vers Base64
Transformez vos images en chaînes Base64 pour les intégrer dans le code.
Embarquer une image directement dans du code Base64 réduit le nombre de requêtes HTTP et accélère les petites icônes ou logos. C’est une pratique courant en web, en particulier pour les favicons intégrés, les images de fond CSS et les thumbnails JSON. L’inconvénient : la chaîne Base64 est 33 % plus grande que l’image binaire originale.
Quand embarquer une image en Base64 se justifie
Embarquer une image est judicieux pour les petits fichiers : les icônes (< 50 Ko), les logos simples, les images de fond CSS de quelques kilo-octets. Une image de 30 Ko encodée en Base64 devient une chaîne de 40 Ko. Cette surcharge est négligeable si elle élimine une requête réseau. Mais une photo de 2 Mo encodée en Base64 devient 2,6 Mo : c’est contre-productif.
Le vrai gain est la réduction du nombre de requêtes. Sur un site mobile lent (3G), économiser 5 requêtes pour les petites icônes peut être plus important que d’accepter une surcharge Base64. Utilisez cet outil pour les vraiment petits assets.
Convertir une image en Base64
- Chargez votre image PNG, JPG, GIF, WebP, SVG ou autre format.
- L’outil génère immédiatement une chaîne Base64 et un code HTML/CSS d’exemple.
- Copiez la chaîne ou le bloc de code à intégrer directement dans votre HTML, CSS ou JSON.
- Testez que l’image s’affiche correctement en ligne.
Les formats et leurs cas d’usage
- PNG en Base64 — Logos, icônes, images avec transparence ; excellent pour CSS background-image
- JPG en Base64 — Photos compressées ; peu utile en Base64 car JPG est déjà petit
- SVG en Base64 — Icônes vectorielles ; très compact, parfait pour data URI
- GIF en Base64 — Animations courtes ; généralement trop gros pour Base64, préférez WebP animé
- WebP en Base64 — Images modernes ultra-compressées ; idéal si les navigateurs cibles le supportent
Usages réels du Base64 en ligne
- Favicons intégrées dans une balise pour éviter une requête externe
- Images de fond CSS intégrées directement dans la feuille de styles
- Thumbnails retournés par une API JSON pour les galeries mobiles
- Logos en SVG Base64 dans les fichiers de configuration ou de manifeste
- Images temporaires en dataURI pour les aperçus avant upload
- Icônes système Windows .ico encodées dans du fichier XML ou JSON
Questions sur la conversion Base64
Comment utiliser la chaîne Base64 en CSS ?
Utilisez la propriété background-image avec data URI : background-image: url('data:image/png;base64,...'). Le navigateur décode et affiche l’image directement sans requête.
Y a-t-il une limite de taille pour Base64 ?
Techniquement non, mais les navigateurs et serveurs acceptent généralement jusqu’à 2-4 Mo. Au-delà, scindez en plusieurs images ou optez pour un CDN classique.
Le Base64 ralentit-il la page ?
Non, c’est un trade-off. Moins de requêtes = chargement plus rapide sur mobile. Mais le parsing Base64 est instantané sur les appareils modernes.
Peux-tu convertir un GIF animé en Base64 ?
Oui, le GIF animé entire fonctionne en Base64. La chaîne est très longue, mais l’animation reste synchronisée.
Qu’est-ce qu’un data URI exactement ?
Un data URI est une URL qui contient les données elles-mêmes plutôt qu’une adresse. Format : data:[MIME];base64,[données]. Les navigateurs la décodent en ligne.
