PNG in Base64 umwandeln - kostenlos, sofort, im Browser
PNG zu Base64 Konverter
Bis zu 10 MB. Nichts wird hochgeladen – die Datei verlässt Ihr Gerät nie.
Verwenden Sie dies in einem <img src>-Attribut oder in CSS url().
Ohne das data:-Präfix – für JSON-Nutzlasten und APIs.
Ihre Dateien bleiben privat
Diese Umwandlung läuft vollständig in Ihrem Browser. Das Bild wird nie hochgeladen, nichts von dem, was Sie hier kodieren, erreicht unseren Server oder sonst jemanden.
Wissenswertes zur Umwandlung von PNG in Base64
PNG ist das Format, das am häufigsten eingebettet wird – Icons, Logos, kleine Sprites, jene winzigen Interface-Teile, die sonst jeweils eine eigene Netzwerkanfrage kosten würden. Eines davon in Base64 zu kodieren macht daraus Text, den Sie direkt in ein Stylesheet oder ein HTML-Attribut einfügen können. Ob das eine gute Idee ist, hängt fast ausschließlich davon ab, wie klein die Datei ist.
So wandeln Sie PNG in Base64 um
- 1 Legen Sie Ihre .png-Datei im Upload-Bereich ab.
- 2 Das Ergebnis erscheint sofort – kein Knopf zum Drücken, nichts zum Warten.
- 3 Kopieren Sie die passende Form: die Data-URI für HTML und CSS, den reinen String für JSON oder die fertige CSS-Regel.
Wann sich das Einbetten wirklich lohnt
Jedes einzelne Bild auf einer Seite kostet eine Anfrage, und eine Anfrage hat Overhead über die transportierten Bytes hinaus. Bei einem 1 KB großen Icon kann dieser Overhead die Datei selbst übersteigen; es ins Stylesheet zu falten ist dann ein echter Gewinn. Als grobe Regel hilft Einbetten unterhalb weniger Kilobyte und schadet oberhalb von zehn. Der Break-even ist keine feste Zahl – er verschiebt sich mit Verbindung, Server und der Zahl konkurrierender Ressourcen –, doch die Form des Tauschs bleibt gleich: Sie tauschen eine Rundreise gegen zusätzliche Bytes.
Worauf Sie verzichten
Auf drei Dinge, und das zweite überrascht die meisten. Erstens die Größe: Der kodierte Text ist rund ein Drittel größer als die Datei. Zweitens das Caching: Ein eingebettetes Bild lässt sich nicht getrennt zwischenspeichern, es wird also bei jeder Änderung des enthaltenden Stylesheets neu geladen – und ein Stylesheet ändert sich weit häufiger als ein Logo. Drittens muss der Browser die Zeichenkette dekodieren, bevor er zeichnen kann; bei einem Icon belanglos, bei etwas Großem messbar. Die Transparenz überlebt immerhin unangetastet: Der Alphakanal gehört zu den PNG-Daten, und Base64 kopiert ihn Byte für Byte.
Für Icons zuerst an SVG denken
Wenn Sie ein flaches Icon oder ein schlichtes Logo kodieren, ist ein SVG meist schon vor der Kodierung kleiner als das PNG – und danach erst recht, denn SVG ist bereits Text und braucht überhaupt kein Base64. Zudem skaliert es ohne zweite Datei auf jede Bildschirmdichte. Greifen Sie zu PNG, wenn das Motiv fotografische Details, weiche Verläufe oder Effekte enthält, mit denen Vektoren schlecht umgehen – und dann verkleinern Sie es vor dem Kodieren, nicht danach. Base64 vergrößert getreulich alles, was Sie ihm geben.