Image vers Base64
Base64 encode les octets d'image binaire sous forme de texte ASCII que vous pouvez coller dans les charges utiles HTML img src, CSS url() ou JSON. Utile pour les petites icônes, les URI de données dans les prototypes et les API qui attendent des images en ligne. L'encodage s'effectue localement : rien n'est téléchargé.
Comment encoder une image en Base64
1. Téléchargez le fichier image (gardez-le petit — moins de ~ 100 Ko est pratique).
2. Copiez la chaîne Base64 générée ou l'URL complète des données.
3. Collez dans votre HTML, CSS ou config.
4. Testez dans l'environnement cible : certains clients de messagerie limitent les URI de données.
Exemples d'encodage
Logo en ligne dans l'e-mail HTML
Un logo PNG de 2 Ko sous la forme data:image/png;base64,... évite le blocage d'images externes dans les boîtes de réception d'entreprise strictes.
CSS arrière-plan pour le prototype
Collez une texture Base64 dans une démo mono-fichier sans hébergement d'actifs.
Appareil de test API
Incluez un petit JPEG Base64 dans un corps de requête JSON pour le test du point de terminaison de téléchargement d'image.
Quand les images Base64 aident
• Pour les très petits actifs où une requête HTTP coûte plus que la surcharge de taille en ligne.
• Pour les prototypes HTML à fichier unique hors ligne.
• Lorsque l'hébergement externe n'est pas disponible dans des environnements verrouillés.
Quand éviter les images Base64
• Pour les grandes photos, Base64 croît d'environ 33 % et gonfle le cache HTML.
• Lorsque la mise en cache CDN et le srcset réactif sont disponibles.
• Lorsque de nombreux clients de messagerie bloquent les URI de données, utilisez plutôt des images hébergées.
Base64 dans les budgets de performance
L'inlining supprime les allers-retours mais empêche la mise en cache de l'image par le navigateur séparément. À utiliser avec parcimonie pour les petites icônes critiques au-dessus du pli ; chargez normalement des médias volumineux paresseusement.
bizarreries du client de messagerie
Le bureau Outlook a historiquement une prise en charge limitée des URI de données. Testez Gmail, Apple Mail et Outlook avant de vous fier aux images en ligne dans les campagnes.
Sécurité
Ne collez pas du Base64 non fiable dans des pages sans comprendre le contenu - il s'agit toujours d'un contexte exécutable dans HTML. Encodez uniquement vos propres actifs.
Questions fréquentes
Pourquoi Base64 est-il plus gros que le fichier ?
L'encodage utilise 4 caractères tous les 3 octets, soit environ 33 % de surcharge plus le préfixe de l'URL des données.
Qu'est-ce qu'une URL de données ?
Format : data:image/png;base64,iVBORw0KG... — Type MIME plus charge utile encodée.
Taille maximale pour l'e-mail ?
Gardez une croissance totale des messages inférieure à 10 à 20 Ko ; de nombreux clients s'étouffent avec d'énormes images en ligne.
Décoder dans le fichier ?
Utilisez l'outil d'encodeur/décodeur Base64 pour inverser l'ASCII en binaire si nécessaire.
Les images sont-elles téléchargées ?
Non : FileReader lit localement dans le navigateur.
SVG à Base64 ?
Possible pour un petit texte SVG ; les formats raster sont plus courants pour les URI de données.