Was Base64 ist
Base64 ist eine Methode, Binärdaten mit gewöhnlichen Zeichen zu schreiben: Buchstaben, Ziffern und einigen Symbolen. Ein auf diese Weise kodiertes Bild wird zu einer langen Zeichenkette, die Sie in einen Data-URI setzen können, zum Beispiel in ein img-Tag oder einen CSS-Hintergrund.
Ein Data-URI beginnt mit einem kurzen Präfix, das den Dateityp nennt, gefolgt vom kodierten Text. Der Browser dekodiert ihn und zeigt das Bild an, ohne eine separate Anfrage nach einer Datei zu stellen.
Gute Einsatzzwecke
- Sehr kleine Icons oder Platzhalter, die eine zusätzliche Anfrage sparen
- HTML-E-Mails oder Einzeldatei-Seiten, bei denen externe Dateien umständlich sind
- Testdaten, Dokumentationsbeispiele und JSON-Nutzlasten, bei denen ein Dateiverweis nicht verfügbar wäre
- Kleine Bilder in einem Stylesheet, die ohne weitere Dateien funktionieren müssen
Nachteile
Der Text ist ungefähr ein Drittel größer als die Originaldatei. Der Browser kann ein eingebettetes Bild nicht getrennt von der Seite zwischenspeichern, es wird also jedes Mal erneut heruntergeladen, wenn das HTML oder CSS es wird. Lange Zeichenketten machen HTML und CSS außerdem schwerer zu verarbeiten sowie schwerer zu lesen und zu bearbeiten.
Manche E-Mail-Programme blockieren oder begrenzen eingebettete Bilder, testen Sie also, bevor Sie sich in einem Newsletter darauf verlassen.
Als Faustregel gilt: Betten Sie nur kleine Bilder ein, bis zu einigen Kilobyte. Liefern Sie alles Größere als normale Datei aus, wo es zwischengespeichert, komprimiert und verzögert geladen werden kann. Moderne Server erlauben es außerdem, mehrere Dateien über eine Verbindung zu übertragen, sodass die Einsparung durch den Verzicht auf eine Anfrage oft kleiner ist als früher.
Ein Beispiel aus der Praxis (veranschaulichend)
Angenommen, Sie haben ein 2 KB großes Pfeil-Icon, das in einer Schaltfläche verwendet wird. Kodiert wird daraus etwa 2,7 KB Text in Ihrem CSS. Das ist in Ordnung, und Sie sparen eine Anfrage.
Nehmen wir nun an, Sie betten ein 300 KB großes Foto ein. Der Text wächst in Ihrem HTML auf rund 400 KB. Jeder Besuch muss alles herunterladen und verarbeiten, bevor die Seite fertig sein kann, und das Foto lässt sich nicht einzeln zwischenspeichern. Eine normale, zuvor komprimierte Datei ist die bessere Wahl.
Schritt für Schritt
- Machen Sie das Bild zuerst so klein wie möglich: verkleinern und komprimieren.
- Prüfen Sie die endgültige Dateigröße. Liegt sie über einigen Kilobyte, erwägen Sie stattdessen eine normale Datei.
- Wandeln Sie es in Base64 um und wählen Sie die benötigte Ausgabe: Data-URI, HTML-img-Tag, CSS-Hintergrund oder reines Base64.
- Fügen Sie es in Ihre Seite, Ihr Stylesheet oder Ihr JSON ein.
- Öffnen Sie die Seite und bestätigen Sie, dass das Bild angezeigt wird.
Häufige Fehler
- Große Fotos einbetten, was die Seite aufbläht.
- Ein Bild kodieren, bevor es optimiert wurde, sodass unnötige Bytes eingebettet werden.
- Dieselbe lange Zeichenkette an mehreren Stellen wiederholen, statt sie einmal zu definieren, zum Beispiel als eine CSS-Klasse.
- Das Data-URI-Präfix vergessen, wenn reines Base64 in HTML oder CSS verwendet wird.
- Base64 für eine Form von Sicherheit halten. Es ist nur eine Kodierung, und jeder kann sie dekodieren.
- Eine sehr lange Zeichenkette an eine Stelle einfügen, die Zeilenlänge oder Feldgröße begrenzt, was das Bild abschneiden kann.
Kurze Checkliste
- Ist das Bild nur wenige Kilobyte groß?
- Ist es bereits verkleinert und komprimiert?
- Muss es wirklich ohne separate Datei auskommen?
- Haben Sie das Ergebnis an der Stelle getestet, an der es verwendet wird?
- Wird das Bild auf mehreren Seiten wiederverwendet? Dann ist eine normale Datei wahrscheinlich besser.
Mit DoneImg im Browser erledigen
Öffnen Sie das Base64-Tool und fügen Sie Ihr Bild hinzu. Wählen Sie die benötigte Ausgabe: einen Data-URI, ein fertiges HTML-img-Tag, eine CSS-Hintergrundregel oder den reinen Base64-Text, und kopieren Sie sie. Wirkt die Zeichenkette sehr lang, gehen Sie zurück und verwenden Sie zuerst die Tools zum Verkleinern und Komprimieren.
Die Umwandlung findet in Ihrem Browser statt, das Bild wird also nie hochgeladen und bleibt auf Ihrem Gerät.
Häufig gestellte Fragen
Macht Base64 ein Bild kleiner?
Nein. Es macht die Daten ungefähr ein Drittel größer, weil die Datei als Text gespeichert wird.
Kann ich Base64 wieder in ein Bild zurückverwandeln?
Ja. Base64 ist umkehrbar, und Browser dekodieren einen Data-URI automatisch.
Ist Base64 für ein Logo im Kopfbereich meiner Webseite geeignet?
Meist nicht. Ein Logo, das auf jeder Seite erscheint, ist als normale Datei oder als SVG besser, damit der Browser es einmal zwischenspeichern und überall wiederverwenden kann.
Welchen Dateityp sollte ich kodieren?
Verwenden Sie das, was für das Bild am kleinsten ist: SVG für einfache Formen, WebP oder PNG für kleine Grafiken und JPG oder WebP für Fotos. Das Kodieren verändert das Bild nicht, nur die Art, wie es geschrieben wird.