Ich habe ein Geständnis, das Performance-Ingenieure zucken lässt Auf einer frühen Version eines WordPress-Dashboards für WP Adminify habe ich jedes Icon mit 64-Code versehen und direkt in das CSS eingefügt, weil ich es satt hatte, Sprite-Sheets zu verwalten Es funktionierte Die Icons erschienen sofort, keine Extra-Anfragen, kein Blitz des fehlenden Bildes Dann sprang das Stylesheet an einem Megabyte vorbei und die Seite fühlte sich bei Zweitlast langsamer an, denn keines dieser inlinierten Bilder konnte von selbst zwischengespeichert werden Bei diesem Projekt habe ich gelernt, dass " bild auf Basis 64" eine wirklich nützliche Technik ist, die auch leicht zu überstrapazieren ist.
Diese Anleitung deckt beide Hälften dieser Lektion ab. Ich werde zeigen, wie man ein Bild in Basis 64 umwandelt Bild zum Base64-Konverter Wie man base64 auf Toolz.dev wieder in ein Bild dekodiert, was ein Daten-URI wirklich ist und welche ehrlichen Kompromisse es gibt, damit Sie die Vermögenswerte, die davon profitieren, in Einklang bringen und diejenigen hinterlassen, die dies nicht tun.
tl; dr: Durch die Konvertierung eines Bildes in Base64 wird sein Binärinhalt in eine Textzeichenfolge umgewandelt, die normalerweise in einen Daten-URI wie eingewickelt ist
data:image/png;base64,iVBORw0KG.... Diese Zeichenfolge wird direkt in HTML, CSS, SVG oder JSON ohne separate Dateianforderung eingebettet. Der Toolz.dev-Konverter kodiert und dekodiert in beide Richtungen, läuft vollständig in Ihrem Browser, sodass nie ein Bild hochgeladen wird, und gibt Ihnen die Rohbasis64, einen Bereitschaftsdaten-URI, ein<img>Tag und ein CSS-Schnipsel. Base64 vergrößert die Größe um etwa ein Drittel, sodass kleine Inline-Assets wie Symbole und keine großen Fotos angezeigt werden.
Was ist ein base64 Bild, genau?
Base64 ist ein Kodierungsschema, keine Komprimierung und keine Verschlüsselung Das Schema ist definiert durch RFC 4648und das data: URI, der es umschließt RFC 2397. Sie stellt beliebige Binärdaten unter Verwendung von 64 druckbaren ASCII-Zeichen dar: die Buchstaben A bis Z und a bis z, die Ziffern 0 bis 9, zzgl + und /, mit = Zum Auffüllen verwendet Das Schema ist in RFC 4648 definiert, dem gleichen Standard, der die Basis 64 regelt, die Sie in E-Mail-Anhängen und JSON-Nutzlasten sehen.
Der Grund dafür ist, dass viele der internet's-Plumbing für Text gebaut wurden, nicht für Rohbytes Binäre Daten können Bytewerte enthalten, die ein textorientierter Kanal verstümmelt Base64 umgeht das, indem sie drei Bytes Eingabe nehmen, diese 24 Bit in vier Sechsergruppen aufteilen und jede Gruppe einem der 64 Zeichen zuordnen Drei Bytes in, vier Zeichen aus. Dieses Drei-zu-Vier-Verhältnis ist genau der Grund, warum die codierte Ausgabe ungefähr 33 Prozent größer ist als die Quelle, eine Zahl, die es wert ist, auswendig gelernt zu werden, weil sie entscheidet, ob Inlining eine gute Idee ist.
Ein " base64 image" ist einfach eine Bilddatei, die durch diese Kodierung geführt wurde Für sich allein ist die Zeichenfolge nur Text Was sie renderbar macht, ist das Umwickeln in einen Daten-URI.
Was ist ein Daten-URI und warum rendert der Browser ihn?
Ein Daten-URI ist eine URL, die ihre Nutzlast inline trägt, anstatt auf eine entfernte Ressource zu verweisen. Seine in RFC 2397 definierte Form ist data:[<media-type>][;base64],<data>. Für ein PNG, das aussieht wie data:image/png;base64,iVBORw0KGgo...drohen
Das wichtige Stück ist der Medientyp image/png In dem Beispiel sagt es dem Browser, wie die folgenden Bytes zu interpretieren sind Da der Daten-URI seinen eigenen MIME-Typ ankündigt, kann ein Browser behandeln data:image/png;base64,... Als Bild in dem Moment, in dem es ein Attribut analysiert, das eine URL erwartet, sei es die src eines <img> oder die url() In einem CSS background-image. Es passiert keine Netzwerk-Rundreise, denn es gibt nichts zu holen Das Bild ist bereits da, im Markup ausgeschrieben.
Das ist die ganze Magie und die ganzen Kosten in einem Satz Das Bild ist bereits da, weshalb es sofort rendert, und auch, warum es nicht separat zwischengespeichert oder zwischen Seiten geteilt werden kann, so wie es eine verlinkte Datei kann.
Wie konvertiere ich ein Bild auf Toolz.dev in base64?
der Bild zum Base64-Konverter Hat zwei Richtungen und die Kodierung ist die Standardeinstellung.
Wählen Sie die & quot; Bild zu Base64" Richtung, dann laden oder lassen Sie Ihr Bild, Das Tool liest die Datei lokal mit dem Browser Datei-API, und weil dieses Lesen in Ihrem Browser passiert, das Bild nie zu einem Server reist Sobald es geladen ist, erhalten Sie eine Vorschau plus vier Ausgaben, jeder mit seinem eigenen Kopier-Button.
Die Rohbasis64 ist die bloße Zeichenfolge, nützlich, wenn Sie bereits über einen eigenen Wrapper verfügen Der Daten-URI ist voll data:... Schnur bereit zum Einfügen in eine src oder url(). Das HTML <img> Tag ist ein vollständiges Element, das Sie in eine Vorlage einfügen können Das CSS background-image Deklaration ist bereit für ein Stylesheet Neben denen sehen Sie die dekodierte Byte-Größe und die Basis64 Zeichenanzahl, so können Sie das Gewicht beurteilen, bevor Sie festlegen Wenn die Zahl alarmierend aussieht, ist das das Werkzeug, das seine Arbeit macht: ein 200 KB Foto wird zu einer 270 KB Zeichenfolge in Ihrem HTML ist genau der Moment, um es sich noch einmal zu überlegen.
Wie dekodiere ich base64 wieder in ein Bild?
Wechseln Sie zu & quot; Basis64 zu Image" Richtung und fügen Sie entweder eine rohe Basis-64-Zeichenfolge oder einen vollständigen Daten-URI ein. Der Konverter ist hinsichtlich der Eingabe tolerant: Er streift den Leerraum und fügt einen vollständigen Datenbereich ein data:image/png;base64,... String liest es den MIME-Typ direkt aus dem Präfix heraus Wenn Sie blanke base64 ohne Präfix einfügen geht es von PNG aus, was die sichere Voreinstellung für die meisten Screenshots und exportierten Assets ist.
Es validiert zuerst die Zeichenfolge Wenn das, was Sie eingefügt haben, nicht plausibel ist base64, was bedeutet, dass es Zeichen außerhalb des RFC 4648 Alphabets enthält, sagt Ihnen das Tool, anstatt ein defektes Bild anzuzeigen Wenn die Eingabe überprüft wird, erhalten Sie eine Live-Vorschau und einen Download-Button, der die ursprüngliche Binärdatei neu erstellt und mit der richtigen Erweiterung speichert Diese Richtung ist wirklich praktisch, wenn Sie einen Daten-URI finden, der in einem Stylesheet oder einer API-Antwort vergraben ist und sehen möchten, was es tatsächlich ist, oder extrahieren Sie es zurück in eine echte Datei.
Hier ist alles clientseitig, das ist das gleiche Versprechen, das sich durch den Rest der Toolbox zieht, von der textorientierten Base64-Konverter zur URL-En. Wenn Sie die umfassendere Begründung dafür wünschen, diese Art von Arbeit im Browser zu belassen, wird die Kodierungsleitfaden zur Basis64 Vertieft die Kodierung selbst.
Wann sollte ich ein Bild als Basis 64 inline setzen und wann nicht?
Dies ist die Entscheidung, über die das Tool informiert werden soll. Hier ist also die Tabelle, die ich tatsächlich verwende.
| Situation | Inline als Basis64? | wieso |
|---|---|---|
| Kleines Symbol oder Logo, das überall verwendet wird | Oft ja | Entfernt eine Anfrage, erscheint sofort, der Overhead ist winzig |
| Winziger SVG- oder 1-fach-Hintergrund | ja | Der Overhead von 33 Prozent ist auf ein paar hundert Bytes vernachlässigbar |
| Single-File HTML-Export oder E-Mail | ja | Die Datei muss in sich geschlossen sein, externe Vermögenswerte sind nicht zulässig |
| Großes Heldenfoto oder Banner | kein | Overhead ist groß und das Bild kann nicht separat zwischengespeichert werden |
| Bild auf vielen Seiten wiederverwendet | kein | Eine verknüpfte Datei speichert einmal zwischen und wird freigegeben; Inlining dupliziert es überall |
| Inhaltsbild, das sich oft ändert | kein | Editoren können einen base64-Blob nicht so einfach austauschen wie eine Datei |
Das Muster hinter der Tabelle ist einfach Inlining handelt eine Netzwerkanfrage nach Bytes in Ihrem Dokument, dass der Handel gewinnt, wenn das Asset klein ist und die gespeicherte Anfrage wichtig ist, was der klassische Fall für Symbole über dem Fold ist Es verliert, wenn das Asset groß oder geteilt ist, weil Sie die 33-Prozent-Steuer zahlen, Sie verlieren unabhängiges Caching, und Sie blähen genau die Datei, die der Browser analysieren muss, bevor er etwas malen kann.
Für die & quot; no" Zeilen ist der bessere Zug normalerweise, die Datei zu optimieren und normal zu bedienen. Dort ist ein Tool wie Bildkompresse oder die Formatkonverter Verdient seinen behalten, schrumpft das asset so die verlinkte version ist so leicht wie möglich Ich habe mehr über diesen ganzen workflow in der Webentwickler-Toolkit Führung.
Hält base64 mein Image privat?
Ja und nein, und die Unterscheidung ist wichtig Base64 ist eine Kodierung, also kann jeder, der die Zeichenfolge hat, sie wieder auf das genaue Originalbild dekodieren Es bietet null Geheimhaltung Behandeln Sie einen Daten-URI nicht als eine Möglichkeit, etwas zu verbergen, denn die " Basis64 zu Image" Richtung genau dieses Werkzeugs kehrt es in einer Paste um.
Privat ist die Konvertierung selbst, auf Toolz.dev wird das Bild komplett in Ihrem Browser mit der Datei-API gelesen und kodiert, und es wird nichts hochgeladen Also verlässt das Artwork, der Screenshot, das Client-Logo, das Sie kodieren, während des Prozesses nie Ihre Maschine Das ist eine andere Garantie als die Kodierung, die den Inhalt verbirgt, und ich versuche, genau darüber zu sein, weil "private" locker herumgeworfen wird Die Privatsphäre liegt in der lokalen Verarbeitung, breiter gefasst in der Datenschutz Leitfaden, nicht in Basis 64 als Schema.
Ein paar praktische Tipps aus dem Versand dieser
Bevorzugen Sie SVG für Symbole, wenn Sie können, und inline das SVG-Markup direkt statt base64-kodieren es SVG ist bereits Text, so dass das Einpacken in base64 nur die 33-Prozent-Steuer für nichts hinzufügt Base64 glänzt für Rasterformate wie PNG und JPEG, die wirklich binär sind.
Sehen Sie sich die Gesamtgröße des Dokuments an, nicht nur das einzelne Bild. Ein Inlined-Symbol ist unsichtbar. Vierzig von ihnen, der Fehler, den ich auf diesem WordPress-Dashboard gemacht habe, verwandeln ein schlankes Stylesheet in ein Monster. Wenn Sie mehr als eine Handvoll inlinen, ist das ein Signal, einen Schritt zurückzutreten und stattdessen eine verknüpfte Sprite- oder Symbolschriftart in Betracht zu ziehen.
Halten Sie den MIME-Typ ehrlich Wenn Sie ein JPEG exportieren, aber dessen Daten-URI als kennzeichnen image/pngEinige Browser kommen zurecht und andere nicht. Der Konverter erkennt den tatsächlichen Typ aus der Datei, sodass die Ausgabe korrekt ist. Wenn Sie jedoch an anderer Stelle einen Daten-URI von Hand zusammenbauen, passen Sie den Medientyp den tatsächlichen Bytes an.
Und wenn Sie eine Codebasis voller Mystery-Daten-URIs erben, merken Sie sich die Dekodierrichtung Einfügen einer in das & quot; Base64 in Image" Seite und das Schlagen des Downloads ist die schnellste Möglichkeit, um zu sehen, was ein Stylesheet tatsächlich versendet.
Wie funktioniert die base64-Kodierung eigentlich, Schritt für Schritt?
Es hilft, die Mechanik einmal zu sehen, denn die ganze 33-Prozent-Overhead-Story fällt natürlich heraus Base64 arbeitet auf Gruppen von jeweils drei Bytes Drei Bytes sind 24 Bit Der Encoder schneidet diese 24 Bit in vier Chunks zu je sechs Bits Sechs Bits können 64 Werte darstellen, von 0 bis 63, und jeder dieser Werte ist auf ein Zeichen im Basen-64-Alphabet abgebildet: A bis Z für 0 bis 25, a bis z für 26 bis 51, die Ziffern 0 bis 9 für 52 bis 61, dann + Für 62 und / Für 63.
So werden aus drei Eingabebytes immer vier Ausgabezeichen Das ist die Quelle der Größenzunahme Vier Zeichen tragen die Information von drei Bytes, ein Verhältnis von 4 zu 3, was gleichbedeutend damit ist, dass die Ausgabe ein Drittel größer ist als die Eingabe Daran führt kein Weg vorbei, denn es ist eingebrannt, wie das Schema funktioniert.
Padding verarbeitet die Reste Wenn Ihre Daten kein sauberes Vielfaches von drei Bytes sind, paddet der Encoder die endgültige Gruppe so, dass sie immer noch eine ganze Anzahl von Zeichen erzeugt, und sie hängt ein oder zwei an = Schilder, um aufzuzeichnen, wie viel Polsterung es hinzugefügt hat Deshalb enden die Saiten von base64 so oft auf = oder ==. Ein einzelner Nachläufer = Bedeutet, dass die letzte Gruppe zwei Bytes gehalten hat; ein Doppel == Bedeutet, dass er einen hielt Der Toolz.dev-Wandler übernimmt das Auffüllen automatisch in beide Richtungen, und beim Dekodieren nimmt er gerne Zeichenfolgen mit oder ohne Nachlauf an =„, weil einige Systeme es entfernen.
Man kann sich dieses Ausspielen mit einem winzigen Beispiel ansehen Die drei ASCII-Bytes für die Buchstaben & quot; Man" kodieren für die vier Zeichen & quot; TWFu", ein berühmtes Beispiel direkt aus der Kodierungsliteratur, lassen Sie dieselben drei Zeichen als Text in einen Daten-URI fallen und Sie können die Hin - und Rückfahrt sehen, oder führen Sie ein reales Bild durch das Werkzeug und stellen fest, dass die Zeichenanzahl in der Ausgabe immer etwa vier Drittel der daneben angezeigten Bytezahl beträgt.
Das zu verstehen erklärt auch, warum base64 schlecht zu großen Bildern passt und gut zu winzigen Der Overhead ist ein fester Prozentsatz, also kostet es Sie auf einem 300 Byte Icon 100 Byte, das interessiert niemanden Auf einem zwei Megabyte großen Foto kostet es Sie zwei Drittel eines Megabyte reinen Textbloats in Ihrem Dokument, und dieses Dokument muss heruntergeladen und analysiert werden, bevor die Seite rendern kann Die Mathematik ändert sich nicht mit der Größe, aber die Konsequenzen tun es.
Häufig gestellte Fragen
Wie konvertiere ich ein Bild in Base64?
Wählen Sie die Richtung Bild zu Basis64, dann laden Sie Ihr Bild hoch oder lassen Sie es fallen Das Tool liest die Datei lokal, kodiert sie und gibt den rohen Basis64 plus einen gebrauchsfertigen Daten-URI, ein img-Tag und ein CSS-Snippet zurück, das Sie kopieren können.
Was ist ein Daten-URI?
Ein Daten-URI ist ein String, der eine Datei inline einbettet, anstatt darauf zu verlinken, in der Form Daten: [mime-type]; base64, [data].Für einen PNG sieht es aus wie Daten: image/png;base64,iVBORw0KGgo... Browser rendern es als Bild überall dort, wo eine URL erwartet wird, sodass keine separate Anfrage erforderlich ist.
Kann ich Base64 wieder in ein Bild konvertieren?
Ja. Wechseln Sie zur Basis64 in Bildrichtung und fügen Sie entweder eine rohe Basis64-Zeichenfolge oder einen vollständigen Daten-URI ein. Das Tool dekodiert es, zeigt eine Vorschau an und ermöglicht Ihnen das Herunterladen der rekonstruierten Bilddatei.
Welche Bildformate werden unterstützt?
Unterstützt werden PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO und AVIF. Der richtige MIME-Typ wird aus der Datei erkannt, sodass der resultierende Daten-URI korrekt rendert.
Warum ist die Base64-Zeichenfolge größer als mein Bild?
Base64 repräsentiert drei Bytes binärer Daten mit vier Textzeichen, die codierte Ausgabe ist also etwa 33 Prozent größer als die Quelle, deshalb passt Base64 mehr zu kleinen Symbolen und Logos als zu großen Fotos.
Ist es sicher, hier Bilder zu konvertieren?
Ja. Jedes Bild wird vollständig in Ihrem Browser mit der Datei-API gelesen und kodiert. Es wird keine Datei, Zeichenfolge oder Ergebnis auf einen Server hochgeladen, sodass private Bilder auf Ihrem Gerät verbleiben.
Soll ich Bilder als Base64 in der Produktion inline?
Inlining funktioniert gut für kleine, häufig verwendete Assets wie Symbole, da es eine HTTP-Anfrage entfernt und einen Blitz fehlender Bilder vermeidet Bei großen Bildern ist es normalerweise besser, separate Dateien aufzubewahren, damit der Browser sie unabhängig zwischenspeichern kann.
Funktioniert der Konverter offline und mobil?
Ja. Da die gesamte Verarbeitung clientseitig erfolgt, funktioniert sie auch ohne Verbindung, nachdem die Seite geladen wurde, und die Benutzeroberfläche reagiert auf moderne Desktop- und mobile Browser.
