Bild-in-Base64-Konverter

Was ist ein Base64-Bild (Data-URI)?

<!-- The same 1×1 transparent PNG, four ways -->

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="pixel">

/* CSS */
.badge {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==");
}

<!-- Markdown -->
![pixel](data:image/png;base64,iVBORw0KGgo…)

// JSON
{ "mime": "image/png", "data": "iVBORw0KGgo…" }

Hauptfunktionen

Beispiele

transparent-1x1.png  (ein 68-Byte-PNG)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

icon.svg

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…" alt="icon">

photo.jpg  (12 KB)

![photo](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ…)

So wandeln Sie ein Bild in Base64 um

1. 1

   Bild hinzufügen

   Ziehen Sie ein Bild auf die Ablagezone, klicken Sie zum Durchsuchen, oder fügen Sie es aus der Zwischenablage mit Strg+V / Cmd+V ein. PNG, JPG, GIF, WebP, SVG, ICO und BMP werden alle unterstützt und vollständig in Ihrem Browser kodiert.

2. 2

   Ausgabeformat wählen

   Wählen Sie Data-URI, rohes Base64, HTML-, CSS-Hintergrund, Markdown oder JSON aus den Tabs. Prüfen Sie die Metadatenleiste auf die Größenzunahme und das Hinweis-Badge darauf, ob sich Inlining lohnt.

3. 3

   Kopieren oder herunterladen

   Klicken Sie auf „Kopieren“, um das Snippet zu übernehmen, oder auf „Herunterladen“, um es als Datei zu speichern. Um den Vorgang umzukehren, wechseln Sie zum Base64-→-Bild-Tab, fügen eine Zeichenkette ein und laden das rekonstruierte Bild herunter.

Häufige Stolperfallen

data:base64,iVBORw0KGgo…
<!-- no MIME type — will not render -->

data:image/png;base64,iVBORw0KGgo…
<!-- correct: image/png -->

data:image/png;base64,iVBORw0KGgoAAAANS
UhEUgAAAAEAAAABCAYAAAA…
<!-- embedded newline breaks the attribute -->

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAA…
<!-- single unbroken line -->

…WjR9awAAAABJRU5ErkJggg
<!-- missing trailing == -->

…WjR9awAAAABJRU5ErkJggg==
<!-- complete with padding -->

/* 380 KB hero photo inlined into a global stylesheet */
.hero { background-image: url("data:image/jpeg;base64,/9j/…(½ MB of text)…"); }

/* Serve it as a cached file instead */
.hero { background-image: url("/img/hero.jpg"); }

Häufige Anwendungsfälle

Ein Logo oder Icon in CSS einbetten

Legen Sie ein kleines PNG- oder SVG-Icon ab, kopieren Sie das CSS-background-image-Snippet und fügen Sie es in Ihr Stylesheet ein, um eine HTTP-Anfrage für ein selten veränderliches Asset zu vermeiden. Halten Sie es unter ca. 2 KB (achten Sie auf das grüne Badge), damit das Stylesheet schlank bleibt.

Bilder in HTML-E-Mails einbetten

E-Mail-Clients blockieren häufig entfernte Bilder. Kodieren Sie Ihr Logo als Data-URI und fügen Sie das -Element in die Vorlage ein, sodass es ohne Server-Abruf gerendert wird. Testen Sie über Clients hinweg — beschränken Sie Einbettungen auf kleine Icons, nicht auf Fotos.

Eigenständige Markdown-Dateien und READMEs

Wenn Sie ein Bild nicht hosten können — ein GitHub-Issue, ein Notebook, ein Offline-Dokument —, bettet die Markdown-Ausgabe das Bild direkt in die Datei ein, sodass es mit dem Text reist. Ideal für kleine Diagramme und Badges.

Bilder in JSON- oder API-Nutzlasten

Müssen Sie ein Thumbnail in einem JSON-Dokument oder einer Konfigurationsdatei ausliefern? Die JSON-Ausgabe liefert Ihnen ein { mime, data }-Objekt, das Sie direkt einfügen können, und der Dekodierer stellt das Bild am anderen Ende wieder her.

Schnelles Data-URI-Debugging

Einen rätselhaften data:-URI in einem Stylesheet oder einer API-Antwort gefunden? Fügen Sie ihn in den Base64-→-Bild-Tab ein, um zu sehen, was er wirklich ist, seine echten Abmessungen zu lesen und ihn als normale Datei zur genaueren Untersuchung herunterzuladen.

Single-File-Widgets und Bookmarklets

Bookmarklets und einbettbare Widgets müssen eigenständig und ohne externe Abhängigkeiten sein. Das Inlining ihrer Icons als Base64 hält alles in einer Datei, die funktioniert, egal wo sie abgelegt wird.

Technische Details

Wie die Base64-Kodierung funktioniert

Base64 nimmt den Binärstrom des Bildes drei Bytes (24 Bit) auf einmal und teilt ihn in vier 6-Bit-Gruppen auf, die jeweils einem Zeichen im 64-Symbol-Alphabet zugeordnet werden. Wenn die Eingabelänge kein Vielfaches von drei ist, markieren ein oder zwei =-Padding-Zeichen den Rest. Dieses 3-zu-4-Verhältnis ist der Grund, warum der kodierte Text etwa 33 % größer ist als die Quelle. Das Tool berechnet die dekodierte Byte-Länge direkt aus der Zeichenkettenlänge und dem Padding, sodass die gemeldeten Größenangaben exakt und nicht geschätzt sind.

MIME-Erkennung und Magic Bytes

Wenn Sie eine Datei kodieren, stammt ihr MIME-Typ aus dem File-Objekt des Browsers. Wenn Sie eine rohe Base64-Zeichenkette ohne data:-Präfix dekodieren, untersucht das Tool die führenden Zeichen, die den Magic Bytes des Bildes entsprechen: iVBORw0KGgo für PNG, /9j/ für JPEG, R0lGOD für GIF, UklGR für WebP sowie PHN2Zy oder PD94bWw für SVG. Dadurch kann der Dekodierer einen korrekten Data-URI rekonstruieren und mit der richtigen Dateiendung herunterladen, selbst wenn die Eingabe nur die nackte Nutzlast ist.

Verarbeitung ausschließlich lokal

Die Kodierung nutzt readAsDataURL der FileReader-API, das einen vollständig im Browser synthetisierten Data-URI zurückgibt. Das Dekodieren zum Herunterladen verwendet atob plus ein Uint8Array, um das Binärformat wiederaufzubauen, dann ein Blob und eine Object-URL — ebenfalls ohne Netzwerkbeteiligung. Das Ergebnis ist ein Tool, das Sie offline ausführen und dem Sie vertrauliche Bilder anvertrauen können, weil die Bytes die Seite nie verlassen. Das Null-Anfragen-Verhalten können Sie in den Entwicklertools Ihres Browsers überprüfen.

Best Practices

Nur kleine, stabile Assets inline einbetten

Der Sweet Spot für Base64 sind Assets unter ca. 2 KB, die sich selten ändern und auf wenigen Seiten erscheinen — Icons, winzige Logos, UI-Sprites. Über ca. 10 KB überwiegen der Größenaufschlag und der verlorene Cache die eingesparte Anfrage, zumal HTTP/2 zusätzliche Anfragen jetzt günstig macht. Lassen Sie sich vom Hinweis-Badge leiten und liefern Sie Fotos und große Grafiken als gewöhnliche zwischengespeicherte Dateien aus.

URL-Kodierung für SVG bevorzugen

SVG ist Text, sodass Base64 es ohne Gewinn aufbläht. Beim Inlining von SVG in CSS oder HTML kodieren Sie das Markup stattdessen per URL — es ist meist kleiner, bleibt menschenlesbar und komprimiert besser mit gzip/brotli. Reservieren Sie Base64-SVG für Pipelines, die es ausdrücklich erfordern. Unser URL-Kodierer/-Dekodierer übernimmt die Prozentkodierung.

Immer den korrekten MIME-Typ setzen

Ein Data-URI wird nur gerendert, wenn sein MIME-Typ zum Inhalt passt: image/png, image/jpeg, image/gif, image/webp, image/svg+xml. Ein falscher oder fehlender Typ ist der häufigste Grund, warum ein eingebettetes Bild nicht angezeigt wird. Wenn Sie aus diesem Tool kopieren, wird der Typ für Sie gesetzt; wenn Sie URIs von Hand zusammensetzen, prüfen Sie das Präfix doppelt.

Vor dem Kodieren komprimieren

Da Base64 ca. 33 % auf die Dateigröße aufschlägt, zahlt sich das Verkleinern der Quelle zuerst doppelt aus. Schicken Sie Bilder durch unseren Bildkomprimierer — oder exportieren Sie sie in den richtigen Abmessungen — vor dem Kodieren, damit der resultierende Data-URI so klein wie möglich ist. Ein 4 KB komprimiertes PNG schlägt ein 40 KB großes Original sowohl als Datei als auch inline.

Niemals auf Base64 für Datenschutz vertrauen

Base64 ist trivial umkehrbar und bietet keinen Schutz. Verwenden Sie es nicht, um sensiblen Bildinhalt zu verschleiern — jeder kann es sofort dekodieren, auch mit dem Tab auf dieser Seite. Wenn Inhalte geschützt werden müssen, nutzen Sie echte Zugriffskontrollen und Verschlüsselung auf dem Server und liefern Sie das Bild über einen authentifizierten Endpunkt aus.

Häufig gestellte Fragen

Was macht dieser Bild-in-Base64-Konverter?

Er liest ein Bild, das Sie ablegen, einfügen oder auswählen, und kodiert dessen Bytes als Base64-Zeichenkette — vollständig in Ihrem Browser. Sie erhalten das rohe Base64, einen gebrauchsfertigen Data-URI (data:image/png;base64,…) sowie Copy-and-paste-Snippets für HTML-, CSS-background-image, Markdown und JSON. Eine Metadatenleiste zeigt die Originaldateigröße, die kodierte Größe, die exakte prozentuale Zunahme (Base64 ist etwa 33 % größer), die Pixelabmessungen und den MIME-Typ an. Es wird nichts hochgeladen: Die Kodierung läuft lokal über die FileReader-API, sodass dasselbe Tool für Screenshots, interne Assets und unveröffentlichte Grafiken sicher ist. Für die Gegenrichtung nutzen Sie den Base64-→-Bild-Tab oder unseren Base64-in-Bild-Dekodierer.

Werden meine Bilder auf einen Server hochgeladen?

Nein. Jeder Schritt erfolgt clientseitig in Ihrem Browser über die FileReader-API und JavaScript-String-Kodierung. Ihr Bild wird niemals übertragen, niemals gespeichert und niemals protokolliert. Sie können dies überprüfen, indem Sie den Netzwerk-Tab Ihres Browsers öffnen — das Kodieren eines Bildes löst null Netzwerkanfragen aus. Das macht das Tool sicher für sensibles Material: Produkt-Screenshots vor dem Launch, interne Diagramme, Kunden-Assets und alles unter NDA. Es gibt keine durch ein Upload-Limit auferlegte Dateigrößenbeschränkung, sondern nur die praktische Grenze, wie groß eine Base64-Zeichenkette Ihr Browser und das Zielsystem bequem verarbeiten können.

Wie viel größer macht Base64 ein Bild?

Base64 kodiert jeweils 3 Bytes Binärdaten als 4 ASCII-Zeichen, sodass die kodierte Zeichenkette etwa 33 % größer ist als die Originaldatei (zuzüglich einiger Padding-Bytes und des data:-Präfixes). Aus einem 9-KB-PNG werden etwa 12 KB Text. Dieser Overhead ist der wichtigste Grund, große Bilder nicht in Base64 zu kodieren: Sie übertragen mehr Bytes, und da die Zeichenkette in Ihr HTML oder CSS eingebettet ist, werden diese Bytes bei jeder Änderung der enthaltenden Datei erneut heruntergeladen und können nicht unabhängig zwischengespeichert werden. Das Tool zeigt für Ihre konkrete Datei die exakte Zunahme in der Metadatenleiste an, sodass Sie die Entscheidung mit echten Zahlen treffen können.

Wann sollte ich ein Base64-Bild statt einer normalen Datei verwenden?

Base64 (als Data-URI) eignet sich gut für kleine, selten veränderte Assets, bei denen das Vermeiden einer separaten HTTP-Anfrage wichtiger ist als Caching: winzige Icons und Logos, die in CSS eingebettet sind, Bilder in HTML-E-Mails (viele Clients blockieren externe Bilder, rendern aber Data-URIs), eigenständige Single-File-Widgets oder Bookmarklets, SVG-Sprites sowie Bilder, die in JSON-/API-Nutzlasten gespeichert sind. Eine praktische Faustregel: Unter etwa 2 KB und auf ein oder zwei Seiten verwendet, gewinnt das Inlining meist. Das Hinweis-Badge in diesem Tool kodiert genau diese Heuristik — grün unter 2 KB, gelb bis 10 KB, rot darüber.

Wann sollte ich Base64-Bilder NICHT verwenden?

Vermeiden Sie Base64 für alles Große oder seitenübergreifend Wiederverwendete. Vier konkrete Gründe: (1) Die Größenzunahme von ca. 33 % bedeutet mehr Bytes über die Leitung; (2) ein eingebettetes Bild kann nicht für sich allein zwischengespeichert werden — es wird bei jeder Änderung des enthaltenden HTML oder CSS erneut heruntergeladen und auf jeder einbettenden Seite wiederholt; (3) das Dekodieren eines großen Data-URI kostet CPU und Akku, was auf Mobilgeräten spürbar ist; und (4) Sie verlieren responsive Bilder (srcset/sizes) und Lazy-Loading. Da HTTP/2 viele kleine Anfragen günstig multiplext, gilt der ursprüngliche Grund fürs Inlining — die Reduzierung der Anfragenzahl — kaum noch. Bei Fotos, Hero-Bildern oder allem über ca. 10 KB lädt eine normale, zwischengespeicherte Datei fast immer schneller. Wenn das Ziel eine kleinere Datei ist, schicken Sie sie zuerst durch unseren Bildkomprimierer.

Wie verwende ich die Base64-Ausgabe in HTML und CSS?

Für HTML wechseln Sie zum HTML-Tab und fügen das erzeugte Element ein: . Für CSS nutzen Sie den CSS-Tab, der den Data-URI in background-image: url("data:image/png;base64,…") einbettet. Beides funktioniert überall dort, wo eine URL akzeptiert wird — img-src, CSS-background, mask-image, sogar Favicon-Link-Tags. Das data:-Schema wird von jedem modernen Browser unterstützt. Ein Vorbehalt: Sehr lange Data-URIs im Inline-HTML können die Lesbarkeit beeinträchtigen und in CSS das Stylesheet aufblähen, das an jeden Besucher ausgeliefert wird — reservieren Sie das Inlining daher für wirklich kleine Assets.

Welche Bildformate werden unterstützt?

PNG, JPEG/JPG, GIF (auch animiert), WebP, SVG, ICO und BMP werden alle unterstützt, ebenso AVIF, sofern der Browser es dekodieren kann. Da das Tool die rohen Bytes kodiert, statt das Bild neu zu rendern, bleiben animierte GIFs animiert, transparente PNGs behalten ihren Alphakanal und SVGs bleiben vollständig skalierbar. Der MIME-Typ wird aus der Datei selbst gelesen und, wenn Sie rohes Base64 in den Dekodierer einfügen, aus den Magic Bytes der Daten abgeleitet. Während der Kodierung findet keine Formatkonvertierung statt — die Ausgabe repräsentiert exakt die von Ihnen bereitgestellte Datei.

Warum ist SVG ein Sonderfall?

SVG ist XML-Text, kein Binärformat, sodass Base64 es ohne Nutzen tatsächlich größer und schwerer lesbar macht. Zum Inlining von SVG in CSS oder HTML ist die URL-Kodierung des Markups (Prozentkodierung einer Handvoll Zeichen wie #, <, > und Anführungszeichen) meist kleiner als Base64 und hält den Quelltext lesbar und gzip-freundlich. Dieses Tool bietet weiterhin Base64-SVG-Ausgabe, weil manche Pipelines sie erfordern, doch wenn Sie CSS von Hand optimieren, bevorzugen Sie einen URL-kodierten Data-URI. Unser URL-Kodierer/-Dekodierer hilft bei diesem Ansatz.

Ist Base64 dasselbe wie Verschlüsselung?

Nein. Base64 ist eine Kodierung, keine Verschlüsselung — es ist von jedem ohne Schlüssel vollständig umkehrbar. Es existiert, um Binärdaten mit einem sicheren Satz druckbarer ASCII-Zeichen darzustellen, sodass die Daten den Transport durch Systeme überstehen, die nur Text verarbeiten (HTML, JSON, E-Mail-Header, URLs). Jeder kann eine Base64-Zeichenkette in Sekunden zurück in das Originalbild dekodieren, auch mit dem Base64-→-Bild-Tab hier. Behandeln Sie Base64 niemals als Methode, um sensiblen Bildinhalt zu verbergen oder zu schützen; es bietet keinerlei Vertraulichkeit.

Kann ich ein Base64-Bild in eine E-Mail einbetten?

Ja, und das ist eine der besseren Anwendungen dieser Technik. Viele E-Mail-Clients blockieren extern gehostete Bilder standardmäßig aus Datenschutzgründen, was Layouts zerstört, die auf entfernte Logos angewiesen sind. Das Einbetten kleiner Bilder als Data-URIs stellt sicher, dass sie ohne Server-Abruf sofort gerendert werden. Die Kompromisse: Einige ältere Clients (insbesondere bestimmte Outlook-Versionen) unterstützen Data-URIs nur lückenhaft, und große Einbettungen blähen die Nachrichtengröße auf, die jeder Empfänger herunterlädt. Halten Sie eingebettete Bilder klein — Logos und Icons, keine Fotografien — und testen Sie über Ihre Zielclients hinweg.

Warum wird mein Base64-Bild nicht angezeigt?

Die häufigsten Ursachen: ein fehlender oder falscher MIME-Typ im data:-Präfix (verwenden Sie image/png für PNG, image/jpeg für JPG, image/svg+xml für SVG), versehentlich in die Zeichenkette eingefügte Leerzeichen oder Zeilenumbrüche, eine abgeschnittene Kopie, die das abschließende Padding (= oder ==) verloren hat, oder das Einfügen nur des rohen Base64 ohne das data:…;base64,-Präfix, wo eine URL erwartet wird. Der Dekodierer in diesem Tool ist tolerant — er entfernt Leerraum, akzeptiert Eingaben mit oder ohne Präfix und leitet den MIME-Typ aus den Magic Bytes des Bildes ab —, sodass das Einfügen Ihrer Zeichenkette in den Base64-→-Bild-Tab der schnellste Weg ist, um zu bestätigen, ob die Daten selbst gültig sind.