Ein 2-KB-Icon muss nicht als eigene Datei geladen werden. Steht es als Text im Stylesheet, spart der Browser eine Anfrage. Das Werkzeug macht aus PNG, JPG, GIF, WebP, BMP oder SVG genau diesen Text. Umgekehrt geht es auch: Base64 einfügen, Bild herunterladen.
Bild in Base64 umwandeln in vier Schritten
- Lass die Schaltfläche „Bild zu Base64“ aktiv.
- Ziehe ein Bild auf die Ablagefläche oder klicke darauf und wähle eine Datei.
- Prüfe Vorschau, Typ, Größe in Bytes und Pixelmaße.
- Klicke in dem Feld, das du brauchst, auf „Kopieren“. Mit „.txt herunterladen“ speicherst du den Text als Datei.
Beim Start ist ein kleines Beispielbild geladen. Die Felder sind also nie leer.
Data-URI, Rohtext, img-Tag, CSS und Markdown
Pro Bild gibt es fünf Felder mit je einer eigenen Kopieren-Schaltfläche. Die Data-URI beginnt mit data:image/png;base64, und enthält danach den Text. Das Feld „Base64 (roh)“ enthält nur den Text. Dazu kommen ein <img>-Tag, eine CSS-Zeile background-image: url(...) und ein Markdown-Bild.
Der Dateiname dient als alt-Text. Anführungszeichen, & und spitze Klammern im Namen werden maskiert. Eine Datei namens Logo "neu".png zerstört das Tag also nicht.
Warum der Text ein Drittel größer ist als das Bild
Base64 schreibt je 3 Bytes als 4 Zeichen. Der Text ist deshalb rund 33 % größer als die Datei. Das Tool zeigt den genauen Wert für dein Bild. Dazu kommt: Ein eingebettetes Bild liegt in der HTML- oder CSS-Datei und wird nicht einzeln gecacht. Ab 100 KB Base64-Text erscheint ein Hinweis. Bei Fotos ist ab dieser Größe meist eine normale Bilddatei besser. Bei kleinen Icons und Platzhaltern lohnt sich Base64 dagegen oft.
Base64-Text zurück in ein Bild verwandeln
Wähle „Base64 zu Bild“ und füge eine komplette Data-URI oder nur den Base64-Teil ein. Das URL-sichere Alphabet (- und _), fehlendes = am Ende und Zeilenumbrüche stören nicht. Eine Data-URI ohne ;base64 wird als prozentkodierter Text gelesen. So sehen SVG-Data-URIs oft aus.
Den Typ erkennt das Tool an den ersten Bytes: PNG, JPEG, GIF, WebP und BMP an ihrer Signatur, SVG am Anfang <svg. Nennt die Data-URI einen anderen Typ als die Bytes, weist das Tool darauf hin und richtet sich nach den Bytes. Der Download heißt image.png, image.jpg und so weiter. Ungültiger Text liefert eine Fehlermeldung statt einer leeren Vorschau.
20-MB-Grenze und was im Browser bleibt
Zum Kodieren nimmt das Tool ein Bild auf einmal, höchstens 20 MB. Eine größere Datei wird abgelehnt, bevor sie gelesen wird. Beim Dekodieren gilt dieselbe Grenze für die Bilddaten. Bei sehr langen Texten zeigen die Felder die ersten 100.000 Zeichen und sagen das dazu. Kopieren und Herunterladen verwenden immer den ganzen Text.
Die Datei verlässt den Browser nicht. Sie wird mit der Datei-Schnittstelle des Browsers gelesen, die Vorschau kommt aus einer lokalen Blob-URL, und es wird keine Anfrage gesendet. Das Tool speichert nichts. Ein Neuladen der Seite löscht alles. Die Zwischenablage wird nur beim Klick auf „Kopieren“ benutzt.