PNG in Base64

So wandeln Sie ein PNG in Base64 um

1. Legen Sie eine .png-Datei auf dem Feld ab oder wählen Sie sie über die Dateiauswahl. Um einen Screenshot zu kodieren, kopieren Sie ihn und drücken auf dieser Seite Strg+V (Cmd+V auf dem Mac); Sie müssen ihn nicht vorher speichern.
2. Ist das PNG größer als nötig, setzen Sie Max. Breite oder wählen Sie WebP unter Umwandeln in. Metadaten entfernen (EXIF) entfernt Text- und EXIF-Chunks.
3. Lassen Sie Ausgabe als auf Data-URI, oder wechseln Sie zu CSS, <img>, Markdown, JSON oder reinem Base64.
4. Ausgabe kopieren. Die Vorschau zeigt die Pixelgröße und nach dem Neukodieren die neue Dateigröße.

So sieht ein Base64-PNG aus

Jedes PNG beginnt mit denselben 16 Bytes: der 8-Byte-Signatur und dem Kopf des IHDR-Chunks, der als Erstes kommen muss. In Base64 ergibt das einen festen Anfang von 22 Zeichen:

iVBORw0KGgoAAAANSUhEUg

Jede Zeichenkette, die mit iVBORw0KGgo beginnt, ist also ein PNG, ob in einer JSON-Antwort, einer Logdatei oder einer Datenbankspalte. Breite und Höhe folgen direkt danach, in die nächsten Zeichen gepackt.

Zum Vergleich ein vollständiges, komplett transparentes PNG mit 1×1 Pixel. Die Datei ist 70 Bytes groß, das Base64 96 Zeichen lang:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgYGBgAAAABQABeqhXUAAAAABJRU5ErkJggg==" alt="" width="1" height="1">

Beim Einfügen gibt es einen Haken. Browser und Bildbetrachter legen ein kopiertes Bild meist als PNG in die Zwischenablage, egal in welchem Format es vorlag. Ein eingefügtes JPEG-Foto kommt dann als PNG an, das viel größer sein kann als die Datei auf der Festplatte. Legen Sie die Originaldatei ab, wenn das Ausgangsformat wichtig ist.

Beginnt Ihr kodiertes PNG mit etwas anderem, war die Datei kein PNG. Eine .png-Datei, die in Wirklichkeit ein JPEG ist, beginnt mit /9j/, und ein in .png umbenanntes WebP mit UklGR. Der MIME-Typ in der Vorschau verrät, was der Browser erkannt hat.

PNG, JPEG oder WebP vor dem Kodieren

PNG ist verlustfrei und damit die richtige Wahl für Logos, Icons, UI-Grafiken und Screenshots mit Text. Für Fotos ist es die falsche: Ein fotografisches PNG ist oft ein Mehrfaches größer als ein gutes JPEG oder WebP desselben Bildes. Da Base64 alles um etwa 33 % aufbläht, entscheidet das gewählte Format über den Großteil der endgültigen Größe.

Der Konverter kodiert über das Canvas des Browsers neu. Daraus folgen drei Dinge:

• In JPEG umwandeln verliert die Transparenz. Transparente Pixel werden weiß.
• Safari hat keinen WebP-Encoder. Fordern Sie dort WebP an, erhalten Sie PNG zurück, mit einem entsprechenden Hinweis.
• Der Canvas-Encoder optimiert keine PNGs. Ein PNG, das schon mit einem eigenen Optimierer komprimiert wurde, kann durch Neukodieren größer werden. Vergleichen Sie die Größen in der Vorschau und behalten Sie das Original, wenn es kleiner ist.

Metadaten entfernen (EXIF) entfernt dabei Zusatzdaten wie EXIF und Text-Chunks. Die meisten PNGs enthalten davon wenig, aber Screenshots und Exporte mancher Apps enthalten Softwarenamen oder Zeitstempel.

Wo Base64-PNGs auftauchen

• CSS-Icons: background-image: url("data:image/png;base64,...") für kleine Icons, die keine zusätzliche Anfrage kosten sollen. Für Vektor-Icons ist ein SVG meist kleiner; siehe SVG in Base64.
• Canvas-Ausgabe: canvas.toDataURL() liefert standardmäßig eine PNG-Data-URI, deshalb erzeugen Unterschriftenfelder, Diagramme und Bildeditoren so oft dieses Format. Base64 in PNG macht daraus wieder eine Datei.
• API-Payloads: Screenshot-Dienste, Testrunner und KI-Vision-APIs tauschen PNGs als Base64 in JSON aus. Prüfen Sie, ob die API das Präfix data:image/png;base64, oder reines Base64 erwartet, und wählen Sie passend Data-URI oder Reines Base64.
• Test-Snapshots und Fehlerberichte: Visuelle Tests und Crash-Reporter legen Screenshots oft als Base64-PNG in ihre JSON- oder HTML-Berichte, damit ein Bericht eine einzige Datei bleibt.
• Favicons und Seiten in einer Datei: Ein kleines PNG-Favicon, eingebettet in <link rel="icon">, hält eine HTML-Datei in sich geschlossen. Die Favicon-Seite behandelt die Details.

Ein PNG im Code kodieren

Node.js liest die Datei in einen Buffer und kodiert sie mit einem Aufruf:

import { readFileSync } from "node:fs";

const uri = "data:image/png;base64," + readFileSync("logo.png").toString("base64");

Im Browser liefert ein Canvas die PNG-Data-URI direkt:

const uri = canvas.toDataURL("image/png");

Siehe Base64 in Node.js für Streaming und URL-sichere Ausgabe und Base64 in JavaScript für Dateien und Blobs im Browser.

Eine PNG-Data-URI reparieren, die nicht angezeigt wird

• Das Präfix ist falsch. Es muss data:image/png;base64, lauten, mit dem Komma. Fehlt ;base64, liest der Browser die Zeichen als rohen Text.
• URL-sicher ist aktiviert. Browser dekodieren in data:-URLs nur das Standardalphabet. Ein PNG-Base64 mit - und _ erscheint als defektes Bild.
• Zeilenumbrüche in CSS. Umbruch bei 76 ist für E-Mails gedacht. In einem Stylesheet macht ein Zeilenumbruch innerhalb von url("...") die Deklaration ungültig.
• Die Zeichenkette wurde abgeschnitten. Ein PNG endet mit einem festen 12-Byte-Chunk IEND, sein Base64 endet daher auf AAAAAElFTkSuQmCC, AABJRU5ErkJggg== oder AAAASUVORK5CYII=, je nachdem, welchen Rest die Dateilänge bei Division durch 3 lässt. Sieht das Ende anders aus und ist das Bild halb gezeichnet oder fehlt, wurde beim Kopieren gekürzt. Prüfen Sie Länge und Padding der Zeichenkette.

Häufige Fragen