> PNG | encode | data-uri <

A: Sie konvertiert den binären Inhalt einer .png-Datei in einen ASCII-String mithilfe des in RFC 4648 definierten Base64-Alphabets. Der kodierte Text kann direkt in ein HTML-<img>-Tag, eine CSS-background-image-Regel, eine E-Mail-Nachricht, einen JSON-API-Payload oder jeden anderen reinen Textkanal eingefügt werden. Die PNG-Bytes selbst bleiben unverändert — jeder IHDR-, IDAT-, tRNS- und IEND-Chunk wird kodiert und kann exakt wiederhergestellt werden.

A: Ziehen Sie Ihr PNG in die Drop-Zone (oder klicken Sie zum Durchsuchen). Das Tool liest die Datei mit FileReader.readAsDataURL(), was bereits eine direkt einsetzbare data:image/png;base64,…-URI zurückgibt. Wählen Sie Daten-URI, wenn Sie sie direkt in <img src="…"> einfügen möchten, oder Nur Base64-Nutzdaten, falls Ihre API/Datenbank den reinen Base64-Anteil ohne das Präfix data:image/png;base64, erwartet.

A: Nein. Base64 ist eine reine Binär-zu-Text-Transformation — jedes Byte des ursprünglichen PNGs bleibt erhalten, einschließlich Alphakanal, Palette und Farbprofil (iCCP/sRGB-Chunks). Wenn Sie den String zurückdekodieren, ist die Datei bit-identisch zum Original. Ein SHA-256-Hash des dekodierten PNGs stimmt mit dem Original überein. Deshalb ist Base64 das richtige Werkzeug zum Einbetten von Icons, Logos und Screenshots, bei denen Pixelgenauigkeit zählt.

A: Base64 verwendet 4 Zeichen für je 3 Eingabebytes, sodass der kodierte String ~33 % größer ist als die ursprüngliche PNG-Datei. Die genaue Größe beträgt 4 × ⌈n / 3⌉ Zeichen, wobei n die PNG-Größe in Bytes ist. Ein 10 KB großes PNG wird zu ~13,6 KB Base64-Text. Da HTTP-Kompression (gzip, Brotli) Base64-Text relativ gut verarbeitet, liegt der Overhead über das Netzwerk in der Praxis meist näher bei 10–15 %.

A: Jeder PNG-Base64-String beginnt mit iVBORw0KGgo. Dieses Präfix ist die 8-Byte-PNG-Signatur 89 50 4E 47 0D 0A 1A 0A, erneut in Base64 kodiert. Daher ist iVBORw0KGgoAAAANSUhEUg... immer ein PNG, und das Erkennen dieses Präfixes ist eine schnelle visuelle Prüfung, dass Ihre Daten intakt sind. Als Daten-URI umgeschlagen sieht es so aus:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==

A: Fügen Sie die vollständige Daten-URI in das src-Attribut eines <img>-Tags ein:
<img src="data:image/png;base64,iVBORw0KGgo…" alt="logo">
Der Browser dekodiert die Base64-Nutzdaten und rendert das PNG exakt so, als wäre es über eine URL geladen worden. Es wird keine zusätzliche HTTP-Anfrage gestellt, was bei kritischen UI-Icons, E-Mail-Signaturen und Offline-First-Apps nützlich ist.

A: Verpacken Sie die Daten-URI in die url()-Funktion:
.icon { background-image: url('data:image/png;base64,iVBORw0KGgo…'); }
Zur Wiederverwendung speichern Sie sie in einer CSS-Custom-Property:
:root { --logo: url('data:image/png;base64,iVBORw0KGgo…'); }
.brand { background: var(--logo); }
Inline-Hintergründe eliminieren eine HTTP-Anfrage pro Icon, blähen aber Ihre CSS-Datei auf — verwenden Sie sie daher nur für kleine Icons (< 4 KB).

A:
JavaScript (Browser): const uri = await new Promise(r => { const f = new FileReader(); f.onload = () => r(f.result); f.readAsDataURL(pngFile); });
Node.js: fs.readFileSync('logo.png').toString('base64')
Python: import base64; base64.b64encode(open('logo.png','rb').read()).decode()
PHP: base64_encode(file_get_contents('logo.png'))
Go: base64.StdEncoding.EncodeToString(pngBytes)
Ruby: Base64.strict_encode64(File.read('logo.png'))

A: Verwenden Sie Base64-PNG-Daten-URIs, wenn:
• das Bild < 4 KB groß ist (um einen HTTP-Roundtrip einzusparen)
• Sie es innerhalb einer HTML-E-Mail einbetten müssen (viele Clients blockieren entfernte Bilder)
• Sie einen einzelnen HTML-Report oder ein Dashboard als Einzeldatei ausliefern
• Sie das Bild in einem JSON-Payload oder einer Datenbankspalte speichern
Bevorzugen Sie eine externe .png-Datei, wenn das Bild groß ist, auf vielen Seiten wiederverwendet wird oder eigenes CDN-Caching benötigt.

A: Ja. Da Base64 eine bitgenaue Transformation ist, wird jeder PNG-Farbmodus gleichermaßen unterstützt:
• RGBA / Truecolor + Alpha — 32-Bit-Farbe, volle Transparenz
• Palette (PLTE) + tRNS — indizierte Paletten-PNGs mit 1-Bit-Transparenz
• Graustufen + Alpha — 8-/16-Bit-Graustufen mit Alpha
• 16-Bit-Deep-Color-PNGs — HDR-artige PNGs, verwendet in medizinischer Bildgebung und wissenschaftlicher Visualisierung
All diese laufen sauber durch den Base64-Round-Trip und werden in Browsern, die PNG verstehen, korrekt angezeigt.

A: Nein. Base64 ist eine Kodierung, keine Verschlüsselung. Jeder, der den String lesen kann, kann ihn in Millisekunden zurück zum ursprünglichen PNG dekodieren. Enthält ein Screenshot ein Passwort, ein API-Token oder persönliche Informationen, schützt die Base64-Kodierung sie nicht — verwenden Sie eine echte Verschlüsselungsschicht (AES-GCM, age, PGP) über der Base64-Ausgabe, oder übertragen Sie das Bild via TLS an einen Server, der Zugriffskontrollen anwendet.

A: Es gibt keine künstliche Obergrenze. Da die Kodierung lokal läuft, ist das Limit der Speicher Ihres Browsers — typischerweise 100 MB+ auf dem Desktop und 40–60 MB auf Mobilgeräten. Für sehr große PNGs (hochauflösende medizinische oder Satellitenbilder) lesen wir die Datei in Chunks und rufen btoa() für jeden Chunk auf, damit der Hauptthread reaktionsfähig bleibt. Ist Ihr Bild größer als ~100 MB, ziehen Sie in Betracht, es direkt aus einem serverseitigen Encoder zu streamen, statt es in den Browser zu laden.

A: Verwenden Sie PNG → Base64 für Logos, UI-Icons, Screenshots, Diagramme und alles mit Transparenz oder scharfen Kanten (Text, Diagramme). PNG ist verlustfrei und alpha-fähig. Verwenden Sie JPG → Base64 für Fotografien oder Bilder mit vielen Farben, bei denen verlustbehaftete Kompression akzeptabel ist. JPEG-Dateien sind typischerweise 5- bis 20-mal kleiner als PNG für Fotos, sodass die Base64-Nutzdaten deutlich kürzer sind. Als Faustregel: Stammt das Bild aus einer Kamera oder enthält fotografische Farbverläufe, nehmen Sie JPG; andernfalls PNG.