Bild in Base64 umwandeln
Bild online in Base64 konvertieren
Füge PNG, JPG, WebP, GIF, SVG, AVIF oder BMP hinzu und kopiere das Ergebnis im passenden Format für HTML, CSS, Markdown, JSON, API-Tests oder Dokumentation.
Nutze eine Data-URL, wenn das Bild direkt in HTML, CSS oder Markdown erscheinen soll. Reines Base64 ist richtig, wenn eine API, Datenbank oder ein JSON-Feld nur die kodierte Zeichenkette erwartet. Am sinnvollsten ist Base64 für kleine Bilder, Icons und Testdaten.
Bilder ablegen und Base64 erstellen
Die Kodierung läuft lokal in deinem Browser. Deine ausgewählten Bilder werden für die Umwandlung nicht hochgeladen.
Klicke zum Auswählen oder ziehe Bilddateien hierher. Du kannst mehrere Bilder nacheinander in Base64 umwandeln.
Bild vorher vorbereiten
Weitere Tools
Komprimiere, skaliere oder konvertiere dein Bild, bevor du daraus Base64 erstellst.
So wandelst du ein Bild in Base64 um
Erstelle aus einer Bilddatei reines Base64, eine vollständige Data-URL oder ein Snippet für HTML, CSS, Markdown oder JSON.
Ein oder mehrere Bilder auswählen
Ziehe Dateien in den Konverter oder wähle PNG, JPG, WebP, GIF, SVG, AVIF oder BMP direkt auf deinem Gerät aus.
Im Browser kodieren lassen
Jede Datei wird lokal gelesen und in Base64 umgewandelt. Dafür ist kein Upload auf einen Server nötig.
Das passende Ausgabeformat wählen
Wechsle zwischen reinem Base64, Data-URL, HTML-img, CSS, vollständiger CSS-Klasse, Markdown und JSON.
Ergebnis kopieren und testen
Füge die Ausgabe in HTML, Stylesheets, Markdown-Dateien, API-Anfragen, JSON-Payloads oder Test-Fixtures ein und prüfe sie in der Zielumgebung.
Welche Base64-Ausgabe brauchst du?
Dasselbe Bild kann in mehreren Base64-Formaten erscheinen. Welche Variante passt, hängt davon ab, wo du den Wert einfügst.
Data-URL für Vorschau und src
Beispiel: data:image/png;base64,iVBORw0KGgo... Dieses Format eignet sich für ein HTML-src-Attribut, Markdown-Bilder oder CSS-Regeln, bei denen der MIME-Typ mitgegeben werden muss.
HTML img für eigenständige Seiten
Beispiel: <img src="data:image/png;base64,iVBORw0KGgo..." alt="logo" />. Praktisch für lokale Demos, Bugreports und einzelne HTML-Dateien ohne separaten Bildordner.
CSS für kleine eingebettete Grafiken
Beispiel: background-image: url("data:image/svg+xml;base64,PHN2Zy...");. Sinnvoll für Icons, Platzhalter und portable Prototypen, aber nicht für große Fotos.
JSON oder reines Base64 für APIs
Beispiel: { "imageBase64": "iVBORw0KGgo..." }. Verwende reines Base64, wenn das Zielfeld keinen Präfix wie data:image/...;base64, erwartet.
Warum diesen Bild-zu-Base64-Konverter nutzen?
Beim Einbetten kommt es auf das richtige Format an: reines Base64, Data-URL, HTML/CSS-Snippet oder korrekt maskiertes JSON.
Reines Base64 oder vollständige Data-URL
APIs und Datenbankfelder erwarten oft nur die kodierten Bytes. HTML, CSS und Markdown brauchen meist den Präfix data:image/...;base64,. Du kannst beide Varianten separat kopieren.
Lokale Kodierung ohne Upload
Die Datei wird in deinem Browser verarbeitet. Das ist hilfreich bei internen Screenshots, Kundenentwürfen, privaten UI-Assets und Dateien, die nicht bei einem externen Dienst landen sollen.
JSON ohne manuelles Escaping
Die JSON-Ausgabe eignet sich für Beispiel-Requests, Mock-Antworten, Webhook-Payloads oder Tests, ohne Anführungszeichen, Zeilenumbrüche oder Präfixe von Hand zu korrigieren.
Snippets für den direkten Einbau
Aus derselben Datei bekommst du ein img-Tag, background-image, eine komplette CSS-Klasse, ein Markdown-Bild, reines Base64 oder ein JSON-Objekt.
Mehrere kleine Assets verarbeiten
Ziehe Icons, Logos, Badges, Platzhalter oder Testbilder gesammelt hinein und nimm pro Datei nur das Format, das du wirklich brauchst.
Originaldaten bleiben unverändert
Base64 ist eine Kodierung, keine Komprimierung. Das Tool skaliert nicht, rendert nichts neu und verändert die Bildqualität nicht; die Ausgabe steht für die ursprünglichen Dateibytes.
Typische Einsatzzwecke für Bilder als Base64
Base64 lohnt sich vor allem für klar begrenzte Aufgaben: ein Bild in HTML anzeigen, ein Icon in CSS einbetten, ein Bild per JSON/API senden oder eine fehlerhafte Data-URL prüfen.
Base64-Bild in HTML anzeigen
Nimm die Data-URL oder das HTML-img-Snippet, wenn ein kleines Bild direkt im src-Attribut stehen soll und keine öffentliche Bilddatei verfügbar ist.
Icons und Platzhalter in CSS einbetten
background-image mit Data-URL eignet sich für kleine Symbole, Empty States, Dokumentationsbeispiele oder Prototypen, bei denen relative Bildpfade leicht brechen.
Bilder in JSON oder API-Requests senden
Reines Base64 ist die richtige Wahl, wenn ein Backend-Feld wie imageBase64, avatar, signature oder fileContent erwartet wird. Für Beispiel-Requests ist die JSON-Ausgabe der verlässlichere Startpunkt.
JavaScript-, React- oder PHP-Code prüfen
Erzeuge einen Referenzwert, um deine eigene Kodierung mit FileReader, Canvas, PHP, Python, Java oder C# zu vergleichen und Fehler beim MIME-Typ, Padding oder Einlesen der Datei einzugrenzen.
E-Mail-Templates vorsichtig testen
Base64 kann bei kleinen Inline-Grafiken in Tests helfen. Für produktive Mailings sind gehostete Bild-URLs oft zuverlässiger, weil manche Clients und Filter Data-URLs blockieren oder entfernen.
Kaputte Data-URLs diagnostizieren
Wenn die Vorschau nicht lädt, vergleiche reines Base64 und Data-URL: Fehlt der Präfix, passt der MIME-Typ nicht, wurde die Zeichenkette gekürzt oder sind JSON-Anführungszeichen falsch maskiert?
Wann Base64 hilft und wann nicht
Base64 transportiert Bilddaten als Text. Es ersetzt weder Bildoptimierung noch Hosting, Caching oder Zugriffsschutz.
Eine HTML-Datei soll allein funktionieren
Eine Data-URL sorgt dafür, dass ein kleines Bild ohne separaten Asset-Ordner zusammen mit der Datei funktioniert.
Eine API erwartet Bildtext
Reines Base64 passt, wenn nur kodierte Bytes verlangt werden. Eine Data-URL ist richtig, wenn auch MIME-Typ und Präfix erwartet werden.
Größe vorher prüfen
Base64 macht die Textausgabe in der Regel etwa ein Drittel größer als die Binärdatei. Große Bilder solltest du vor der Kodierung komprimieren oder skalieren.
Privatsphäre richtig einordnen
Die Kodierung läuft lokal, aber die kopierte Zeichenkette bleibt das Bild in Textform. Wer den vollständigen Wert besitzt, kann das Bild wiederherstellen.
Häufige Fehlerquelle
Bei Darstellungsproblemen lohnen sich diese Checks: Präfix data:image/...;base64,, Komma vor den Daten, MIME-Typ, Padding-Zeichen und versehentliche Leerzeichen.
Letzter Praxistest
Füge den Wert in die Zielumgebung ein und prüfe Rendering, Dateigröße, JSON-Gültigkeit und Kompatibilität, bevor du ihn produktiv nutzt.
FAQ zu Bild in Base64
Kurze Antworten zu reinem Base64, Data-URLs, Dateigröße, Datenschutz, HTML/CSS/JSON und typischen Fehlern bei Base64-Bildern.
Soll ich reines Base64 oder eine Data-URL kopieren?
Für HTML, CSS, Markdown oder Browser-Vorschauen brauchst du meist eine Data-URL, weil sie den Präfix data:image/...;base64, enthält. Reines Base64 passt, wenn eine API, Datenbank oder ein Backend nur die kodierte Zeichenkette ohne Präfix verlangt.
Welche Bildformate kann ich in Base64 umwandeln?
Der Konverter akzeptiert gängige Bildformate, die der Browser als Bild erkennt, darunter PNG, JPG/JPEG, WebP, GIF, SVG, AVIF und BMP. Dateien ohne gültigen Bildtyp werden abgelehnt, damit keine irreführende Ausgabe entsteht.
Werden meine Bilder beim Konvertieren hochgeladen?
Nein. Die ausgewählten Dateien werden lokal im Browser mit FileReader gelesen und dort als Base64 bzw. Data-URL ausgegeben. Bei normaler Nutzung werden deine Bilddateien nicht hochgeladen.
Kann ich mehrere Bilder auf einmal konvertieren?
Ja. Du kannst mehrere kleine Bilder hinzufügen und für jede Datei separat reines Base64, Data-URL, HTML, CSS, Markdown oder JSON kopieren.
Macht Base64 mein Bild kleiner?
Nein. Base64 ist Kodierung, keine Komprimierung. Die Textausgabe ist normalerweise etwa ein Drittel größer als die ursprüngliche Binärdatei. Wenn die Größe wichtig ist, nutze zuerst Bild komprimieren oder Bildgröße ändern.
Warum wird mein Base64-Bild nicht angezeigt?
Häufig wurde reines Base64 eingefügt, obwohl eine vollständige Data-URL erwartet wird. Prüfe, ob der Wert mit data:image/...;base64, beginnt, ob das Komma vorhanden ist, der MIME-Typ zum Bild passt, die Zeichenkette vollständig ist und JSON-Anführungszeichen korrekt maskiert sind.
Wann ist Base64 besser als eine normale Bild-URL?
Base64 eignet sich gut für kleine Icons, Logos, Platzhalter, einzelne HTML-Demos, CSS-Snippets, Markdown-Beispiele, API-Tests und Fixtures. Für große Fotos, Banner oder Assets, die auf mehreren Seiten wiederverwendet werden, ist eine normale Bilddatei meist besser, weil sie separat gecacht werden kann.
Kann ich Base64-Bilder in E-Mails verwenden?
Für Tests ja, als Standardlösung nur mit Vorsicht. Manche E-Mail-Clients, Webmailer und Sicherheitsfilter blockieren oder entfernen Base64-Data-URLs. Für produktive E-Mails ist eine gehostete Bild-URL oft verlässlicher.
Schützt Base64 ein sensibles Bild?
Nein. Base64 ist keine Verschlüsselung und kein Zugriffsschutz. Es stellt dieselben Bilddaten nur als Text dar. Füge sensible Dokumente, private Screenshots oder personenbezogene Daten daher nicht unbedacht als Base64 in Tickets, Logs oder öffentliche Felder ein.
Ändert die Umwandlung Qualität, Abmessungen oder Transparenz?
Nein. Die Kodierung verändert die Bildbytes nicht. Sie skaliert nicht, komprimiert nicht und entfernt keine Transparenz. Wenn die Zeichenkette vollständig kopiert wurde, lässt sie sich wieder zur ursprünglichen Bilddatei dekodieren.
Noch ein Bild in Base64 umwandeln
Gehe zurück zum Konverter und erstelle die nächste Ausgabe im passenden Format: reines Base64, Data-URL, HTML, CSS, Markdown oder JSON.