Bild in Base64 umwandeln

Privater Bildencoder im Browser

Bilder ohne Upload in Base64 umwandeln

Codieren Sie ein Bild als reinen Base64-String, vollständige Data-URI, HTML-Bildtag oder CSS-Hintergrundwert. Die Verarbeitung erfolgt lokal in Ihrem Browser.

Vier nützliche Ausgaben

Kopieren Sie reines Base64, eine vollständige Daten-URL, ein HTML-Bildelement oder eine sofort nutzbare CSS-Hintergrunddeklaration.

Präzise Größenanalyse

Vergleichen Sie die Quelldatei mit dem codierten Ergebnis und sehen Sie die exakte Base64-Größenzunahme vor dem Einbetten.

Lokal und privat

Ihr Quellbild und die erzeugten Base64-Daten bleiben im Browserspeicher und werden nicht zur Konvertierung hochgeladen.

Bild zum Codieren hochladen

Bild per Drag-and-drop ablegen, aus der Zwischenablage einfügen oder vom Gerät auswählen

PNG, JPG, JPEG, WebP, GIF und SVG Maximale Dateigröße im Browser: 200 MB

Kopieren Sie ein Bild und drücken Sie Strg+V oder Command+V Wird lokal in Ihrem Browser verarbeitet

Ausgewähltes Bild

Dateiname
Dateityp
Abmessungen
Originalgröße
Geschätzte Base64-Größe

Große Datei erkannt

Die Base64-Ausgabe ist ungefähr 33 % größer als die Originaldatei und kann erheblichen Browserspeicher benötigen.

Animierte GIF-Daten bleiben bei der Base64-Codierung erhalten.

SVG ist bereits textbasiert. Direkt eingebettetes SVG-Markup kann für HTML kleiner und flexibler als Base64 sein.

Bild wird codiert

Das Bild wird lokal in Ihrem Browser gelesen und codiert…

Erzeugte Base64-Ausgaben

Bild wurde erfolgreich codiert.

Erzeugte Base64-Ausgaben

Wählen Sie das für Ihr Projekt benötigte Format und kopieren oder laden Sie den erzeugten Text herunter.

Bild wird codiert

Das Bild wird lokal in Ihrem Browser gelesen und codiert…

Übersicht der Codierungsgröße

Quelldatei
Base64-String
Vollständige Data-URI
Größenzunahme
:percent% der Originalgröße

Base64 vergrößert die Daten normalerweise um etwa 33 %, da jeweils drei Quellbytes durch vier Textzeichen dargestellt werden.

Erwägen Sie ein externes Bild

Große Base64-Bilder vergrößern HTML oder CSS, können nicht separat zwischengespeichert werden und die Seitendarstellung verzögern.

Ihr Bild verlässt dieses Gerät nicht

Die Codierung erfolgt mit JavaScript im Browserspeicher. Bild und Ausgabe werden nicht an einen CyberTools-Konvertierungsendpunkt gesendet.

Kein Verlust der Bildqualität

Base64 ist eine umkehrbare Textcodierung. Die ursprünglichen Dateibytes bleiben ohne Größenänderung, erneute Komprimierung oder Qualitätsverlust erhalten.

Base64 gezielt einsetzen

Inline-Base64 eignet sich vor allem für sehr kleine Dateien. Externe Dateien sind bei großen Bildern meist besser, da sie Caching und Lazy Loading unterstützen.

Privater Online-Bildencoder

Bild in Base64: Bilder für die Inline-Webnutzung codieren

Wandeln Sie PNG-, JPG-, JPEG-, WebP-, GIF- oder SVG-Bilder direkt im Browser in Base64-Text um. Das Tool erzeugt einen reinen Base64-String, eine vollständige Data-URI sowie Beispiele für ein HTML-Bild und einen CSS-Hintergrund.

Das Bild wird lokal verarbeitet und nicht auf einen Konvertierungsserver hochgeladen. Prüfen Sie die exakte codierte Größe, vergleichen Sie sie mit der Quelldatei und kopieren Sie nur das Ausgabeformat, das Ihr Projekt benötigt.

Sofort nutzbarer Code

Erzeugen Sie reines Base64, Data-URI, HTML und CSS, ohne Präfixe, MIME-Typen oder Markup manuell zusammenzusetzen.

Größenkosten verstehen

Sehen Sie die genaue Zeichenzahl und prozentuale Zunahme durch die Base64-Codierung, bevor Sie das Ergebnis in eine Webseite einfügen.

Verarbeitung nur im Browser

Private Entwürfe, interne Screenshots und Kundendateien bleiben während der gesamten Konvertierung auf Ihrem Gerät.

Was das Bild-zu-Base64-Tool macht

Der Encoder liest die binären Bytes eines Bildes und stellt sie mit dem Base64-Alphabet dar. Dadurch entsteht ein Textwert, der in HTML, CSS, JSON, XML, E-Mails und anderen textorientierten Formaten übertragen werden kann, ohne die ursprünglichen Binärdaten zu beschädigen.

Es stehen vier Ausgaben zur Verfügung: die reinen Base64-Zeichen, eine vollständige Data-URI mit MIME-Typ, ein HTML-img-Element und ein CSS-background-image-Beispiel. Sie können die benötigte Version kopieren, ohne den Code selbst zusammenzusetzen.

So codieren Sie ein Bild als Base64

Wählen Sie eine PNG-, JPG-, JPEG-, WebP-, GIF- oder SVG-Datei, ziehen Sie sie in den Uploadbereich oder fügen Sie ein Bild aus der Zwischenablage ein. Prüfen Sie Dateiinformationen und Vorschau, schließen Sie bei Bedarf die Überprüfung ab und starten Sie die Codierung.

Vergleichen Sie nach der Umwandlung die ursprüngliche und die codierte Größe. Wählen Sie reines Base64, Data-URI, HTML oder CSS und kopieren Sie die Ausgabe oder laden Sie sie als Textdatei herunter. Setzen Sie das Tool zurück, bevor Sie ein weiteres Bild verarbeiten.

So funktioniert die Base64-Codierung

Binärdateien enthalten Bytewerte von 0 bis 255, darunter Werte, die nicht sicher als sichtbarer Text dargestellt werden können. Base64 gruppiert die Eingabe in Blöcke aus drei Bytes und ordnet jeden Block vier druckbaren ASCII-Zeichen aus einem Alphabet mit 64 Zeichen zu.

Der Vorgang ist deterministisch und verlustfrei. Beim Decodieren des Base64-Strings werden dieselben Quellbytes wiederhergestellt. Wenn die Eingabelänge nicht durch drei teilbar ist, können dem letzten Block Füllzeichen hinzugefügt werden.

Warum Base64 etwa 33 % größer ist

Jeweils drei Bytes der Quelldaten werden zu vier Base64-Zeichen. Dieses Verhältnis von vier zu drei bedeutet, dass der codierte Text normalerweise etwa ein Drittel größer als die Originaldatei ist. Hinzu kommt ein kleiner Unterschied durch Füllzeichen und das Data-URI-Präfix.

Ein Bild mit 30 KB erzeugt ungefähr 40 KB Base64-Zeichen. Diese Zunahme gehört zum Codierungsverfahren und lässt sich nur vermeiden, indem eine andere Darstellung gewählt oder die Quelldatei vorher verkleinert wird.

Base64-Data-URIs verstehen

Ein reiner Base64-String gibt den Dateityp nicht an. Eine Data-URI ergänzt vor den codierten Zeichen das Präfix data:, den MIME-Typ des Bildes und die Kennzeichnung ;base64. Der Browser kann den vollständigen Wert dadurch als eingebettete Bild-URL behandeln.

Data-URIs können im src-Attribut eines HTML-img-Elements, als CSS-background-image-Wert oder in anderen URL-fähigen Kontexten verwendet werden. Die erzeugten Beispiele enthalten den korrekten MIME-Typ der ausgewählten Datei.

Wann eingebettete Base64-Bilder sinnvoll sind

Base64 kann für winzige Oberflächensymbole, Ladeanzeigen, E-Mail-Assets, portable Berichte, Testdaten und eigenständige HTML-Dateien sinnvoll sein. In diesen Fällen kann es nützlich sein, eine separate Bildanfrage zu vermeiden oder alles in einem Dokument zu speichern.

Es eignet sich außerdem, wenn ein Asset innerhalb von JSON oder einer anderen reinen Textnutzlast übertragen werden muss. Build-Tools wie Vite und webpack betten kleine Assets unterhalb eines konfigurierten Größenlimits häufig automatisch ein.

Wann ein externes Bild besser ist

Große Fotos, Hero-Bilder, wiederverwendete Symbole und Medien unterhalb des sichtbaren Bereichs funktionieren meist besser als externe Dateien. Externe Bilder können separat zwischengespeichert, parallel geladen, durch die Auslieferungsinfrastruktur komprimiert und erst bei Bedarf nachgeladen werden.

Ein eingebettetes Base64-Bild wird Teil der HTML- oder CSS-Datei. Es erhöht den Verarbeitungsaufwand, kann nicht separat zwischengespeichert werden und muss bei jeder Änderung des umgebenden Dokuments erneut heruntergeladen werden.

Datenschutz und vertrauliche Bilder

Base64 ist eine Codierung und keine Verschlüsselung. Jeder Empfänger kann die Ausgabe wieder in das Originalbild umwandeln. Ein Base64-String ist daher kein Mittel, um vertrauliche Bildinformationen zu verbergen.

Dieses Tool codiert lokal im Browserspeicher und sendet das Bild nicht an einen CyberTools-Konvertierungsendpunkt. Die lokale Verarbeitung ist für interne Diagramme, Kundendateien, private Screenshots und vertrauliche Dateien besonders nützlich.

Hinweise zu SVG und animierten GIFs

Ein animiertes GIF bleibt animiert, da Base64 jedes Byte einschließlich aller Einzelbilder bewahrt. Wird die erzeugte Data-URI in einem kompatiblen HTML-Bildelement verwendet, verhält sie sich wie das ursprüngliche GIF.

SVG ist bereits ein textbasiertes XML-Format. Direktes Inline-SVG ist oft kleiner und ermöglicht das Gestalten oder Programmieren einzelner Elemente. Base64-codiertes SVG ist vor allem dann sinnvoll, wenn ein URL-Wert benötigt wird, beispielsweise für einen CSS-Hintergrund.

Base64 in modernen Webprojekten verwenden

React, Vue und andere Frameworks können Data-URIs in Bildattributen oder Stilbindungen verwenden. Bei kleinen, einmalig verwendeten Assets ist das praktisch. Größere Bilder sollten meist als Dateien importiert werden, damit das Build-System Dateinamen, Caching und Auslieferung optimieren kann.

Viele Bundler bieten konfigurierbare Inline-Grenzwerte. Assets unterhalb des Grenzwerts werden zu Data-URIs, größere Dateien werden separat ausgegeben. So lassen sich Anfrageaufwand, Base64-Größenzunahme und Caching sinnvoll ausbalancieren.

Vom Encoder erzeugte Ausgaben

Ausgabe	Enthaltener Inhalt
Reiner Base64-String	Nur die codierten Zeichen, ohne MIME-Typ oder Data-URI-Präfix.
Base64-Data-URI	Der vollständige Wert data:[mime-type];base64,[content] zur Verwendung als eingebettete URL.
HTML-Anwendungsbeispiel	Ein img-Element mit der erzeugten Data-URI im src-Attribut.
CSS-Anwendungsbeispiel	Eine background-image-Deklaration mit der erzeugten Data-URI.

Häufige Anwendungen der Bild-zu-Base64-Codierung

Ein kleines Symbol ohne zusätzliche Bildanfrage einbetten
Ein eigenständiges, offline nutzbares HTML-Dokument erstellen
Ein Bild in eine JSON- oder XML-Nutzlast einfügen
Ein Inline-Bild für eine HTML-E-Mail-Vorlage erzeugen
Ein kleines Hintergrundbild direkt in CSS einfügen
Portable Testdaten für Entwicklung und Fehlersuche vorbereiten
Die Ausgabe einer Frontend-Build-Pipeline überprüfen
Binäre Bildbytes durch ein reines Textfeld übertragen

Wann Sie Base64-Bilder vermeiden sollten

Große Fotos oder Hero-Bilder
Bilder, die per Lazy Loading geladen werden sollen
Assets, die auf mehreren Seiten wiederverwendet werden
Dateien, die von unabhängigem Browser-Caching profitieren
Häufig geänderte HTML- oder CSS-Dateien mit großen Bildern
Bilder, die effizient über ein CDN ausgeliefert werden

Spezifikationen des Bild-zu-Base64-Encoders

Eigenschaft	Details
Akzeptierte Formate	PNG, JPG, JPEG, WebP, GIF und SVG
Maximale Dateigröße im Browser	200 MB, abhängig vom verfügbaren Browser- und Gerätespeicher
Eingabemethoden	Dateiauswahl, Drag-and-drop oder Einfügen aus der Zwischenablage
Erzeugte Ausgaben	Reines Base64, vollständige Data-URI, HTML-Beispiel und CSS-Beispiel
Codierungsverhalten	Verlustfreie Byte-zu-Text-Umwandlung ohne Größenänderung oder erneute Komprimierung
Unterstützung animierter GIFs	Animationsbytes bleiben in der codierten Ausgabe erhalten
Erwartete Größenzunahme	Ungefähr 33 %, zuzüglich des kurzen Data-URI-Präfixes
Verarbeitungsort	Lokaler Browserspeicher ohne Bild-Upload zur Konvertierung

Häufige Fragen zu Bild in Base64

Warum ist der Base64-String länger als das Originalbild?

Base64 stellt jeweils drei Quellbytes durch vier Textzeichen dar. Der resultierende String ist deshalb normalerweise etwa 33 % größer. Hinzu kommt ein kleiner Anteil für Füllzeichen und das Data-URI-Präfix.

Verringert Base64-Codierung die Bildqualität?

Nein. Base64 ist verlustfrei und bewahrt die ursprünglichen Dateibytes. Das Bild wird weder skaliert noch neu komprimiert oder qualitativ verändert.

Kann ich eine Base64-Data-URI direkt im Browser öffnen?

Ja. Eine gültige Bild-Data-URI kann in die Adressleiste eingefügt oder als Bildquelle verwendet werden, um das codierte Ergebnis schnell zu überprüfen.

Bleiben animierte GIFs erhalten?

Ja. Jedes Byte der GIF-Datei einschließlich Einzelbildern und Zeitinformationen wird codiert. In Umgebungen mit GIF-Unterstützung bleibt das Ergebnis animiert.

Sollte ich Base64-Bilder in React oder Vue verwenden?

Base64 kann für sehr kleine Assets sinnvoll sein. Größere Bilder sollten meist als Dateien importiert werden, damit Framework oder Bundler Caching, Dateinamen und Auslieferung optimieren können.

Sollten SVG-Bilder als Base64 codiert werden?

Nur wenn ein URL-Wert erforderlich ist. Für HTML ist direktes Inline-SVG oft kleiner und ermöglicht CSS oder JavaScript den Zugriff auf einzelne SVG-Elemente.

Ist Base64 eine sichere Verschlüsselung?

Nein. Base64 ist eine umkehrbare Codierung und bietet keine Vertraulichkeit. Jeder, der den String besitzt, kann das Originalbild rekonstruieren.

Wird mein Bild bei der Konvertierung hochgeladen?

Nein. Das Bild wird lokal durch JavaScript in Ihrem Browser gelesen und codiert und nicht an einen CyberTools-Endpunkt zur Bildkonvertierung gesendet.

Bild in Base64 umwandeln