PNG zu Base64 Encoder

PNG zu Base64 verwandelt eine PNG-Datei in einen kopierfertigen Textstring (einen Data-URI), und zwar komplett auf Ihrem Gerät, ganz ohne Upload. Entwickler greifen dazu, wenn sie ein kleines Icon, Logo oder Sprite direkt in ein HTML-img-src, eine CSS-background-image: url()-Regel, ein JSON- oder API-Payload oder eine HTML-E-Mail einbetten wollen, damit das Bild ohne separate HTTP-Anfrage und ohne externes Hosting erscheint. Da die PNG, die Sie kodieren, meist ein internes Logo, ein App-Screenshot oder ein noch nicht veröffentlichtes Produkt-Icon ist, ist es genau das Risiko, das dieses Tool ausschaltet, sie nur für einen Textstring an den Server eines Fremden zu schicken.

Was diese Umwandlung wirklich macht (und was NICHT)

Base64-Kodierung ist zu 100% verlustfrei. Sie komprimiert oder rendert das Bild nicht neu, sondern liest die rohen PNG-Bytes und drückt sie als ASCII-Text neu aus, sodass nach dem Dekodieren jedes Pixel, jeder Farbkanal und der gesamte Alpha-Kanal (Transparenz) Byte für Byte identisch sind. Das ist der entscheidende Unterschied zu einer Pixel-Umwandlung wie PNG zu JPG, die Transparenz auf eine deckende Hintergrundfarbe legt. PNG zu Base64 erhält Transparenz perfekt, weil der Alpha-Kanal einfach Teil der kodierten Dateidaten ist.

Die eine widersinnige Tatsache: die Ausgabe ist größer als die Quelle, nicht kleiner. Base64 bildet je 3 Bytes (24 Bit) auf 4 ASCII-Zeichen ab und verbraucht 8 Bit, um 6 Bit Nutzlast zu tragen, was den Text um rund 33% aufbläht. Ein 9KB-Icon wird zu etwa 12KB Text, ein 30KB-Logo landet bei rund 40KB. Die Farbtiefe und Bittiefe des Bildes (8-Bit, 24-Bit Truecolor oder eine indizierte Palette) bleiben völlig unberührt, denn Base64 rührt das Farbmodell nie an, es kodiert nur die vorhandenen Bytes neu. Der Encoder erzeugt einen korrekten dreiteiligen Data-URI: das data:-Schema, den MIME-Typ image/png und die ;base64,-Markierung vor der Nutzlast, zum Beispiel data:image/png;base64,iVBORw0KGgo.... Was es NICHT tut, ist Ihre Datei verkleinern, sie cachen oder ihr Format ändern, es macht die Bytes nur sicher zum Einfügen in Text.

Wann PNG zu Base64 statt der Alternative

Verwenden Sie einen Base64-Data-URI für kleine Assets unter etwa 10KB (Icons, Logos, Sprites, Ein-Pixel-Hintergründe). Unter dieser Schwelle ist der 33%ige Text-Zuwachs günstiger als ein vollständiger HTTP-Roundtrip (DNS, TCP, TLS und Request-Header), also ist das Inlining unterm Strich ein Gewinn. Über etwa 10 bis 20KB lädt eine normale, gecachte .png-Datei meist schneller, denn ein inline eingebettetes Base64-Bild kann der Browser nicht separat cachen und lädt es mit jeder HTML- oder CSS-Datei neu, die es enthält, was das Seitengewicht erhöht, wenn das Bild groß ist oder über mehrere Seiten wiederverwendet wird. Wenn Sie stattdessen eine fotografische PNG fürs Web verkleinern statt einbetten wollen, nehmen Sie den verlustbehafteten Weg über PNG zu JPG. Bleiben Sie bei PNG zu Base64, wenn Transparenz und exakte Wiedergabetreue zählen und das Asset wirklich klein ist.

So wandeln Sie um

1. Legen Sie die PNG in den Encoder (sie wird lokal in Ihrem Browser gelesen, nie hochgeladen).
2. Die Datei wird auf Ihrem Gerät in einen Base64-Data-URI kodiert, samt data:image/png;base64,-Präfix.
3. Kopieren Sie den Data-URI-String oder laden Sie ihn als .txt-Datei herunter; rechnen Sie mit rund 33% mehr Größe gegenüber der Quelle, da Data-URIs direkt als Text in HTML und CSS eingebettet werden.

Kein Upload. Es läuft auf Ihrem Gerät.

Die Kodierung läuft in Rust, das zu WebAssembly kompiliert ist und in Ihrem Browser-Tab ausgeführt wird. Ihre PNG wird lokal in den Speicher gelesen, kodiert und als Text zurückgegeben, mit null Netzwerkanfragen für die Datei selbst. Nach einmaligem Laden der Seite funktioniert es vollständig offline, es gibt nichts zu löschen, weil nie etwas hochgeladen wurde, und Sie können es selbst prüfen, indem Sie den Network-Tab der DevTools öffnen und beim Kodieren auf das Fehlen jeglichen Datei-Uploads achten. Das zählt hier besonders, weil die PNGs, die Entwickler in Base64 kodieren, typischerweise interne Markenlogos, App-Screenshots und Kunden-Assets sind, die niemals auf einem fremden Server liegen sollten. Ein serverbasierter Encoder kann das nicht behaupten, denn seine Architektur verlangt, dass der Upload zuerst passiert.

Keine Limits

Kodieren Sie so viele PNGs, wie Sie wollen, in einem einzigen Batch, ohne Limit für die Dateianzahl und ohne an Upload-Grenzen gebundenes Größenlimit. Kein Wasserzeichen, keine Anmeldung, keine Werbung, keine abgeschnittene Ausgabe.

Häufig gestellte Fragen

Verliert eine PNG beim Umwandeln in Base64 Qualität oder Transparenz?

Nein. Base64 ist eine verlustfreie Text-Kodierung der rohen Dateibytes, keine Neukompression, sodass jedes Pixel und der gesamte Alpha-Kanal (Transparenz) Byte für Byte identisch zurück dekodieren. Anders als PNG zu JPG, das Transparenz auf eine deckende Farbe legt, erhält PNG zu Base64 sie vollständig.

Warum ist mein Base64-String größer als die ursprüngliche PNG-Datei?

Base64 stellt je 3 binäre Bytes mit 4 ASCII-Zeichen dar, was etwa 33% an Größe hinzufügt. Ein 9KB-Icon wird zu rund 12KB Text, das Wachstum ist also zu erwarten und der unvermeidliche Preis dafür, Binärdaten in sicheren, einfügbaren Text zu verwandeln.

Wie verwende ich einen PNG-Base64-Data-URI in HTML und CSS?

In HTML fügen Sie den vollständigen Data-URI als Wert einer Bildquelle ein, zum Beispiel <img src="data:image/png;base64,iVBORw0KGgo...">. In CSS nutzen Sie ihn innerhalb einer Hintergrund-Deklaration, zum Beispiel background-image: url("data:image/png;base64,iVBORw0KGgo...").

Was bedeutet das Präfix data:image/png;base64,?

Es ist der dreiteilige Kopf eines Data-URI: data: ist das Schema, image/png ist der MIME-Typ, der dem Browser sagt, wie er die Nutzlast interpretieren soll, und ;base64, signalisiert, dass der Text danach Base64-kodiert ist. Ohne dieses Präfix rendert der Browser den String nicht als Bild.

Werden meine Bilder beim Umwandeln hier auf einen Server hochgeladen?

Nein. Die PNG wird vollständig in Ihrem Browser mit zu WebAssembly kompiliertem Rust gelesen und kodiert, mit null Netzwerkanfragen für die Datei. Sie können das bestätigen, indem Sie beim Kodieren den Network-Tab der DevTools beobachten.

Kann ich eine PNG offline oder ohne Internet in Base64 umwandeln?

Ja. Sobald die Seite geladen ist, läuft der WebAssembly-Encoder lokal, Sie können also die Internetverbindung trennen und es funktioniert weiter. Nichts verlässt Ihr Gerät, deshalb arbeitet es online wie offline gleich.

Wann sollte ich einen Base64-Data-URI statt einer normalen PNG-Datei verwenden?

Nehmen Sie Base64 für kleine Assets unter etwa 10KB, wo das Inlining den Overhead eines separaten HTTP-Roundtrips vermeidet. Für größere oder wiederverwendete Bilder lädt eine normale, gecachte .png meist schneller, weil inline eingebettetes Base64 nicht eigenständig gecacht werden kann und mit jeder Datei neu geladen wird, die es einbettet.

Warum beginnen alle Base64-kodierten PNGs mit iVBORw0KGgo?

Jede PNG-Datei beginnt mit denselben Signatur-Bytes (89 50 4E 47 und dem folgenden Header), und das Base64-Kodieren dieser führenden Bytes ergibt stets die Zeichen iVBORw0KGgo. Dieses Präfix zu sehen ist eine schnelle Möglichkeit zu bestätigen, dass ein Data-URI wirklich eine PNG enthält.

Kann ich eine Base64-PNG in eine HTML-E-Mail einbetten?

Ja, denn Base64 ist der sichere Weg, ein Bild in nur-textbasierte Formate wie HTML, CSS, JSON und XML zu setzen, wo rohe Binärbytes die Syntax beschädigen würden. Halten Sie das Asset klein, da der 33%ige Größenzuwachs und das fehlende separate Caching jeder Nachricht Gewicht hinzufügen, die es trägt.

Kann ich mehrere PNG-Dateien auf einmal in Base64 umwandeln?

Ja, Sie können mehrere PNGs in einem Durchgang als Batch kodieren, ohne Limit für Dateianzahl oder Größe. Jede wird unabhängig und lokal kodiert, sodass ein Ordner voller Icons oder Logos gemeinsam verarbeitet werden kann, ohne dass eine davon ein Netzwerk berührt.

Verwandte Tools: Wandeln Sie Pixel mit PNG zu JPG um, nutzen Sie die Gegenrichtung mit JPG zu PNG oder durchstöbern Sie den gesamten Bild-Tools-Bereich.