WebyTooly

Image en Base64

Envoie une image et récupère sa représentation en Base64, avec la variante prête à coller dans du CSS ou une balise img.

Espacio publicitario

Glisse ton image ici ou clique pour la choisir

Accepte tous les formats d'image, y compris SVG et GIF

Espacio publicitario

Ce qu'est le Base64 et quand il devient utile

Le Base64 représente des données binaires avec seulement 64 caractères imprimables. Chaque tranche de 3 octets devient 4 caractères de texte : le résultat pèse donc environ 33 % de plus que l'image d'origine.

longueur Base64 ≈ ceil(octets ÷ 3) × 4

Nous lisons le fichier avec FileReader.readAsDataURL, qui renvoie le binaire exact encodé, sans recompresser ni toucher aux pixels. Le data URI conserve donc le format et la qualité d'origine.

surcoût % = (longueur du texte − octets) ÷ octets × 100

Un data URI évite une requête HTTP, ce qui est rentable pour de toutes petites icônes intégrées au CSS. Pour de grandes images c'est contre-productif : cela gonfle le HTML ou le CSS, ne se met pas en cache séparément et retarde l'affichage.

Exemple pratique

Une icône PNG de 900 octets devient environ 1200 caractères de Base64 (33 % de plus), que tu peux coller directement dans ta feuille de style pour économiser une requête.

Questions fréquemment posées

Le Base64 compresse-t-il l'image ?
Non, au contraire : il l'agrandit toujours d'environ 33 %. Il sert à intégrer une image dans un fichier texte, pas à l'alléger.
Quand vaut-il la peine d'intégrer une image ?
Pour des icônes et motifs de quelques kilo-octets utilisés sur toutes les pages. Au-delà de 5-10 Ko, un fichier séparé est généralement préférable car il se met en cache indépendamment.
Mon image est-elle modifiée ?
Non. Ce sont les octets exacts du fichier d'origine qui sont encodés : format, qualité et métadonnées restent intacts.
Puis-je l'utiliser avec du SVG ?
Oui, et ça marche bien car les SVG sont souvent petits. Un SVG peut aussi s'intégrer sans encodage, mais le Base64 reste la solution la plus compatible.

Calculatrices connexes