Anleitung
- Fügen Sie den Base64-String oder die vollständige data:image/png;base64-URI ein.
- Prüfen Sie die Vorschau. Transparente Bereiche erscheinen vor einem Schachbrettmuster.
- Belassen Sie „Herunterladen als“ auf PNG. Handelt es sich bei den Daten um JPEG, WebP oder ein anderes Format, werden sie in Ihrem Browser in PNG konvertiert.
- Laden Sie die .png-Datei herunter.
Woher Base64-PNGs stammen
PNG ist das Format, das Ihnen als Base64 am häufigsten begegnet. Ein Aufruf von canvas.toDataURL() ohne Argumente liefert eine PNG-Data-URI. Werkzeuge zur Browser-Automatisierung geben Screenshots als Base64-PNG zurück, zum Beispiel page.screenshot({ encoding: 'base64' }) in Puppeteer oder get_screenshot_as_base64() in Selenium. Diagramm-Renderer, QR-Code-Generatoren und APIs zur Bildgenerierung liefern das Bild oft als Base64-Feld in JSON.
Ein PNG-String ist leicht zu erkennen: Er beginnt immer mit iVBORw0KGgo, der Kodierung der 8 Byte langen PNG-Signatur, die mit 89 50 4E 47 beginnt. Darauf folgt AAAANSUhEUg, der Anfang des IHDR-Chunks, der Breite und Höhe enthält.
Aus JSON kopierte Strings sollten Sie vorher kurz prüfen. PHPs json_encode maskiert zum Beispiel standardmäßig Schrägstriche, sodass ein PNG aus einer PHP-API mit \/-Sequenzen ankommen kann. Ersetzen Sie diese durch / und entfernen Sie die umschließenden Anführungszeichen, bevor Sie den Text einfügen.
Warum als PNG speichern
PNG komprimiert, ohne Details zu verlieren, und speichert einen vollständigen Alphakanal, sodass weiche Schatten und geglättete Kanten erhalten bleiben. Damit ist es die naheliegende Wahl für Screenshots, Oberflächenelemente, Diagramme und alles, was Text enthält. Für Fotos erzeugen JPG oder WebP deutlich kleinere Dateien.
Wenn Sie ein JPEG oder WebP in PNG konvertieren, bleibt genau das erhalten, was auf dem Bildschirm zu sehen ist. Details, die die verlustbehaftete Kompression bereits entfernt hat, lassen sich jedoch nicht zurückholen, und das PNG ist meist größer als die Quelle.
Ein Base64-PNG im Code speichern
# Python
import base64
with open('screenshot.png', 'wb') as f:
f.write(base64.b64decode(b64_string))
// Browser: Data-URI in einen Blob umwandeln, ohne manuelles Dekodieren
const blob = await (await fetch(dataUri)).blob();
const url = URL.createObjectURL(blob);Sie benötigen die umgekehrte Richtung? PNG zu Base64 kodiert eine Datei als String oder Data-URI.
Häufig gestellte Fragen
Woran erkenne ich, ob ein Base64-String ein PNG ist?
iVBORw0KGgo. Das Tool liest außerdem direkt die Signatur-Bytes und meldet daher das tatsächliche Format, selbst wenn die Data-URI etwas anderes angibt.Verringert die Konvertierung in PNG die Qualität?
Nein. PNG ist verlustfrei, die Pixel werden also genau so gespeichert, wie der Browser sie dekodiert hat. Ein Verlust kann nur dann vorliegen, wenn er bereits in der Quelldatei entstanden ist.
Bleibt die Transparenz erhalten?
Ja. Die PNG-Ausgabe behält den vollständigen Alphakanal. Bei der JPEG-Ausgabe werden transparente Bereiche mit Weiß gefüllt, und bei der GIF-Ausgabe wird jedes Pixel entweder vollständig transparent oder vollständig deckend.
Meine PNG-Data-URI zeigt ein defektes Bild. Woran liegt das?
\/, bevor Sie den Text einfügen.