Compresser une image
Réduire le poids des images.
Image
Image en Base64
Convertir une image en data-URI.
Ce que fait cet outil. Cet outil convertit une image en data-URI que vous collez directement dans du HTML ou du CSS. Vous économisez une requête réseau, au prix d’environ un tiers de volume supplémentaire.
Fonctionne dans le navigateurAucun envoiSans inscriptionFonctionne hors ligne
Comment utiliser Image en Base64
- Choisissez votre image.
- Observez la taille du résultat.
- Copiez en data-URI, en balise img ou en fond CSS.
Quand cela en vaut la peine
L’arbitrage est simple : une requête de moins, environ un tiers d’octets de plus.
Intéressant pour de petites images toujours nécessaires : une icône, un petit logo, un motif de fond. En dessous d’environ cinq kilooctets, c’est presque toujours favorable.
Sans intérêt pour de grandes images. Une photo de plusieurs centaines de kilooctets alourdit d’autant votre HTML ou votre CSS, qui sont toujours chargés — y compris par des visiteurs qui ne verront jamais l’image.
Inconvénient important : une image intégrée n’est pas mise en cache séparément. Placée dans votre CSS, elle est renvoyée à chaque modification de ce fichier. Un fichier distinct, lui, reste en cache.
Pour le courriel, la situation est différente : beaucoup de logiciels bloquent les images externes, mais beaucoup bloquent aussi les data-URI. L’intégration n’y est donc pas une solution fiable.
En pratique
Optimisez l’image avant de la convertir. Du Base64 sur un PNG non compressé est doublement dommage.
Pour des icônes simples, un SVG vaut souvent mieux qu’un PNG en Base64 : plus léger, net à toutes les tailles, et insérable directement sans encodage.
Respectez la structure : un data-URI commence par le type de média et la mention base64, suivis d’une virgule et des données. Copiez l’ensemble, pas seulement la fin.
En CSS, placez-le entre guillemets dans la fonction url. En HTML, il va directement dans l’attribut src.
Tout se passe dans votre navigateur.
Questions fréquentes
Quand utiliser un data-URI ?
Pour de petites images sous environ cinq kilooctets, toujours nécessaires.
De combien la taille augmente-t-elle ?
D’environ un tiers.
Est-ce mis en cache ?
Pas séparément : cela suit le fichier dans lequel se trouve le code.
Cela fonctionne-t-il en courriel ?
Peu fiable : beaucoup de logiciels bloquent les data-URI.
Un SVG ne vaut-il pas mieux ?
Pour des icônes simples, souvent oui : plus léger et net à toutes les tailles.
Mon image est-elle téléversée ?
Non.