RevealTheme logo

Convertisseur d'image en Base64

Convertissez n'importe quel fichier image en URL de données Base64. Collez le résultat directement dans du CSS, du HTML ou du JSON.

Comment utiliser cet outil

  1. 1

    Click the file picker and choose an image (PNG, JPEG, GIF, WebP, SVG, or any format your browser accepts).

  2. 2

    Wait a moment while the browser reads the file and renders a preview thumbnail.

  3. 3

    Review the generated data URL in the text box below the preview.

  4. 4

    Click Copy to put the full data URL on your clipboard, then paste it into your stylesheet or markup.

Qu'est-ce que le convertisseur d'image en Base64 ?

Une URL de données Base64 intègre le contenu binaire d'une image directement dans du HTML ou du CSS. Cela élimine la requête HTTP pour les icônes et petits graphismes, ce qui peut améliorer le temps de chargement perçu. La contrepartie : l'encodage Base64 augmente la taille du fichier d'environ 33 %, il est donc idéal pour les icônes de moins de 5 Ko.

Cas d'usage courants

  • Inline a small icon directly in a CSS background-image: url(...) rule to save an HTTP request.

  • Embed a logo in a single self-contained HTML email or offline page with no external files.

  • Paste image data into a JSON payload or API request that only accepts text fields.

  • Store a tiny placeholder image as a string in a config file or environment variable.

  • Drop an avatar or sprite straight into a React or Vue component without a separate asset import.

  • Generate a quick data URL to test how a graphic renders in a sandbox or CodePen snippet.

Questions fréquentes

Quand dois-je utiliser des images en Base64 ?
Pour les icônes, logos ou petits sprites lorsque vous souhaitez supprimer une requête HTTP. Évitez-le pour les grandes images : la surcharge de l'encodage annule tout bénéfice.
Puis-je l'utiliser dans du CSS ?
Oui : collez l'URL de données directement dans une déclaration background-image: url(...).

Outils connexes