J'ai une confession qui fera grimacer les ingénieurs de performance Sur une première version d'un tableau de bord WordPress pour WP Adminify, j'ai codé chaque icône en base64 et je les ai alignées directement dans le CSS parce que j'en avais assez de gérer les feuilles de sprite Cela a fonctionné Les icônes sont apparues instantanément, pas de demandes supplémentaires, pas de flash d'image manquante Ensuite la feuille de style a explosé au-delà d'un mégaoctet et la page s'est sentie plus lente en deuxième charge, car aucune de ces images en ligne ne pouvait être mise en cache par elle-même Ce projet est l'endroit où j'ai appris que " ; image en base64" ; est une technique véritablement utile qui est également facile à surutiliser.
Ce guide couvre les deux moitiés de cette leçon Je vais montrer comment convertir une image en base64 avec le Convertisseur d'image en Base64 sur Toolz.dev, comment décoder base64 à nouveau en une image, ce qu'est réellement un URI de données et les compromis honnêtes afin d'aligner les actifs qui en bénéficient et de laisser ceux qui n'en bénéficient pas.
tl;dr : La conversion d'une image en base64 transforme son contenu binaire en une chaîne de texte, généralement enveloppée dans un URI de données
data:image/png;base64,iVBORw0KG.... Cette chaîne intègre directement en HTML, CSS, SVG ou JSON sans demande de fichier séparée. Le convertisseur Toolz.dev code et décode dans les deux sens, s'exécute entièrement dans votre navigateur afin qu'aucune image ne soit jamais téléchargée et vous donne la base brute64, un URI de données prêt, un<img>tag, et un extrait CSS. Base64 gonfle la taille d'environ un tiers, donc inline de petits actifs comme des icônes, pas de grandes photos.
Qu'est-ce qu'une image base64, exactement ?
Base64 est un schéma d'encodage, pas de compression et non de chiffrement Le schéma est défini par RFC 4648, et le data: URI qui l'enroule RFC2397. Il représente des données binaires arbitraires utilisant 64 caractères ASCII imprimables : les lettres A à Z et a à z, les chiffres 0 à 9, plus + et /, avec = utilisé pour le remplissage Le schéma est défini dans la RFC 4648, la même norme qui régit la base64 que vous voyez dans les pièces jointes aux e-mails et les charges utiles JSON.
La raison pour laquelle il existe est qu'une grande partie de la plomberie internet' ; s a été construite pour le texte, pas pour les octets bruts Les données binaires peuvent contenir des valeurs d'octets qu'un canal orienté texte va mutiler La base64 contourne qu'en prenant trois octets d'entrée, en divisant ces 24 bits en quatre groupes de six, et en mappant chaque groupe sur l'un des 64 octets dedans, quatre caractères de dehors Ce rapport de trois à quatre est exactement la raison pour laquelle la sortie codée est environ 33 pour cent plus grande que la source, un nombre qui mérite d'être mémorisé car il décide si l'inlining est une bonne idée.
Un " ; base64 image" ; est simplement un fichier image qui a été exécuté à travers cet encodage À lui seul la chaîne n'est que du texte Ce qui le rend rendu est de l'envelopper dans un URI de données.
Qu'est-ce qu'un URI de données et pourquoi le navigateur le restitue-t-il ?
Un URI de données est une URL qui transporte sa charge utile en ligne au lieu de pointer vers une ressource distante Sa forme, définie dans la RFC 2397, est data:[<media-type>][;base64],<data>. Pour une PNG qui ressemble à data:image/png;base64,iVBORw0KGgo....
La pièce importante est le type de média, image/png dans cet exemple, Il indique au navigateur comment interpréter les octets qui suivent Parce que l'URI de données annonce son propre type MIME, un navigateur peut traiter data:image/png;base64,... en tant qu'image, à l'instant où elle analyse un attribut qui attend une URL, qu'il s'agisse de la src d'un <img> ou le url() dans un CSS background-image. Aucun aller-retour en réseau ne se produit, car il n'y a rien à récupérer L'image est déjà là, épelée dans le balisage.
C'est toute la magie et tout le coût en une phrase L'image est déjà là, c'est pourquoi elle rend instantanément, et aussi pourquoi elle ne peut pas être mise en cache séparément ou partagée entre les pages comme un fichier lié peut.
Comment convertir une image en base64 sur Toolz.dev ?
le Convertisseur d'image en Base64 a deux directions, et l'encodage est la valeur par défaut.
Choisissez le " ; Image dans Base64" ; direction, puis téléchargez ou déposez votre image L'outil lit le fichier localement à l'aide de l'API File du navigateur, et comme cette lecture se produit dans votre navigateur, l'image ne se déplace jamais vers un serveur Une fois chargée, vous obtenez un aperçu plus quatre sorties, chacune avec son propre bouton de copie.
La base brute64 est la chaîne nue, utile lorsque vous avez déjà votre propre wrapper L'URI des données est le plein data:... chaîne prête à coller dans un src ou url(). Le HTML <img> tag est un élément complet que vous pouvez déposer dans un modèle Le CSS background-image déclaration est prêt pour une feuille de style A côté de ceux que vous voyez la taille d'octet décodée et le nombre de caractères de base64, de sorte que vous pouvez juger le poids avant de s'engager Si le nombre semble alarmant, c'est l'outil qui fait son travail : une photo de 200 Ko devenant une chaîne de 270 Ko dans votre HTML est exactement le moment de reconsidérer.
Comment puis-je décoder à nouveau base64 en image ?
Passez à la " ; Base64 à Image" ; direction et collez soit une chaîne de base64 brute, soit un URI de données complet Le convertisseur est tolérant quant à l'entrée : il supprime les espaces et si vous collez un plein data:image/png;base64,... chaîne il lit le type MIME directement hors du préfixe Si vous collez bare base64 sans préfixe il suppose PNG, qui est la valeur par défaut sûre pour la plupart des captures d'écran et des actifs exportés.
Il valide la chaîne en premier Si ce que vous avez collé n'est pas plausible base64, ce qui signifie qu'il contient des caractères en dehors de l'alphabet RFC 4648, l'outil vous indique plutôt que d'afficher une image cassée Lorsque l'entrée est vérifiée, vous obtenez un aperçu en direct et un bouton de téléchargement qui reconstruit le fichier binaire d'origine et l'enregistre avec la bonne extension Cette direction est véritablement pratique lorsque vous trouvez un URI de données enfoui dans une feuille de style ou une réponse API et que vous souhaitez voir ce qu'il est réellement, ou le réextraire dans un fichier réel.
Tout ici est côté client, ce qui est la même promesse qui traverse le reste de la boîte à outils, depuis l'orienté texte Convertisseur de base64 au Encodeur d'URL. Si vous souhaitez le raisonnement plus large derrière le maintien de ce type de travail dans le navigateur, le guide d'encodage Base64 va plus en profondeur sur l'encodage lui-même.
Quand dois-je aligner une image comme base64, et quand ne devrais-je pas ?
C'est la décision que l'outil existe d'informer, voici donc le tableau que j'utilise réellement.
| situation | En ligne comme base64? | pourquoi |
|---|---|---|
| Petite icône ou logo utilisé sur tout le site | Souvent oui | Supprime une demande, apparaît instantanément, la surcharge est minuscule |
| Petit SVG ou fond 1px | oui | La surcharge de 33 % est négligeable sur quelques centaines d'octets |
| Exportation HTML ou e-mail à fichier unique | oui | Le dossier doit être autonome, aucun actif externe n'étant autorisé |
| Photo ou bannière de grand héros | non | Le surcharge est grand et l'image ne peut pas être mise en cache séparément |
| Image réutilisée sur de nombreuses pages | non | Un fichier lié se met en cache une fois et est partagé ; l'inlining le duplique partout |
| Image de contenu qui change souvent | non | Les éditeurs ne peuvent pas échanger un blob base64 aussi facilement qu'un fichier |
Le modèle derrière le tableau est simple Inlining trade une demande réseau pour les octets dans votre document Que la transaction gagne lorsque l'actif est petit et que la demande enregistrée compte, ce qui est le cas classique pour les icônes au-dessus du pli Il perd lorsque l'actif est grand ou partagé, parce que vous payez la taxe de 33 pour cent, vous perdez la mise en cache indépendante, et vous bloat le fichier même que le navigateur doit analyser avant de pouvoir peindre quoi que ce soit.
Pour les lignes " ; non" ;, le meilleur coup est généralement d'optimiser le fichier et de le servir normalement C'est là qu'un outil comme Compresse d'images ou le Convertisseur de format gagne sa garde, réduisant l'actif afin que la version liée soit aussi légère que possible. J'ai écrit davantage sur l'ensemble de ce flux de travail dans le Boîte à outils pour les développeurs Web guide.
Base64 garde-t-elle mon image privée ?
Oui et non, et la distinction compte Base64 est un encodage, donc quiconque a la chaîne peut la décoder à nouveau à l'image originale exacte Il fournit un secret nul Ne traitez pas un URI de données comme un moyen de cacher quoi que ce soit, parce que la " ; Base64 à Image" ; direction de cet outil même l'inverse en une seule pâte.
Ce qui est privé, c'est la conversion elle-même Sur Toolz.dev l'image est lue et codée entièrement dans votre navigateur avec l'API Fichier, et rien n'est téléchargé Donc l'illustration, la capture d'écran, le logo client que vous encodez ne quitte jamais votre machine pendant le processus C'est une garantie différente de l'encodage cachant le contenu, et j'essaie d'être précis à ce sujet car " ; private" ; se jette dans le vide La confidentialité est dans le traitement local, couvert plus largement dans le confidentialité des données guide, pas en base64 en tant que schéma.
Quelques conseils pratiques pour expédier ceci
Préférez SVG pour les icônes quand vous le pouvez, et mettez en ligne le balisage SVG directement plutôt que de l'encoder en base64 SVG est déjà du texte, donc l'envelopper en base64 n'ajoute que la taxe de 33 pour cent pour rien Base64 brille pour les formats raster comme PNG et JPEG qui sont véritablement binaires.
Regardez la taille totale du document, pas seulement l'image unique Une icône en ligne est invisible Quarante d'entre eux, l'erreur que j'ai faite sur ce tableau de bord WordPress, transformez une feuille de style allégée en monstre Si vous en inlinez plus d'une poignée, c'est un signal pour prendre du recul et considérer un sprite lié ou une police d'icônes à la place.
Gardez le type MIME honnête Si vous exportez un JPEG mais étiquetez son URI de données comme suit image/png(traduction), certains navigateurs s'en sortent et d'autres non. Le convertisseur détecte le type réel à partir du fichier afin que la sortie soit correcte, mais si vous assemblez manuellement un URI de données ailleurs, faites correspondre le type de support aux octets réels.
Et lorsque vous héritez d'une base de code pleine d'URI de données mystère, rappelez-vous la direction de décodage En coller un dans le " ; Base64 sur Image" ; côté et frapper le téléchargement est le moyen le plus rapide de voir ce qu'une feuille de style expédie réellement.
Comment fonctionne réellement l'encodage base64, étape par étape ?
Il est utile de voir la mécanique une fois, car tout l'histoire de surcharge de 33 pour cent en tombe naturellement Base64 fonctionne sur des groupes de trois octets à la fois Trois octets font 24 bits L'encodeur tranche ces 24 bits en quatre morceaux de six bits chacun Six bits peuvent représenter 64 valeurs, de 0 à 63, et chacune de ces valeurs correspond à un caractère de l'alphabet de base64 : A à Z pour 0 à 25, a à z pour 26 à 51, les chiffres de 0 à 9 pour 52 à 61, puis + pour 62 et / pour 63.
Donc trois octets d'entrée deviennent toujours quatre caractères de sortie C'est la source de l'augmentation de taille Quatre caractères portent l'information de trois octets, un rapport de 4 à 3, ce qui revient à dire que la sortie est un tiers plus grande que l'entrée Il n'y a aucun moyen de le contourner, car il est cuit dans la façon dont le schéma fonctionne.
Le remplissage gère les restes Si vos données ne sont pas un multiple propre de trois octets, l'encodeur met le groupe final en blocs afin qu'il produise toujours un nombre entier de caractères, et il en ajoute un ou deux = des signes pour enregistrer la quantité de remplissage qu'il a ajouté C'est pourquoi les chaînes base64 se terminent si souvent par = ou ==. Un seul trail = signifie que le dernier groupe contenait deux octets ; un double == signifie qu'il en contenait un Le convertisseur Toolz.dev gère le remplissage automatiquement dans les deux sens, et lors du décodage, il accepte volontiers les chaînes avec ou sans la fin =: parce que certains systèmes le suppriment.
Vous pouvez regarder cela jouer avec un minuscule exemple Les trois octets ASCII pour les lettres & quot ; Man" ; encoder sur les quatre caractères " ; TWFu" ;, un exemple célèbre tout droit sorti de la littérature d'encodage Déposez ces trois mêmes caractères dans un URI de données comme texte et vous pouvez voir l'aller-retour, ou exécuter une image réelle à travers l'outil et remarquez que le nombre de caractères dans la sortie est toujours d'environ quatre tiers du nombre d'octets affiché à côté.
Comprendre cela explique également pourquoi base64 est un mauvais ajustement pour les grandes images et un ajustement fin pour les minuscules La surcharge est un pourcentage fixe, donc sur une icône de 300 octets il vous coûte 100 octets, personne ne s'en soucie Sur une photo de deux mégaoctets il vous coûte les deux tiers d'un mégaoctet de texte pur bloat dans votre document, et ce document doit être téléchargé et analysé avant que la page puisse rendre Le calcul ne change pas avec la taille, mais les conséquences font.
Questions fréquentes
Comment convertir une image en Base64 ?
Choisissez la direction Image vers Base64, puis téléchargez ou déposez votre image L'outil lit le fichier localement, l'encode et renvoie l'URI brut Base64 plus un URI de données prêt à l'emploi, une balise img et un extrait CSS que vous pouvez copier.
Qu'est-ce qu'un URI de données ?
Un URI de données est une chaîne qui intègre un fichier en ligne au lieu d'y créer un lien, sous la forme data : [mime-type] ; base64, [data].Pour un PNG, cela ressemble à data : image/png ; base64, iVBORw0KGgo... Les navigateurs le rendent sous forme d'image partout où une URL est attendue, donc aucune requête distincte n'est nécessaire.
Puis-je reconvertir Base64 en image ?
Oui. Passez à la direction Base64 en Image et collez soit une chaîne Base64 brute, soit un URI de données complet L'outil le décode, affiche un aperçu et vous permet de télécharger le fichier image reconstruit.
Quels formats d'image sont pris en charge ?
PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO et AVIF sont tous pris en charge. Le type MIME correct est détecté à partir du fichier afin que l'URI des données résultant se rende correctement.
Pourquoi la chaîne Base64 est-elle plus grande que mon image ?
Base64 représente trois octets de données binaires avec quatre caractères de texte, donc la sortie codée est environ 33 % plus grande que la source. Cette surcharge explique pourquoi Base64 convient davantage aux petites icônes et logos qu'aux grandes photographies.
Est-il sécuritaire de convertir des images ici ?
Oui. Chaque image est lue et codée entièrement dans votre navigateur à l'aide de l'API Fichier. Aucun fichier, chaîne ou résultat n'est téléchargé sur un serveur, donc les images privées restent sur votre appareil.
Dois-je intégrer des images en ligne en tant que Base64 en production ?
L'inlining fonctionne bien pour les petits actifs fréquemment utilisés tels que les icônes, car il supprime une requête HTTP et évite un flash d'image manquante Pour les grandes images, il est généralement préférable de conserver des fichiers séparés afin que le navigateur puisse les mettre en cache indépendamment.
Le convertisseur fonctionne-t-il hors ligne et sur mobile ?
Oui. Étant donné que tout le traitement est côté client, il fonctionne une fois que la page est chargée même sans connexion, et l'interface est réactive sur les navigateurs de bureau et mobiles modernes.
