Base64 Encode/Decode

PNG-zu-Base64 Konverter: Kodiere PNG-Bilder online

Konvertiere PNG-Bilder in Base64-Strings mit erhaltener Transparenz. Ausgabe als Data URI, CSS Background oder reines Base64. 100% clientseitig, kein Upload.

100% clientseitig. Deine Daten verlassen niemals deinen Browser.

🖼️

eine PNG-Datei hierher ziehen & ablegen

oder klicke zum Durchsuchen (max. 50 MB)

Verwandte Werkzeuge

PNG in Base64 konvertieren

PNG (Portable Network Graphics) ist das Standardformat für Bilder, die Transparenz oder verlustfreie Kompression benötigen: Symbole, Logos, UI-Elemente, Screenshots und Grafiken mit Text. Dieses Tool kodiert PNG-Dateien in Base64-Strings, die sich zur Einbettung in HTML, CSS oder API-Payloads eignen.

Wie man es verwendet

  1. Ziehe eine PNG-Datei in den Upload-Bereich oder klicke zum Durchsuchen
  2. Das Bild wird lokal gelesen und in Base64 kodiert
  3. Wähle dein Ausgabeformat: reines Base64, Data URI oder CSS Background
  4. Kopiere das Ergebnis

Warum PNG für Base64-Einbettung

Transparenz

PNG unterstützt vollständige Alphakanal-Transparenz. Wenn du ein Logo oder Symbol als Base64-Data-URI einbettest, bleibt die Transparenz erhalten. JPEG unterstützt keine Transparenz.

Verlustfreie Qualität

Screenshots, Diagramme und Bilder mit scharfen Textkanten sehen in PNG besser aus als in JPEG, da die verlustfreie Kompression von PNG jedes Pixel erhält.

Kleine Grafiken

PNG mit Palettenoptimierung kann sehr kleine Dateien für einfache Grafiken erzeugen. Ein 16x16 Favicon kann als PNG nur 400 Bytes groß sein.

PNG-Dateigröße und Base64-Ausgabe

BildtypTypische PNG-GrößeBase64-Ausgabe
Symbol 16x160,3-1 KB0,4-1,3 KB
Favicon 32x321-3 KB1,3-4 KB
Logo 200x2005-30 KB6,7-40 KB
Screenshot 1920x1080500 KB-3 MB667 KB-4 MB

Für Symbole und Favicons ist die Einbettung als Base64 fast immer die richtige Wahl.

Vor der Kodierung optimieren

Optimiere dein PNG vor der Base64-Kodierung mit einem Optimierer (pngquant, optipng oder tinypng). Ein gut optimiertes PNG kann 50-80% kleiner sein als das Original.

PNG Base64 in CSS-Sprites

.icon-home {
  background-image: url(data:image/png;base64,iVBOR...);
  width: 16px;
  height: 16px;
}
.icon-settings {
  background-image: url(data:image/png;base64,iVBOR...);
  width: 16px;
  height: 16px;
}