Bild in Base64

So funktioniert es

Base64 ist eine Schreibweise, die binäre Daten allein mit Textzeichen darstellt. Kodieren Sie ein Bild auf diese Weise, können Sie es unmittelbar in eine HTML- oder CSS-Datei einsetzen, statt den Browser eine eigene Datei anfordern zu lassen. Wählen Sie Ihre Bilder über das Feld aus oder klicken Sie darauf, um sie auszuwählen, wählen Sie die Ausgabeform und drücken Sie auf die Schaltfläche; jedes Bild kommt als TXT-Datei zurück, die Sie herunterladen und öffnen. Der Preis dafür ist die Größe: Aus drei Byte des Originals werden vier Zeichen, die kodierte Fassung ist also rund ein Drittel größer, und eine nachgelagerte Komprimierung holt davon nur einen Teil zurück. Der zweite Preis ist der Zwischenspeicher — eine verknüpfte Bilddatei legt der Browser einmal ab und verwendet sie auf jeder Seite wieder, eine eingebettete lädt mit jeder Seite erneut. Zusammen ziehen diese beiden Tatsachen die Grenze: Das Verfahren passt zu kleinen Symbolen, Logos und Mustern und arbeitet bei Fotos gegen Sie.

Dieses Werkzeug ist auch als bild in base64 umwandeln, base64 bild kodieren, data uri erzeugen, png in base64, css hintergrundbild base64 bekannt.

Was ist Base64?

Base64 ist ein Verfahren, binäre Daten mit einem Alphabet aus 64 unbedenklichen Zeichen zu schreiben: Buchstaben, Ziffern und zwei Satzzeichen. Entwickelt wurde es, um Dateien durch Kanäle zu bringen, die nur Text vertragen — E-Mail-Protokolle, HTML- und CSS-Dateien, JSON-Rümpfe —, wo rohe Binärdaten beschädigt oder abgewiesen würden. Es ist keine Verschlüsselung: Es verbirgt nichts, jede Person kann es mit einer Zeile Code zurückrechnen, und es macht die Daten rund ein Drittel größer.

Was ist Data-URI?

Eine Data-URI ist eine besondere Art von Adresse, die die Datei in der Adresse selbst trägt. Sie beginnt mit data:, nennt dann den Typ des Inhalts, danach die Kennzeichnung base64 und zuletzt die kodierten Zeichen — data:image/png;base64,… ist das vertraute Muster. Trifft ein Browser auf eine Adresse dieser Form, löst er das Bild unmittelbar aus der Adresse auf, ohne eine Anfrage über das Netz zu stellen. So wohnt ein kleines Symbol in der HTML- oder CSS-Datei statt daneben.

Was ist MIME-Typ?

Ein MIME-Typ ist die kurze Angabe, um welche Art von Daten es sich handelt: image/png, image/jpeg, text/plain. In einer Data-URI steht er zwischen data: und der Kennzeichnung base64, und er sagt dem Browser, dass er die Zeichen als Bild zeichnen und nicht als Text ausgeben soll. Wird ein JPEG als image/png ausgezeichnet, stellen die meisten Browser es trotzdem dar, weil sie in die Daten hineinsehen — strenge Prüfprogramme, manche E-Mail-Programme und viele Schnittstellen weisen die Unstimmigkeit dagegen zurück.

Sind Base64 und Data-URI dasselbe?

Sie sind nicht dasselbe, auch wenn das eine im anderen steckt. Base64 ist die Kodierung selbst: Binärdaten, geschrieben mit 64 unbedenklichen Textzeichen, mehr nicht. Eine Data-URI ist die Hülle, die diesen Text zu etwas macht, das ein Browser als Adresse behandeln kann, mit dem MIME-Typ vorn und den kodierten Zeichen dahinter. Reines Base64 übergeben Sie einer Schnittstelle oder setzen es in eine Konfigurationsdatei; eine Data-URI setzen Sie in ein src-Attribut oder in ein CSS-url(). Das eine dort einzusetzen, wo das andere erwartet wurde, ist die übliche Ursache für ein Bild, das nicht erscheinen will. Dieses Werkzeug erzeugt beide Formen — wählen Sie die, die zu der Stelle passt, an die der Text soll.

Wann sich das Einbetten lohnt

Ein Symbol, ein Logo oder ein Hintergrundmuster von wenigen Kilobyte einzubetten spart der Seite eine Anfrage und lässt das erste Bild früher erscheinen, weil es schon da ist, sobald das Stylesheet gelesen wird. Auch in E-Mail-Vorlagen hilft es, denn viele Programme blockieren externe Bilder, bis die lesende Person zustimmt — ein eingebettetes Bild gehört zur Nachricht und ist sofort sichtbar.

Bei großen Bildern kehrt sich das um: Die HTML- oder CSS-Datei bläht sich auf, sie lässt sich nicht mehr sinnvoll zwischenspeichern, und die Daten laufen bei jedem einzelnen Seitenaufruf erneut über die Leitung. Häufig wechselnde Bilder eignen sich ebenfalls schlecht, weil ein Bildwechsel dann eine Änderung am Quelltext bedeutet.

• Passend: kleines Symbol, Logo, Hintergrundmuster, E-Mail-Vorlage
• Unpassend: Foto, großes Titelbild, häufig wechselnder Inhalt

Was die Ausgabeformen unterscheidet

Eine Data-URI ist die vollständige Adresse mit der Angabe des Dateityps am Anfang und lässt sich direkt in ein src-Attribut oder in ein CSS-url() schreiben. Die Formen CSS und HTML legen genau diese Adresse in eine fertige Zeile, sodass Sie nichts mehr darum herum tippen müssen.

Reines Base64 ist allein die kodierte Angabe, ohne Typ und ohne Präfix. Diese Form erwarten in der Regel ein API-Rumpf oder eine Konfigurationsdatei — eine vollständige Data-URI dort einzusetzen, wo reines Base64 verlangt war, ist ein häufiger Grund für eine abgelehnte Anfrage.

Der Größenaufschlag in Zahlen

Der Zuwachs ist keine Schätzung, er folgt aus dem Verfahren: Je drei Byte werden als vier Zeichen geschrieben, das sind 33 Prozent mehr, zuzüglich einer kleinen Auffüllung. Aus einem Symbol von 4 KB werden rund 5,4 KB Text; aus einem Foto von 400 KB werden rund 533 KB, die dann in Ihrem HTML stehen.

Komprimierung verkleinert den Abstand, schließt ihn aber nicht, denn Base64-Text lässt sich schlechter komprimieren als das Binärformat, aus dem er stammt. Rechnen Sie ehrlich: eine gesparte Anfrage gegen eine dauerhaft größere Datei, die mit jeder Seite erneut geladen wird.

Häufige Fragen

Wird das Bild durch Base64 größer?

Ja, um etwa ein Drittel. Aus drei Byte Binärdaten werden vier Textzeichen, aus einem Bild von 300 KB also rund 400 KB Text. Deshalb gehört das Verfahren zu kleinen Bildern, und deshalb macht ein eingebettetes Foto eine Seite meist langsamer statt schneller.

Wie verwende ich die Ausgabe?

Öffnen Sie die heruntergeladene TXT-Datei und kopieren Sie die Zeile. Bei der Form CSS fügen Sie sie in eine Regel Ihres Stylesheets ein, bei HTML setzen Sie den Tag in die Seite, bei Data-URI schreiben Sie den Text in ein src-Attribut oder in ein url(). Mehr ist nicht nötig.

Wird meine Datei irgendwohin hochgeladen?

Nein. Das Bild wird von Ihrem eigenen Browser gelesen und kodiert und an keinen Server gesendet. Deshalb arbeitet das Werkzeug auch ohne Verbindung weiter, und deshalb können Sie ein vertrauliches Bild kodieren, ohne dass es das Gerät verlässt.

Gibt es eine Größengrenze?

Das Werkzeug setzt keine, Ihr Projekt schon. Sobald ein eingebettetes Bild etwa zehn Kilobyte überschreitet, wiegt die gesparte Anfrage weniger als das zusätzliche Gewicht der Datei — ab diesem Punkt verknüpfen Sie das Bild besser, statt es einzubetten.