Softonic

Encodeur d'image Base64

Étape 1 / 3 Déposez votre image ici

Traitement...

Inclure une petite image sous forme d’URI de données Base64 peut éviter une requête HTTP et conserve la ressource avec le HTML ou le CSS qui l’utilise. Cet outil de navigateur accepte les fichiers PNG, JPEG, GIF et WebP validés, ainsi que le texte SVG analysé avec une racine <svg>, jusqu’à 5 Mio. Il génère une sortie Base64 brute, URI de données, CSS, HTML ou JSON. Vérifiez que la forme choisie convient à la destination. Le SVG ne reçoit qu’un contrôle structurel et peut encore contenir du contenu actif ou dangereux.

Comment encoder une image

  1. 1

    Déposez votre image

    Choisissez un fichier PNG, JPG, GIF, WebP ou SVG de 5 Mio maximum. Une image matricielle ne doit pas dépasser 16 384 pixels sur un côté ni 33 554 432 pixels au total. Le texte encodé reste inférieur à 7 Mio.

  2. 2

    L'encodage se fait dans le navigateur

    Les octets de l'image sont lus, encodés en Base64 et préfixés avec l'en-tête URI `data:` correct.

  3. 3

    Choisissez le format de sortie

    Base64 brut, règle CSS `background-image`, balise HTML `<img>`, ou chaîne sécurisée pour JSON.

  4. 4

    Copiez le résultat

    Collez dans une feuille de style, un modèle ou le corps d'une API.

Quand l’inclusion d’images en vaut la peine

Candidats à évaluer et à tester avant l’inclusion :

  • Icônes de moins de 2 Ko, Économise une requête HTTP avec un surcoût négligeable.
  • Modèles d’email - Les URI de données ne sont pas pris en charge de façon uniforme par les logiciels de messagerie. Testez les clients visés et utilisez des images CID ou hébergées si nécessaire.
  • Aperçus d’image principale (LQIP), Version floue de basse qualité incluse, image complète chargée après.
  • SVG utilisés une seule fois, Le SVG étant du texte, une URI de données correctement encodée en pourcentage peut être plus courte que Base64 selon ses caractères et sa mise en forme.

Mauvais candidats :

  • Grandes images, Gonfler de 33 % pour une image de 500 Ko représente 166 Ko de gaspillage.
  • Images réutilisées sur plusieurs pages, L’inclusion désactive la mise en cache du navigateur entre les routes.
  • CSS critique, L’inclusion d’images lourdes fait exploser le chemin critique.

Attentes de taille

Taille de l’image Taille de la chaîne Base64
500 octets ~680 caractères
2 Ko ~2,7 Ko
20 Ko ~27 Ko
200 Ko ~270 Ko

Format URI de données

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwAEhQGAhKmMIQAAAABJRU5ErkJggg==
  • Schéma data:
  • Type MIME
  • Indicateur ;base64,
  • Les octets encodés

SVG est un cas spécial

Base64 augmente les octets d’origine du SVG d’environ un tiers avant la syntaxe d’enveloppe, tandis que l’encodage en pourcentage ne rallonge que les caractères à échapper. La forme la plus courte dépend du SVG. La forme texte doit employer une valeur data:image/svg+xml,... correctement encodée en pourcentage : le simple jeton ;utf8 n’est pas un paramètre standard d’URI de données, et les caractères #, %, guillemets ou espaces non échappés peuvent casser l’URI. Cet outil vérifie la structure du SVG, mais ne retire ni scripts, ni gestionnaires d’événements, ni références externes. Examinez tout SVG non fiable avant usage.

Questions fréquentes

Le texte Base64 occupe environ 4/3 des octets source, auxquels s’ajoutent l’URI de données ou l’enveloppe. Les performances dépendent du multiplexage, de la compression, du cache, de la réutilisation, de la taille du paquet et de la politique de sécurité du contenu. Mesurez la page réelle : il n’existe pas de seuil universel de 4 Ko.

L’inclusion seule n’a pas d’effet SEO garanti. Un arrière-plan CSS ne fournit aucune sémantique de texte alternatif. Pour une image informative, utilisez un élément <img> avec un attribut alt pertinent et gardez les arrière-plans décoratifs hors de la structure du contenu.

Non. L’encodeur lit le fichier localement avec l’API FileReader et produit la chaîne Base64 dans le navigateur. Rien ne quitte votre machine.

Oui, utilisez l’outil Base64 to Image pour transformer une URI data:image/... en un fichier téléchargeable.

Outils similaires

Créateur de tier list

Créez une tier list privée avec textes et images locales, personnalisez les niveaux, classez au clavier ou par glisser-déposer et exportez.

Compresser GIF

Réduisez la taille d'un GIF animé dans le navigateur en diminuant les dimensions, en conservant moins d'images et en ajustant la qualité d'encodage. Prévisualisez la boucle avant le téléchargement.

Éditeur de photos

Éditeur de photos dans le navigateur avec recadrage, rotation, luminosité, contraste, saturation, filtres, texte superposé et export en JPG, PNG ou WebP.

Générateur de codes-barres

Créez dans le navigateur un code-barres 1D en Code 128, EAN, UPC, ITF-14 ou autre format pris en charge, puis téléchargez-le en SVG ou PNG.

Générateur de mèmes

Ajoutez un texte en haut et en bas d’une image JPG, PNG ou WebP. Réglez la police, la couleur et le contour, puis téléchargez le mème en PNG.

SVG en PNG

Convertissez des fichiers SVG ou du balisage SVG en PNG dans votre navigateur, choisissez un facteur d’échelle et gardez des bords transparents nets.