Monu Tools

Image vers Base64

Convertissez une image en URI de données Base64 pour l'intégrer en HTML, CSS ou JSON, entièrement dans votre navigateur.

Comment utiliser l'outil Image vers Base64

  1. 01

    Choisissez une image sur votre appareil.

  2. 02

    Copiez l'URI de données, ou l'extrait CSS prêt à l'emploi.

  3. 03

    Collez-le dans votre HTML, CSS ou JSON.

Ce que fait ce convertisseur

Ce convertisseur d'image en Base64 transforme une image en un data URI, une longue chaîne de texte qui intègre l'image directement, plus un extrait CSS de fond prêt à l'emploi. Vous pouvez intégrer une image au lieu de la lier à un fichier séparé.

Il s'exécute localement dans votre navigateur, donc votre image est lue sur votre appareil et n'est jamais téléversée.

Pourquoi intégrer une image

Un data URI porte l'image entière à l'intérieur du balisage, si bien que le navigateur ne fait pas de requête réseau séparée pour la récupérer. Pour de petites ressources comme des icônes, cet aller-retour évité peut donner une impression de page plus rapide.

Le compromis : taille et mise en cache

Le hic, c'est la taille et la mise en cache. Base64 ajoute environ 33 pour cent de surcharge parce qu'il représente des données binaires avec un alphabet de texte limité, et une image intégrée ne peut pas être mise en cache séparément, donc elle est retéléchargée avec chaque page qui la contient.

La règle générale est d'intégrer les petites images, icônes, minuscules logos ou un sprite, là où éviter une requête vaut la surcharge, et de garder les images plus grandes comme des fichiers normaux que le navigateur peut mettre en cache et charger en parallèle.

Où fonctionnent les data URI

Les data URI fonctionnent partout où une URL est acceptée : un src d'img, un fond CSS, ou un champ dans du JSON ou un modèle d'e-mail. Cela les rend pratiques pour des extraits autonomes.

Questions fréquentes

Mon image est-elle téléversée vers un serveur ?

Non. L'image est lue entièrement dans votre navigateur, donc elle ne quitte jamais votre appareil.

Quand devrais-je utiliser un data URI ?

Pour de petites images comme des icônes, où éviter une requête réseau supplémentaire vaut l'augmentation de taille. Pour de grandes images, un fichier normal est préférable.

Pourquoi le Base64 est-il plus volumineux que le fichier ?

L'encodage Base64 ajoute environ 33 % de surcoût car il représente des données binaires à l'aide d'un alphabet de texte limité.

Qu'est-ce qu'un data URI ?

Un data URI est une chaîne qui contient le fichier lui-même, encodé en ligne, de sorte qu'il peut être utilisé à la place d'une URL pour intégrer une image directement dans du HTML, du CSS, du JSON ou un e-mail.

Puis-je l'utiliser dans du CSS ou du JSON ?

Oui. La sortie fonctionne comme un img src, un background-image CSS, ou une valeur de chaîne dans du JSON et des modèles d'e-mail. Un extrait CSS est fourni prêt à coller.

Sources

Intégrer cet outil

Ajoutez cet outil à votre propre site web. Copiez le code ci-dessous. Il reste à jour automatiquement.

<iframe src="https://monu.tools/embed/fr/image-to-base64" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>

Outils similaires