Convertir une image en data URI Base64 pour un e-mail HTML

Comment l'utiliser

Déposez une image ou collez-la depuis le presse-papiers. L'outil lit le fichier en tant qu'ArrayBuffer, l'encode en base64, et préfixe le résultat avec l'en-tête d'URI de données approprié (par exemple data:image/png;base64,…). L'URI de données brut et une règle CSS de background prête à coller sont tous deux exposés.

Copiez l'une ou l'autre sortie dans le presse-papiers en un seul clic. L'outil rapporte également la taille encodée en temps réel afin que vous puissiez décider si l'intégration est un bon compromis — n'oubliez pas que les charges utiles base64 sont environ 33 % plus grandes que le binaire d'origine.

• Copie en un clic de l'URI de données ou de la règle CSS background
• Rapporte la taille encodée en octets en temps réel
• Prend en charge JPG, PNG, WebP, SVG, GIF et plus
• S'exécute entièrement hors ligne : sûr pour les actifs privés

Quand l'intégration a du sens

Les URI de données intégrés sont idéaux pour les images de moins de 4 Ko environ, les favicons, les templates d'e-mails, les placeholders blur-up et les actifs marketing ponctuels. Ils économisent un aller-retour réseau et éliminent les glitches d'image non chargée pour les pixels critiques des héros.

Pour tout ce qui est plus grand, gardez l'image externe et utilisez la mise en cache HTTP. Le base64 intégré gonfle votre bundle HTML/CSS, ne peut pas être mis en cache par le cache d'images du navigateur, et nuit aux métriques LCP lors du premier chargement de la page.