Wie funktioniert die Umwandlung?
Bei diesem Tool lädst du ein Bild direkt in deinen Browser. Die Umwandlung erfolgt lokal mit JavaScript: Zuerst wird das Bild mit dem FileReader eingelesen und dann in eine base64-kodierte Zeichenkette umgewandelt. Daraus entsteht eine Data-URI, die den passenden MIME-Typ enthält und sich direkt in HTML, CSS oder JSON einbauen lässt.
Der gesamte Vorgang passiert auf deinem eigenen Rechner, sodass keine externen Server beteiligt sind. Das schützt die Privatsphäre und sorgt für besonders schnelle Ergebnisse, unabhängig von der Dateigröße (begrenzt durch den Arbeitsspeicher deines Browsers).
Wann ist eine Data-URI sinnvoll?
Base64-Data-URIs eignen sich gut für kleine, statische Bilder, etwa Icons oder Logos, die du ohne externe Datei einbinden möchtest. Das ist hilfreich in E-Mails, bei Einzelseiten-Projekten oder überall dort, wo externe Bildverweise problematisch sind.
Beachte, dass der Einsatz bei großen Bildern oder mehrfach genutzten Assets nicht sinnvoll ist: Die Dateien werden um etwa 33 % größer und können nicht separat zwischengespeichert werden. Das führt zu längeren Ladezeiten, wenn du viele oder große Bilder einbindest.
Worauf solltest du achten?
Base64-kodierte Bilder lassen sich einfach kopieren und in den Quellcode einfügen. Bei sehr langen Data-URIs kann es jedoch passieren, dass ältere E-Mail-Programme oder Editoren die Zeilenlänge beschränken und dadurch Fehler entstehen.
Falls du die Dateigröße weiter verringern möchtest, empfiehlt sich eine Komprimierung des Bildes vor der Umwandlung, zum Beispiel durch eine externe App oder ein Online-Tool. Für den Einsatz im Web werden Formate wie PNG, JPG oder WebP unterstützt.
Häufig gestellte Fragen
Verringert Base64-Encoding die Dateigröße?
Nein, das Bild wird durch Base64 um etwa ein Drittel größer als die Originaldatei. Für kleine Grafiken ist der Mehraufwand meist vertretbar, für große Bilder sollte man auf klassische Links setzen.
Wann sollte ich ein Bild als Data-URI einbinden?
Data-URIs sind ideal für kleine, oft genutzte Grafiken in E-Mails oder Single-File-Projekten. Bei umfangreichen Seiten oder mehrfach genutzten Bildern ist die klassische Einbindung allerdings effizienter.
Warum funktioniert meine Data-URI nicht in CSS?
Manche Editoren oder CSS-Parser kommen mit sehr langen Zeichenketten nicht klar oder erwarten bestimmte Maskierungen. Achte darauf, dass keine Zeilenumbrüche im Data-URI vorhanden sind und der MIME-Typ korrekt ist.
Wird mein Bild während der Umwandlung hochgeladen?
Nein, das Bild bleibt vollständig auf deinem Rechner. Die Umwandlung erfolgt direkt im Browser, sodass keine Daten an externe Server übertragen werden.
Wie kann ich das Bild vor dem Kodieren verkleinern?
Vor dem Kodieren kannst du das Bild mit einem Bildbearbeitungsprogramm oder einem anderen Online-Tool komprimieren. Das Tool selbst verändert die Bildgröße nicht, sondern wandelt nur die Originaldatei in Base64 um.
Welche Dateitypen werden für Data-URIs unterstützt?
Die meisten gängigen Formate wie PNG, JPG und WebP lassen sich problemlos konvertieren. Der MIME-Typ wird automatisch erkannt und korrekt in die Data-URI übernommen.
Probleme oder Ideen zu diesem Werkzeug? Mitteilung senden