Convertisseur Image vers Base64 - Encoder des Images en URI de Données

Encodez une image en URI de données Base64 et copiez-la sous forme de balise img HTML, de valeur CSS url(), de Markdown ou de chaîne brute. L'encodage s'effectue dans votre navigateur ; rien n'est envoyé.

Ce que fait Image vers Base64

Cet outil lit votre fichier avec l'API FileReader du navigateur et le renvoie sous forme d'URI de données : la chaîne `data:image/png;base64,` suivie des octets du fichier réécrits en Base64. Le Base64 est un encodage de transport, pas un mécanisme de compression. Il fait correspondre chaque groupe de 3 octets binaires à 4 caractères ASCII pris parmi A-Z, a-z, 0-9, plus et slash, ce qui signifie que la forme encodée est toujours environ 33 % plus volumineuse que le fichier de départ. Rien ne change dans l'image elle-même — les pixels, le format, le profil colorimétrique et toute métadonnée EXIF survivent intacts, et décoder la chaîne redonne un fichier identique octet pour octet. Ce que vous gagnez, c'est une représentation entièrement composée de caractères sûrs à coller dans du code source, ce qui explique pourquoi les URI de données fonctionnent partout où une URL est attendue : un attribut src d'image, un url() CSS, une image Markdown, un champ JSON. L'outil construit ces quatre extraits pour vous et copie la chaîne complète même lorsque l'aperçu à l'écran est tronqué, car une URI de données pour une image modeste s'étend sur des dizaines de milliers de caractères, et les afficher tous bloquerait la page. À côté de chaque fichier, il affiche la taille d'origine, la taille encodée et le pourcentage de surcharge, afin que le coût de l'intégration soit visible avant de vous y engager. La lecture se fait entièrement sur votre appareil ; aucun fichier n'est envoyé, et la page continue de fonctionner avec le réseau déconnecté.

Pourquoi encoder une image en Base64

Une URI de données transforme une image en texte, ce qui supprime le besoin d'un fichier séparé et d'une requête HTTP séparée. C'est réellement utile pour les petites ressources et une mauvaise idée pour les grandes.

Intégrez directement une petite icône, un sprite ou un espace réservé dans le HTML ou le CSS et économisez un aller-retour au premier affichage
Livrez une image à l'intérieur d'un seul fichier autonome — une page HTML indépendante, un modèle d'e-mail, un bookmarklet, un PDF généré
Intégrez des données d'image dans du JSON, du YAML ou une colonne de base de données qui n'accepte que du texte
Reproduisez un bug ou écrivez une fixture de test sans committer de fichier binaire dans le dépôt

Comment convertir une image en Base64

Quatre étapes, toutes locales — le fichier est lu dans le navigateur et la chaîne est construite sur votre appareil.

1

Déposez une image ou plusieurs — chaque fichier reçoit sa propre carte avec les chiffres de taille

2

Vérifiez la taille encodée et la surcharge ; en dessous d'environ 10 Ko, l'intégration a tendance à être rentable

3

Choisissez la sortie dont vous avez besoin — Base64 brut, une balise img HTML, une déclaration url() CSS, ou du Markdown

4

Copiez l'extrait dans le presse-papiers ou téléchargez-le sous forme de fichier .txt

Questions fréquentes

Parce que le Base64 est un encodage, pas un compresseur. Il représente 3 octets binaires à l'aide de 4 caractères ASCII imprimables, donc la sortie est toujours environ 33 % plus longue que l'entrée, plus quelques octets pour le préfixe data:. Cette croissance est inhérente au format et aucun réglage ne permet de l'éviter. Si vous avez besoin d'un fichier plus petit, compressez l'image avant de l'encoder — l'étape d'encodage ne peut qu'ajouter du poids.
Intégrez quand la ressource est petite et toujours nécessaire : icônes, espaceurs 1x1, minuscules textures de fond, environ moins de 10 Ko. En dessous de ce seuil, économiser une requête HTTP l'emporte généralement sur la pénalité de 33 % de taille. N'intégrez pas de photos, d'images hero, ni rien au-dessus d'environ 100 Ko. Une grande URI de données ne peut pas être mise en cache indépendamment, doit être re-téléchargée à chaque révision de page ou de feuille de style, et bloque l'analyseur jusqu'à ce qu'elle ait été lue en entier.
Souvent non. Gmail retire purement et simplement les URI de données des balises img, et les clients de bureau d'Outlook ne les ont jamais prises en charge de façon fiable. Apple Mail et certains webmails les affichent bien. L'approche fiable pour l'e-mail reste une URL d'image hébergée, ou une pièce jointe CID référencée avec cid: dans le src. Testez dans les clients que vos destinataires utilisent réellement avant de compter sur des données intégrées.
Oui, et c'est sans perte — les octets décodés sont identiques au fichier d'origine, y compris les données EXIF et le profil colorimétrique. Collez une URI de données complète dans la barre d'adresse d'un navigateur et l'image s'affiche. En code, atob() en JavaScript ou base64 -d en ligne de commande fait l'affaire. Notez que la sortie brute de cette page omet le préfixe data:, ajoutez-le donc si la cible attend une URI complète.
Non. Le SVG est déjà du texte, donc le Base64 ajoute 33 % pour rien. Collez plutôt le balisage directement dans votre HTML, ce qui permet aussi au CSS de styliser les formes et au JavaScript de les atteindre. Pour les fonds CSS, utilisez un SVG encodé en URL dans url() plutôt qu'en Base64 — il reste plus petit et se compresse mieux en gzip. Le Base64 pour le SVG n'a de sens que lorsqu'une URI stricte est requise et que l'encodage en pourcentage n'est pas une option.
Il n'y a aucune limite dans la spécification HTML ou CSS, et les navigateurs modernes gèrent des URI de données de plusieurs mégaoctets dans les attributs src. Les plafonds pratiques sont ailleurs : les barres d'adresse coupent généralement autour de 2 Mo ou moins, certaines configurations de serveur et de CDN plafonnent la taille des en-têtes et des requêtes, et les chaînes très longues ralentissent notablement l'analyse. Cet outil n'impose aucun plafond propre, mais il avertit au-delà de 100 Ko car c'est le seuil où l'intégration cesse d'être rentable.
Non. Le fichier est lu avec l'API FileReader du navigateur, qui opère sur le descripteur de fichier local, et la chaîne résultante reste dans la mémoire de la page. Rien n'est envoyé sur le réseau et il n'y a aucun composant côté serveur, si bien que l'outil continue de fonctionner hors ligne une fois la page chargée. Les copies dans le presse-papiers passent par le presse-papiers standard du navigateur, pas par nous.
Tous, pour les images — les URI de données dans les attributs src d'img et les url() CSS fonctionnent depuis IE8 et sont universellement prises en charge aujourd'hui. Le presse-papiers est la partie plus récente : navigator.clipboard nécessite un contexte sécurisé, donc en HTTP simple ou dans les navigateurs plus anciens, cette page se rabat sur la sélection du textarea et l'utilisation de document.execCommand('copy'). Si les deux méthodes échouent, un message vous demandera de sélectionner et copier le texte vous-même.

Plus d'outils d'image

Explorez d'autres outils puissants pour vos besoins d'édition

Compresser Image

Réduire la taille

Redimensionner

Changer dimensions

Recadrer Image

Découper zone

Convertir Format

Changer format

Éditeur Photo

Éditer photos

Pivoter Image

Pivoter image

Retourner Image

Horizontal/Vertical

Ajouter Filigrane

Filigrane

Ajouter Bordure

Ajouter bordure d'image

Coins Arrondis

Ajouter coins arrondis

Filtres

Luminosité/Contraste

Flouter Visage

Masquer visages

Mosaïque

Flouter régions

Supprimer Fond

Supprimer fond

Améliorer Image

IA upscale

Ajouter Texte

Ajouter texte à l'image

Collage

Combiner plusieurs images

HTML vers Image

Web vers image

GIF en Séquence

Extraire frames

Supprimer les bords vides

Supprimer les bords vides

Renommer des images en lot

Renommer plusieurs fichiers en toute sécurité

Recadrage Circulaire

Recadrer des images en cercle

Noir et Blanc

Convertir des images en niveaux de gris

Diviser l'Image

Découper une image en grille

Fusionner les Images

Combiner des images en une seule

Changer le DPI

Définir les métadonnées DPI

Image vers PDF

Rassembler des images dans un PDF

HEIC vers JPG

Convertissez les photos HEIC de votre iPhone en JPG

Suppresseur EXIF

Consultez et effacez les métadonnées photo cachées, y compris la géolocalisation GPS

Générateur de Favicon

Jeu d'icônes complet + code HTML

Palette de couleurs

Extraire les couleurs d'une image

Base64 vers image

Décoder du Base64 en image

HEIC vers PNG

Convertir les photos HEIC de l'iPhone en PNG sans perte

Texte derrière l'image

Placer du texte derrière le sujet d'une photo, entièrement dans votre navigateur

Pipette à couleurs

Obtenir le HEX, le RGB et le HSL de n'importe quel pixel

Créateur de signature

Dessiner une signature et la télécharger en PNG transparent

Détourage de signature

L'encre du papier, sur fond transparent

Créateur de fond transparent

Rendre un arrière-plan transparent