ConvertBlink
DE

PNG in Base64 umwandeln: PNG als Data-URI kodieren

PNG direkt im Browser in eine Base64-Data-URI kodieren. Fügen Sie sie in HTML, CSS oder JS ein, um kleine Icons inline einzubetten. Kein Upload, Kopieren per Klick, verlustfrei.

Browser-nativ
Privatsphäre zuerst
Kostenlos

Jetzt konvertieren

Datei hierher ziehen

oder

Wie es funktioniert

Wer ein kleines PNG als Base64-Data-URI inline einbettet, spart eine HTTP-Anfrage: Die Bilddaten stecken direkt im HTML, CSS oder JS, statt in einer separaten Datei zu liegen, die der Browser erst nachladen muss. Dieses Tool liest Ihr PNG lokal ein, kodiert es in einen `data:image/png;base64,...`-String und legt daneben einen Kopier-Button für einen Klick ab. Die Datei verlässt Ihren Rechner nie. Die Kodierung selbst ist verlustfrei. Jedes Pixel und der komplette Alphakanal bleiben erhalten, transparente Icons bleiben also transparent. Base64 stellt 3 Byte Binärdaten als 4 ASCII-Zeichen dar – deshalb ist der String rund ein Drittel größer als die Ausgangsdatei. Für ein 2-KB-Icon ist dieser Aufschlag ein fairer Tausch, für ein 200-KB-Bild dagegen ein schlechter: Dort verlieren Sie zudem das Browser-Caching und blähen das Stylesheet auf, das den String ausliefert. Eines sollten Sie wissen: Das Ergebnis ist ein frisch neu kodiertes PNG, keine bytegenaue Kopie. Ihr PNG wird dekodiert, auf einem Canvas neu gezeichnet und neu kodiert. Dabei fallen Zusatzdaten wie eingebettete ICC-Profile und Text-Metadaten weg, und 16-Bit-Bilder werden auf 8 Bit pro Kanal reduziert. Die sichtbaren Pixel sind identisch, der resultierende String kann sich in der Länge aber vom Original unterscheiden. Fügen Sie die kopierte URI in ein `<img src>`, ein CSS `background-image: url(...)` oder einen JS-String ein, und sie wird ohne separate Anfrage angezeigt.

Verwandte Konvertierungs-Tools

Entdecken Sie weitere leistungsstarke Konverter, die für Ihren Workflow nützlich sein könnten

PNG optimieren: verlustfrei komprimieren, gleiche Pixel

PNG-Dateien verlustfrei mit oxipng verkleinern. Gleiche Pixel, weniger Bytes durch bessere Filter und DEFLATE. Läuft im Browser, kein Upload, kein Qualitätsverlust.

.png
Jetzt testen

PNG in AVIF umwandeln - verlustfrei, mit Transparenz

PNG verlustfrei in AVIF umwandeln, direkt im Browser. Die Intra-Codierung von AV1 verkleinert die Datei und behält jeden Pixel samt voller Transparenz. Kein Upload, alles läuft lokal.

.png
Jetzt testen

PNG in JPEG umwandeln - große Foto-PNGs verkleinern

PNG direkt im Browser in JPEG umwandeln und die Dateigröße von Fotos reduzieren. Verlustbehaftet mit Qualität 85, Transparenz wird auf einen Hintergrund gelegt. Kein Upload, deine Dateien bleiben auf dem Gerät.

.png
Jetzt testen

Bild in Base64 Data-URI umwandeln (JPG/PNG/GIF/WebP)

Wandle ein JPG, PNG, GIF oder WebP in eine Base64-data:-URI um, die du direkt in HTML, CSS oder JS einfügst. Läuft im Browser, deine Dateien bleiben auf dem Gerät.

.jpg.jpeg +3
Jetzt testen

JPEG zu Base64 Data-URI Encoder, kostenlos im Browser

Wandle ein JPEG in eine Base64 Data-URI um, die du direkt in HTML, CSS oder JS einfügst. Läuft komplett im Browser, kein Upload. String mit einem Klick kopieren.

.jpg.jpeg
Jetzt testen

TGA in PNG umwandeln: Targa-Dateien überall öffnen

Truevision TGA (Targa) direkt im Browser in PNG umwandeln. Verlustfrei, mit Alphakanal, für RLE und unkomprimiert – nichts wird hochgeladen.

.tga
Jetzt testen

MehrPNG

png optimizerpng → avifpng → jpegpng → jxlpng → pdf

Konvertieren zuBASE64

canvas → base64jpg → base64
Alle Konverter anzeigen

Funktionen

  • Keine Datei-Uploads erforderlich
  • 100% datenschutzorientiert
  • Browser-basiert
  • Schnelle Verarbeitung
  • Für immer kostenlos

Unterstützte Formate

.png

Ausgabe: Base64

Technische Spezifikationen

input Format PNG (Portable Network Graphics, mit oder ohne Alpha; 16-Bit-Eingaben werden auf 8 Bit heruntergerechnet)
output Format Base64-Data-URI-String (data:image/png;base64,...)
compression Type Verlustfreie Textkodierung eines neu kodierten PNG; im Kodierschritt kein Qualitätsverlust
quality Retention Pixel und Alphakanal bleiben erhalten; Metadaten-Chunks werden entfernt, 16 Bit auf 8 Bit reduziert
color Space Support RGB und RGBA (8 Bit pro Kanal); eingebettete ICC-Farbprofile werden nicht übernommen
max Resolution Nur durch den Speicher Ihres Geräts begrenzt
processing Time Sofort, läuft in Ihrem Browser

Hauptvorteile

  • Spart bei kleinen Bildern eine separate HTTP-Anfrage
  • Verlustfreie Kodierung: Pixel und volle Transparenz bleiben erhalten
  • Kopieren per Klick liefert eine direkt einsetzbare data:image/png;base64-URI
  • Läuft zu 100 % im Browser, keine Datei wird hochgeladen
  • Funktioniert direkt in HTML, CSS url() und JavaScript-Strings
  • Keine Anmeldung, kein Wasserzeichen, kein Limit pro Datei außer Ihrem Speicher

Häufige Anwendungsfälle

  • UI-Icons und kleine Logos inline in ein CSS-Stylesheet einbetten
  • Einen Platzhalter oder ein Sprite direkt im HTML-Markup einbetten
  • Assets in eine Single-File-HTML-Seite oder Web-Component bündeln
  • Eine kleine Grafik fest in eine JavaScript- oder Framework-Komponente schreiben
  • Ein winziges Bild als Textfeld in JSON oder einer Datenbank speichern
  • Eine zusätzliche Anfrage für render-blockierende Above-the-fold-Icons sparen

Profi-Tipps

  • Beschränken Sie sich auf kleine Assets; die rund 33 % Aufschlag und das verlorene Caching schaden großen Bildern
  • Kopieren Sie den vollständigen String inklusive Präfix data:image/png;base64, sonst wird nichts angezeigt
  • Bei einem sich wiederholenden CSS-Hintergrund verhindert ein inline eingebettetes Icon ein Flackern vor dem Laden
  • Betten Sie keine seitenweit wiederverwendeten Bilder inline ein; Sie verlieren den gemeinsamen Browser-Cache
  • Für eine einfarbige Form, die nur Transparenz braucht, ist ein Inline-SVG meist deutlich kleiner als eine PNG-Data-URI
  • Testen Sie Data-URIs in E-Mails sorgfältig; Outlook und der Gmail-Webclient blockieren sie häufig

Häufig gestellte Fragen

Fügen Sie den kompletten String inklusive des Präfixes data:image/png;base64, in ein url() ein: background-image: url(data:image/png;base64,iVBORw0KGgo...). Derselbe String funktioniert unverändert in einem HTML-Attribut <img src="..."> oder als JS-String. CSS braucht keine besonderen Anführungszeichen, das Einrahmen in Anführungszeichen schadet aber nicht und manche Linter bevorzugen es.
Der Base64-Schritt ist verlustfrei: Er ist eine Textkodierung der Binärdaten, Pixel und Alphakanal bleiben also exakt erhalten. Der einzige Punkt: Dieses Tool kodiert das PNG über einen Canvas neu, wodurch Metadaten wie ICC-Profile entfernt und 16-Bit-Bilder auf 8 Bit reduziert werden. Bei üblichen 8-Bit-Webgrafiken macht das keinen sichtbaren Unterschied.
Base64 bildet je 3 Byte auf 4 ASCII-Zeichen ab, ein systembedingtes Plus von rund 33 %, dazu etwas Padding. Bei einem kleinen Icon ist das ein guter Tausch, um eine HTTP-Anfrage zu sparen. Bei größeren Bildern führt der Aufschlag zusammen mit dem verlorenen Browser-Caching meist dazu, dass eine normal verlinkte Datei schneller lädt.
Betten Sie kleine, statische Assets inline ein: UI-Icons, Sprites, ein winziges Logo oder einen Platzhalter, der sonst eine zusätzliche, das Rendering blockierende Anfrage wäre. Betten Sie nichts Großes und nichts ein, das auf vielen Seiten wiederverwendet wird. Eine verlinkte Datei wird einmal gecacht und überall geteilt, eine inline eingebettete dagegen mit jeder Seite, die sie enthält, erneut geladen.
Nein. Die Kodierung läuft vollständig in Ihrem Browser per JavaScript. Das PNG verlässt Ihr Gerät nie, daher ist es sicher für interne Assets, Screenshots oder alles, was Sie keinem Drittanbieter-Dienst geben möchten.
Die Unterstützung ist uneinheitlich. Apple Mail und viele mobile Clients stellen Data-URIs dar, mehrere Outlook-Versionen und der Gmail-Webclient entfernen oder blockieren sie jedoch. Hosten Sie das Bild für HTML-E-Mails und verlinken Sie es mit einer absoluten URL, statt es inline einzubetten.
Jeder Base64-Decoder kehrt die Kodierung sauber um, da dabei keine Information verloren geht. Auf dieser Seite nehmen die Tools base64-to-image und base64-to-jpg eine Data-URI oder einen reinen String entgegen und geben eine herunterladbare Datei zurück.
Sie sind durch den Speicher Ihres Geräts begrenzt, mit einem Limit von 100 MB im Uploader. In der Praxis eignet sich alles jenseits weniger Dutzend KB schlecht zum Inline-Einbetten – nutzen Sie das hier für kleine Grafiken und verlinken Sie den Rest als normale Dateien.