Image en Base64
Transformez une image en URI de données que vous pouvez coller directement dans du CSS ou du HTML.
- S'exécute sur votre appareil — le fichier n'est envoyé nulle part
- Sans inscription, sans filigrane, sans quota quotidien
- Gratuit, sans limite d'utilisation
Comment ça marche
Une URI de données intègre une image directement dans votre code source plutôt que de référencer un fichier distinct. Cela supprime une requête réseau, ce qui compte pour de minuscules images qui coûteraient sinon un aller-retour chacune.
Quand cela vaut le coup
Petites icônes, logos et graphismes unicolores. En dessous d'environ 2 Ko, la requête économisée l'emporte généralement sur le coût. Au-delà, une référence de fichier classique est préférable.
Le surcoût en taille
Le Base64 encode trois octets en quatre caractères, donc une URI de données est environ 33 % plus grande que le fichier. Elle ne peut pas non plus être mise en cache séparément : elle est retéléchargée avec chaque copie de la feuille de style ou de la page qui la contient.
Où la coller
Directement dans un url() CSS ou un attribut src d'une balise img. Le résultat porte déjà le bon préfixe de type de média.
Image en Base64 : questions
Pourquoi y a-t-il une limite de taille ?
Les URI de données ont leur place dans le code source, et les très grosses alourdissent chaque page qui les inclut. La limite est de 2 Mo.
Est-ce que ça fonctionne avec le SVG ?
Le SVG est du texte, il peut donc être intégré directement sans Base64, ce qui est plus léger.
Mon image est-elle envoyée quelque part ?
Non. L'encodage se fait dans votre navigateur.