Épinglez vos outils ici. Ils sont enregistrés dans ce navigateur.
Épinglez un outil et son autocollant arrive ici.
Transformez une image en data URI prêt pour CSS ou HTML, ou retransformez un data URI en fichier image.
Un data URI transporte un fichier dans l'adresse elle-même : data:image/png;base64,iVBORw0KGgo…. Après data: viennent le type de média, puis un marqueur ;base64 facultatif qui indique comment le contenu est encodé, puis le contenu après une virgule. Partout où un navigateur accepte l'URL d'une image, comme src en HTML ou url() en CSS, il accepte un data URI et affiche l'image sans requête supplémentaire. Le format est défini par la RFC 2397.
Base64 écrit chaque groupe de 3 octets sous forme de 4 caractères : l'image encodée est donc environ 33 % plus grande que le fichier. Une image intégrée est aussi liée au document qui la contient : le navigateur ne peut pas la mettre en cache séparément, et elle est transférée de nouveau avec chaque page ou feuille de style qui la répète.
Les data URI conviennent donc bien à quelques petites images, comme une icône d'un ou deux kilo-octets ou une image de substitution, et mal aux photographies. L'outil vous avertit dès que le résultat dépasse environ 10 KB.
Un fichier SVG étant du texte, il peut entrer dans un data URI sous forme de texte : data:image/svg+xml;charset=utf-8,…. Seuls certains caractères doivent être encodés en pourcentage : ceux qui mettraient fin à l'URL ou aux guillemets qui l'entourent, et ceux qu'une URL ne peut pas contenir tels quels. Un # non échappé, fréquent dans les valeurs de couleur, ouvre le fragment de l'URL et tronque l'image. Cet outil échappe %, #, <, >, ", &, la barre oblique inverse, les blancs et les caractères de contrôle, et écrit les caractères hors ASCII sous forme de séquences d'échappement UTF-8. Le décodage du résultat redonne le même texte SVG. La forme texte n'est proposée que si le fichier est de l'UTF-8 valide.
La forme encodée pour URL reste lisible et, comme il s'agit toujours de texte brut, gzip et Brotli la compressent généralement mieux que le Base64. Laquelle des deux formes est la plus courte avant compression dépend du fichier : l'outil affiche donc les deux tailles.
L'image est lue par votre navigateur et encodée par JavaScript sur votre appareil. L'autre sens fonctionne de la même façon : le data URI collé est décodé dans la page et vous est proposé sous forme de fichier. Ni l'image ni le data URI ne sont envoyés.
Non. Le fichier est lu et encodé par votre navigateur, et l'outil n'envoie aucune requête réseau avec lui. Il en va de même pour un data URI que vous collez pour le reconvertir en fichier.
Base64 représente chaque groupe de 3 octets du fichier par 4 caractères de texte, ce qui ajoute environ 33 %. Le court en-tête placé devant, comme data:image/png;base64, ajoute encore quelques octets.
Quand l'image est petite, de l'ordre de quelques kilo-octets, et qu'elle est nécessaire dès l'affichage de la page, si bien qu'économiser une requête compte plus que la mise en cache. Les images plus grandes, et celles que partagent de nombreuses pages, sont mieux servies sous forme de fichiers séparés.
Oui. Placez-le dans url("…") en CSS ou dans l'attribut src d'un élément img. Si le site envoie une Content-Security-Policy, celle-ci doit autoriser data: comme source d'image, dans img-src ou dans default-src, pour que l'image s'affiche.