Bild in Base64 umwandeln – online, aus einer Datei, per Einfügen oder über eine Bild-URL. Du erhältst sofort eine Data URI und einen reinen Base64-String, und nichts wird hochgeladen.
Hinweis: Online-Bilder müssen Cross-Origin-Zugriffe erlauben. Schlägt es wegen CORS fehl, lade das Bild herunter und nutze den lokalen Upload.
Wähle ein Bild aus oder zieh es hierher – das Ergebnis erscheint dann an dieser Stelle…
Drei Wege hinein, ein einheitliches Ergebnis — und für alle drei dieselben Zahlen.
Alles, was dieser Konverter tut, beginnt gleich: Er liest die Bytes des Bildes und drückt sie als ASCII-Text aus. Ob diese Bytes aus einem Dateidialog, einem Drag, der Zwischenablage oder einer entfernten Adresse stammen, es läuft derselbe Kodierpfad. Genau deshalb sind die Größenangaben über dem Ergebnis unabhängig vom Weg vergleichbar — du stellst nie einen gemessenen Wert einem geschätzten gegenüber.
Der gewohnte Dateidialog, auf Bilder gefiltert. Mehrere ausgewählte Dateien werden als ein Stapel verarbeitet und bleiben einzeln in der Ergebnisliste stehen.
Zieh Bilder irgendwo auf die Seite, oder drücke Strg+V (Cmd+V unter macOS), um direkt aus der Zwischenablage einzufügen — praktisch für Screenshots, die nie auf der Platte gelandet sind.
Bild-URL zu Base64 umwandeln, indem du einen Link einfügst. Auch dieser Weg misst die echte Bytelänge — was passiert, wenn ein Host Cross-Origin-Zugriffe blockiert, steht im nächsten Abschnitt.
Ein Bild aus einem anderen Origin zu holen ist der einzige Teil dieses Werkzeugs, der aus Gründen scheitern kann, die außerhalb deiner Kontrolle liegen — also scheitert er laut und erklärt sich.
Der Konverter probiert nacheinander zwei Strategien. Zuerst eine einfache fetch-Anfrage, die bevorzugt wird, weil sie die exakte Bytelänge zurückliefert — die angezeigte Originalgröße und Größenzunahme sind damit Messungen und keine Schätzungen. Danach das Laden über ein <img>-Element und Zeichnen auf ein Canvas, was greift, wenn der Host Cross-Origin-Zugriffe erlaubt, ein direkter fetch aber blockiert wurde.
Verbietet der Host den Cross-Origin-Zugriff, verweigert der Browser die Herausgabe der Pixeldaten und beide Strategien scheitern. Diese Verweigerung ist eine Sicherheitsrichtlinie des Browsers und kein Fehler des Werkzeugs; kein clientseitiger Code kann sie umgehen. Wenn es dazu kommt, bekommst du eine konkrete Erklärung und einen ebenso konkreten nächsten Schritt: das Bild herunterladen und den lokalen Upload nutzen, wo es gar keine Origin-Grenze zu überschreiten gibt.
Warum der Fallback nach PNG neu kodiert. Ein Canvas kann nur die Pixel exportieren, die es hält, nicht den ursprünglichen Container. Bilder, die über diesen Weg geladen werden, kommen als PNG zurück; ihre angegebene Base64-Größe ist daher näherungsweise und das angezeigte Format ist PNG, auch wenn die Quelle ein JPEG war. Der direkte fetch-Weg hat diesen Vorbehalt nicht.
| Schritt | Was das Werkzeug tut |
|---|---|
| Normalisieren | Entfernt Leerzeichen und ergänzt https://, wenn nur ein Hostname eingegeben wurde, sodass example.com/pic.png und https://example.com/pic.png beide funktionieren. |
| Abrufen | Fordert die Bytes ohne Anmeldedaten an. Ein Content-Type, der kein Bild ist, wird abgelehnt, bevor überhaupt kodiert wird. |
| Prüfen | Das Containerformat wird anhand der Magic Bytes der Datei erkannt statt dem Antwort-Header zu vertrauen, damit das Data-URI-Präfix nie im Widerspruch zur Nutzlast stehen kann, die es einleitet. |
| Kodieren | Die Bytes werden in Blöcken fester Größe nach Base64 umgewandelt, was verhindert, dass sehr große Bilder den Aufrufstapel sprengen. |
„Online“ heißt hier: keine Installation und keine Anmeldung — nicht, dass deine Datei eine Reise über eine fremde Festplatte macht.
Die meisten Konverter im Netz laden dein Bild auf einen Server, kodieren es dort und schicken den Text zurück. Dieser nicht. Die Datei wird mit der FileReader-API des Browsers gelesen und im Seitenspeicher kodiert, die Bytes verlassen den Rechner also nicht. Das ist keine Werbeaussage, die du glauben musst: Öffne während der Umwandlung das Netzwerk-Panel deines Browsers, und du wirst keine Anfrage sehen, die dein Bild transportiert.
Die praktische Folge ist, dass das Werkzeug auch für Material taugt, das du nicht bedenkenlos an Dritte geben würdest — interne Screenshots, Kundenarbeit, Bilder mit angehängten Metadaten — und dass es keine Obergrenze gibt, die ein Upload-Limit oder eine Warteschlange vorschreiben würde.
Die Geschwindigkeit hängt nur von deiner eigenen Festplatte und CPU ab, und es gibt kein Tageslimit, weil kein Server Anfragen zählt.
Öffne die Entwicklerwerkzeuge, wechsle in den Netzwerk-Tab und wandle ein Bild um. Nichts, was die Datei trägt, verlässt die Seite.
Base64 existiert, um Binärdaten durch Kanäle zu schleusen, die nur Text annehmen. Der Preis dafür ist ein vorhersehbarer Zuwachs.
Die Kodierung nimmt 3 Bytes Binärdaten — 24 Bit — und teilt sie in 4 Gruppen zu je 6 Bit, von denen jede auf eines von 64 druckbaren ASCII-Zeichen abgebildet wird. Aus je 3 Bytes werden also 4 Zeichen: ein festes Verhältnis von 4/3, rund 33 % Wachstum. Ist die Eingabelänge nicht durch 3 teilbar, wird die letzte Gruppe mit einem oder zwei =-Zeichen aufgefüllt, damit die Gesamtlänge ein Vielfaches von 4 bleibt.
| Effekt | Details |
|---|---|
| Wachstum der Nutzlast | Ungefähr +33 %, bedingt durch die 4/3-Zeichenabbildung. Aus einem PNG mit 248 KB werden rund 331 KB Text. |
| Data-URI-Präfix | Der Kopf data:image/png;base64, fügt feste 22 Zeichen hinzu, wenn du die Variante mit Präfix statt des reinen Strings kopierst. |
| Übertragungskosten | Text lässt sich gut komprimieren, über gzip oder brotli kostet ein eingebettetes Bild daher oft deutlich weniger, als das rohe Base64 vermuten lässt. |
| Caching | Das ist der eigentliche Kompromiss. Ein eingebettetes Bild lässt sich nicht getrennt vom Dokument zwischenspeichern, das es trägt, und wird daher bei jedem Versand dieses Dokuments erneut mitgeschickt. |
| Format | Hinweise |
|---|---|
| JPG / JPEG | Erkannt am Marker FF D8; die übliche Wahl für Fotos. |
| PNG | Verlustfrei, unterstützt Transparenz, und das Format, das der Canvas-Fallback exportiert. |
| GIF | Aus den Originalbytes kodiert; inline wird nur das erste Einzelbild angezeigt. |
| WebP | Erkannt über den Header RIFF…WEBP. |
| SVG | Wird als Text gelesen, die Nutzlast entspricht also Byte für Byte dem Original-Markup — ohne binäre Rundreise, die etwas beschädigen könnte. |
| BMP / ICO | Aus den Originalbytes kodiert und unverändert angezeigt. |
Zieh ein Bild auf die Ablagefläche, klicke zum Auswählen einer Datei oder füge es direkt mit Strg+V (Cmd+V unter macOS) aus der Zwischenablage ein. Der Konverter liest die Bytes lokal und gibt den Base64-String sofort zurück – es gibt keinen Upload-Schritt und keine Warteschlange, das Ergebnis erscheint also so schnell, wie die Datei gelesen werden kann.
Füge die Bildadresse in das Feld „Bild-URL zu Base64“ ein und klicke auf Laden. Das Werkzeug fordert die Bytes an und kodiert sie direkt, wodurch du auch die exakte Originalgröße statt einer Schätzung erhältst. Erlaubt der Host keine Cross-Origin-Zugriffe, blockiert der Browser den Zugriff; der Konverter versucht es dann über ein Canvas-Element erneut und rät dir, falls auch das blockiert wird, das Bild herunterzuladen und den lokalen Upload zu nutzen.
Er ist kostenlos, benötigt kein Konto und läuft in jedem modernen Browser auf Desktop und Mobilgeräten. Da jede Umwandlung innerhalb der Seite stattfindet, gibt es nichts zu installieren, keine Warteschlange und kein Kontingent.
Base64-Kodieren bildet je 3 Bytes Binärdaten auf 4 ASCII-Zeichen ab, der kodierte Text ist also rund 33 % größer als die Originaldatei. Das Data-URI-Präfix kommt mit ein paar Zeichen hinzu. Die Statistikzeile über dem Ergebnis zeigt den gemessenen Wert für dein konkretes Bild und keine Faustregel.
JPG, JPEG, PNG, GIF, WebP, BMP, SVG und ICO, bis zu 10 MB pro Datei. SVG wird als Text gelesen, damit die Nutzlast mit dem Original-Markup identisch bleibt, und das im Ergebnis angezeigte Format wird anhand der Magic Bytes der Datei erkannt statt dem Dateinamen zu vertrauen.
Füge sie in ein src-Attribut im HTML, ein background-image in CSS, ein Markdown-Bild oder einen JavaScript-String ein. Am nützlichsten ist sie für kleine Symbole und Logos, die sonst eine zusätzliche Netzwerkanfrage kosten würden; bei großen Fotos überwiegen die 33 % Mehraufwand und der Verlust des Browser-Caches meist den gesparten Request.
Nein. Die Umwandlung läuft im Browserspeicher und die Bytes werden nie übertragen. Du kannst das im Netzwerk-Panel deines Browsers überprüfen – die einzigen Anfragen betreffen die Seite selbst.