Encodeur et décodeur d'images Base64
Convertissez des images en data URL Base64 et inversement. Déposez un fichier ou collez une data URL — ne quitte jamais votre navigateur.
Qu'est-ce qu'une data URL Base64 ?
Une data URL emballe un petit fichier directement dans une chaîne de la forme data:<mime>;base64,<payload>. Les navigateurs la traitent comme toute autre URL — vous pouvez la déposer dans <img src>, dans un background-image CSS, ou dans une signature d'e-mail. Le Base64 fait grossir les octets d'origine d'environ 33 %, c'est donc préféré pour les très petits assets (icônes, sprites, petits avatars). Pour quelque chose de plus gros, vous voulez en général un fichier image normal derrière un CDN.
Comment utiliser cet outil
En mode Encoder, déposez ou choisissez une image et copiez la version dont vous avez besoin : data URL complète, base64 brut (sans préfixe) ou balise <img> toute prête. En mode Décoder, collez une data URL ou une chaîne base64 brute et l'image se ré-affiche dans l'aperçu — pratique quand vous en trouvez une dans le CSS de quelqu'un d'autre ou un e-mail HTML exporté et que vous voulez voir ce que c'est. Changez de mode avec la pastille en haut.
Quand (et quand ne pas) inliner les images
Bons cas : minuscules logos et icônes livrés dans le même fichier HTML/CSS, graphismes de signature dans des e-mails transactionnels, intégration d'un asset dans une démo HTML mono-fichier. Mauvais cas : images de hero, galeries photo, tout asset réutilisé entre pages — le base64 désactive le cache HTTP pour cet asset, bloque le chargement parallèle des images, gonfle votre HTML/CSS et nuit au Largest Contentful Paint. Règle : sous environ 2 Ko encodé c'est généralement OK ; au-dessus, préférez un fichier classique.
Types MIME courants
Le type MIME après data: indique au navigateur comment décoder le payload — se tromper (par ex. livrer un JPG en image/png) casse l'image silencieusement dans certains navigateurs.
| Format | Type MIME | Notes |
|---|---|---|
| PNG | image/png | Lossless, supports transparency. Best for icons and UI. |
| JPG / JPEG | image/jpeg | Lossy. Best for photos. No transparency. |
| WebP | image/webp | Smaller than PNG/JPG; supported by all modern browsers. |
| GIF | image/gif | Animated, 256-colour. Heavier than WebP/MP4 for video. |
| SVG | image/svg+xml | Vector. Prefer URL-encoded over base64 in CSS. |
Questions fréquentes
L'image quitte-t-elle mon navigateur ?
Pourquoi la chaîne base64 est-elle bien plus longue que le fichier ?
data:<mime>;base64,.Puis-je intégrer un SVG sans base64 ?
data:image/svg+xml;utf8,<svg…>) et restent bien plus petits que la forme base64. Cet outil donne la version base64 par compatibilité ; pour du CSS de production, préférez la variante URL-encodée.Les images inlinées sont-elles mises en cache par le navigateur ?
Puis-je décoder une chaîne base64 quelconque ?
data:, l'outil tente de détecter le type d'image depuis les octets magiques (PNG, JPG, GIF, WebP, SVG). Si la détection échoue, vous obtiendrez une erreur « invalide » et pourrez préfixer manuellement avec data:image/png;base64,.Pourquoi ma data URL contient-elle des sauts de ligne ?
<img src> mais quelques systèmes non. Cet outil émet toujours le base64 sur une seule ligne ; si vous collez une chaîne enroulée en mode décodage, nous retirons les espaces avant de décoder.