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
- Ziehe eine PNG-Datei in den Upload-Bereich oder klicke zum Durchsuchen
- Das Bild wird lokal gelesen und in Base64 kodiert
- Wähle dein Ausgabeformat: reines Base64, Data URI oder CSS Background
- 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
| Bildtyp | Typische PNG-Größe | Base64-Ausgabe |
|---|---|---|
| Symbol 16x16 | 0,3-1 KB | 0,4-1,3 KB |
| Favicon 32x32 | 1-3 KB | 1,3-4 KB |
| Logo 200x200 | 5-30 KB | 6,7-40 KB |
| Screenshot 1920x1080 | 500 KB-3 MB | 667 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;
}