Anleitung
- Legen Sie ein PNG auf dem Ablagebereich ab, klicken Sie darauf, um eine Datei auszuwählen, oder fügen Sie einen Screenshot aus der Zwischenablage ein.
- Belassen Sie „Konvertieren in“ auf „Original beibehalten“, um die ursprünglichen PNG-Bytes zu kodieren, oder verkleinern Sie ein großes Bild über „Max. Breite“.
- Vergleichen Sie die Originalgröße mit der kodierten Größe, die für das Bild angezeigt wird.
- Kopieren oder laden Sie die Ausgabe als Data-URI, reines Base64, img-Tag, CSS oder Markdown herunter.
PNG und Base64
PNG (Portable Network Graphics, MIME-Typ image/png) ist ein verlustfreies Rasterformat mit vollständigem Alphakanal und daher die übliche Wahl für Icons, Logos, Diagramme und Screenshots. Jede PNG-Datei beginnt mit derselben 8-Byte-Signatur, deshalb beginnt auch jede PNG-Data-URI gleich: data:image/png;base64,iVBORw0KGgo....
Base64 verändert die Pixel nicht. Beim Dekodieren des Strings erhalten Sie eine Datei zurück, die Byte für Byte identisch ist, mit denselben Farben und denselben transparenten Bereichen.
Sinnvolle Einsatzzwecke für PNG-Data-URIs
- Kleine Oberflächen-Icons und Logos, die einen transparenten Hintergrund benötigen.
- Screenshots in eigenständigen HTML-Berichten, Fehlerberichten oder exportierter Dokumentation.
- Diagramme und QR-Codes, die auf einem Server erzeugt und in einer JSON-Antwort zurückgegeben werden.
- Bilder, die mit
canvas.toDataURL()erstellt werden, das standardmäßig ohnehin PNG-Data-URIs erzeugt.
Bei Fotos sieht es anders aus. PNG speichert sie verlustfrei, und die Dateien werden groß; mit JPEG oder WebP erhalten Sie einen deutlich kürzeren String.
PNG vor der Kodierung verkleinern
Jedes Byte, das Sie aus dem PNG entfernen, spart etwa 1,33 Base64-Zeichen. Optimieren Sie die Datei vorher mit einem Tool wie oxipng oder zopflipng (verlustfrei) oder pngquant (reduziert die Farbpalette). Prüfen Sie auch die Pixelgröße: Ein Icon, das in dreifacher Anzeigegröße exportiert wurde, lässt sich meist über die Option „Max. Breite“ verkleinern.
Die Konvertierung in WebP erhält die Transparenz und ist oft deutlich kleiner. Die Konvertierung in JPEG entfernt die Transparenz, sodass transparente Bereiche einfarbig gefüllt werden. Eine erneute Kodierung als PNG im Browser optimiert die Komprimierung nicht, daher kann das Ergebnis größer sein als ein gut optimiertes Original; vergleichen Sie die Größen, bevor Sie kopieren.
Die Ausgabe verwenden
<img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="Settings">
.icon-settings {
background: url("data:image/png;base64,iVBORw0KGgo...") no-repeat center / 24px 24px;
}
# Kommandozeile: GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.pngHäufig gestellte Fragen
Bleibt die PNG-Transparenz mit Base64 erhalten?
Ja. Base64 kodiert die Dateibytes unverändert, daher bleibt der Alphakanal erhalten. Die Transparenz geht nur verloren, wenn Sie das Bild in JPEG konvertieren.
Warum beginnt jeder PNG-Base64-String mit iVBORw0KGgo?
Diese Zeichen sind die Base64-Form der PNG-Dateisignatur. Beginnt ein String, der angeblich ein PNG ist, anders, handelt es sich um ein anderes Format oder die Daten sind beschädigt.
Kann ich einen Screenshot direkt einfügen?
data:image/png-Ergebnis erhalten.Wie groß darf ein PNG sein, das ich als Base64 einbette?
Als Faustregel gelten wenige Kilobyte, bis etwa 10 KB. Größere Bilder liefern Sie besser als separate Dateien aus, die der Browser zwischenspeichern und parallel laden kann.