Bild in Base64 umwandeln – und zurück

Base64 ist eine Art, Binärdaten wie eine Bilddatei mit nur 64 sicheren Textzeichen zu schreiben: Buchstaben, Ziffern, Plus und Schrägstrich. Je drei Bytes der Datei werden zu vier Textzeichen. So können binäre Inhalte durch Systeme reisen, die nur Text verarbeiten – etwa JSON, HTML-Attribute, CSS-Dateien und manche E-Mail-Formate.

Eine Data-URI umschließt diesen Text mit einem kurzen Header, der dem Browser sagt, was er enthält, zum Beispiel data:image/png;base64, gefolgt von der kodierten Datei. Browser zeigen sie genau wie einen normalen Bildlink an.

Wann sich Einbetten lohnt

Bei Base64 vs. Bilddatei geht es um Größe und Caching. Base64-Text ist etwa ein Drittel größer als die Originaldatei und kann vom Browser nicht separat zwischengespeichert werden. Eine normale Datei wird einmal geladen und wiederverwendet. Base64 glänzt bei sehr kleinen Bildern, wo eine eingesparte Anfrage mehr zählt als ein paar hundert Bytes.

Fügen Sie im Tab „Bild in Base64“ ein Bild hinzu. Das Tool liest es lokal, erkennt den echten Typ aus den Dateibytes und zeigt Originalgröße, kodierte Größe und Zuwachs. Darunter stehen fünf fertige Snippets mit Kopier-Schaltflächen. Sehr lange Zeichenfolgen werden in den Feldern der Geschwindigkeit halber gekürzt, aber die Kopier-Schaltfläche kopiert immer den vollständigen Text.

Sie können die Data-URI auch als Textdatei herunterladen – praktisch bei sehr langen Zeichenfolgen oder wenn Sie sie an Kollegen schicken möchten.

Gängige Formate

PNG in Base64 ist der häufigste Fall, weil Icons und Logos meist PNG-Dateien mit Transparenz sind. JPG in Base64 funktioniert genauso und passt für kleine Fotos wie Avatare. Auch SVG-Dateien werden kodiert; bei SVG kann einfacher URL-kodierter Text sogar kleiner sein, aber Base64 ist die kompatibelste Option.

In HTML

Um ein Base64-Bild in HTML zu nutzen, fügen Sie das img-Snippet in Ihre Seite ein. Es enthält bereits einen Alt-Text auf Basis des Dateinamens sowie Breite und Höhe, was Layoutverschiebungen verhindert. Passen Sie den Alt-Text an, damit er das Bild für Screenreader beschreibt.

In CSS

Für ein Base64-Hintergrundbild in CSS fügen Sie die background-image-Regel in Ihr Stylesheet ein. Das passt für kleine Muster und Icons. Behalten Sie große Fotos als Dateien, denn eingebettet machen sie das ganze Stylesheet langsamer zu laden und zu verarbeiten.

Markdown und JSON

Das Markdown-Snippet funktioniert in vielen Editoren und Dokumentations-Tools, die Data-URIs akzeptieren. Für APIs und JSON nutzen Sie das Snippet „Nur Base64“ ohne data:-Header, es sei denn, die API-Dokumentation verlangt eine vollständige Data-URI.

Wechseln Sie zum Tab „Base64 in Bild“ und fügen Sie eine reine Base64-Zeichenfolge oder eine vollständige Data-URI ein. Das Tool entfernt Leerzeichen und Zeilenumbrüche, akzeptiert URL-sichere Zeichen, ergänzt fehlendes Padding, dekodiert den Text und prüft die ersten Bytes, um den echten Bildtyp zu erkennen. Dann sehen Sie das Bild, seine Maße und Größe sowie eine Download-Schaltfläche mit der richtigen Dateiendung.

Ist der Text kein gültiges Base64, abgeschnitten oder eine andere Dateiart, erklärt eine klare Meldung, was schiefgelaufen ist. Das macht den Decoder nützlich zum Debuggen von API-Antworten, Datenbankfeldern und E-Mail-Quelltext.

Als Faustregel: Betten Sie Bilder unter wenigen Kilobyte ein und behalten Sie alles andere als Dateien. Das Tool warnt Sie, wenn ein Bild größer als 100 KB ist, weil das Einbetten Ihr HTML oder CSS schwer machen würde. Größere Bilder komprimieren Sie zuerst mit unserem Tool zum Bild komprimieren oder wandeln sie in WebP um.

Base64 ist eine Kodierung, keine Verschlüsselung. Jeder kann es dekodieren – betrachten Sie es also nie als Möglichkeit, ein Bild zu verstecken oder zu schützen.

Datenschutz

Kodieren und Dekodieren passieren vollständig in Ihrem Browser mit eingebauten Funktionen. Nichts wird hochgeladen oder gespeichert, und das Tool ist kostenlos, unbegrenzt und verbraucht keine EnhancerPro-Credits.

Warum ist meine Zeichenfolge so lang?

Je drei Bytes werden zu vier Zeichen, ein 30-KB-Bild wird also zu etwa 40.000 Zeichen. Das ist normal. Ist es für Ihren Zweck zu lang, verkleinern Sie die Bildmaße oder komprimieren das Bild vor dem Kodieren.

Zeilenumbrüche und E-Mail

Manche E-Mail-Systeme brechen Base64 in Zeilen mit 76 Zeichen um. Der Decoder ignoriert diese Zeilenumbrüche automatisch, Sie können umbrochenen Text also direkt einfügen.

Favicons und Icons

Ein Favicon als Data-URI einzubetten, funktioniert in den meisten Browsern, aber eine echte favicon.ico und PNG-Dateien sind für Lesezeichen und Startbildschirme zuverlässiger. Unser Favicon-Generator erstellt das komplette Set.

Ein Logo in der E-Mail-Signatur

Manche E-Mail-Programme blockieren verlinkte Bilder, bis der Leser sie erlaubt, aber auch die Unterstützung für eingebettete Data-URIs ist unterschiedlich. Für Signaturen ist ein kleines, auf Ihrer Website gehostetes PNG meist die zuverlässigste Wahl, und Base64 ist die Rückfallebene für Systeme, die alles in einem HTML-Block verlangen. Halten Sie das Logo in jedem Fall unter wenigen Kilobyte.

Platzhalter und Ladebilder

Eine winzige, unscharfe Version eines Fotos als Base64 kann sofort erscheinen, während das volle Bild lädt. Verkleinern Sie das Bild auf etwa 20 Pixel Breite, kodieren Sie es und nutzen Sie es als Hintergrund hinter dem echten Bild. Das kostet die Seite nur ein paar hundert Bytes.

Bilder in JSON speichern

Manche APIs und Konfigurationsdateien akzeptieren Bilder als Base64-Zeichenfolgen. Nutzen Sie das Snippet „Nur Base64“ und prüfen Sie die Dokumentation auf Größengrenzen. Erhalten Sie solche Daten, fügen Sie sie in den Decoder ein, um Bildtyp und Maße zu bestätigen, bevor Sie sie speichern.

Tests und Prototypen

Wenn Sie einen schnellen Prototyp als einzelne HTML-Datei teilen, sorgen eingebettete kleine Bilder dafür, dass nichts kaputtgeht, wenn die Datei verschoben oder gemailt wird. Für alles, was in Produktion geht, ersetzen Sie große eingebettete Bilder wieder durch normale Dateien, damit Browser sie zwischenspeichern können.

Prüfen, was eine Zeichenfolge enthält

Base64-Text verrät nichts über seinen Inhalt. Die ersten Zeichen deuten oft auf den Typ hin, etwa iVBOR für PNG oder /9j/ für JPEG, aber der Decoder ist der verlässliche Weg. Er liest die echte Dateisignatur, statt der Angabe in der Data-URI zu vertrauen.

Performance-Checkliste

Bevor Sie ein Bild einbetten, stellen Sie drei Fragen: Ist es klein, idealerweise unter wenigen Kilobyte? Wird es nur auf einer Seite genutzt, sodass Caching wenig bringt? Würde eine zusätzliche Anfrage den ersten Seitenaufbau spürbar bremsen? Lautet die Antwort dreimal ja, passt Base64 gut. Sonst liefern Sie eine normale Datei in einem modernen Format wie WebP aus, setzen Breite und Höhe und lassen den Browser sie für jede Seite zwischenspeichern, die sie nutzt. So bleibt Ihr HTML schlank und Ihre Seiten schnell.

Hin und zurück umwandeln

Ein Bild zu kodieren und wieder zu dekodieren, liefert exakt dieselben Bytes zurück; Base64 ist verlustfrei. Damit ist der Decoder ein schneller Weg, um zu prüfen, ob eine kopierte Zeichenfolge vollständig ist. Ist das dekodierte Bild abgeschnitten oder wird nicht angezeigt, ging beim Kopieren ein Teil des Texts verloren – oft am Ende, wo die Padding-Zeichen stehen. Kopieren Sie ihn erneut aus der Quelle und dekodieren Sie noch einmal. Das Tool bestätigt, wenn er vollständig ist.