Um ein Bild in Base64 umzuwandeln, ziehen Sie eine PNG-, JPG-, WebP-, GIF-, SVG-, AVIF-, BMP- oder ICO-Datei in das Feld oben und klicken auf „In Base64 umwandeln“. Wählen Sie unter „Ausgabe als“ Data-URI, reines Base64, ein fertiges <img>-Tag oder eine CSS-Hintergrund-Zeile und klicken Sie auf „Alles kopieren“. Kodiert werden die Originalbytes, die Qualität ändert sich also nie.
So nutzen Sie das Tool Bild in Base64
- 1
Ein oder mehrere Bilder hinzufügen
Ziehen Sie PNG-, JPG-, WebP-, GIF-, SVG-, AVIF-, BMP- oder ICO-Dateien in die Ablagefläche oder klicken Sie, um sie auszuwählen. Mehrere Dateien lassen sich auf einmal kodieren.
- 2
Auf „In Base64 umwandeln“ klicken
Die Bytes jeder Datei werden in Ihrem Browser gelesen und unverändert als Base64 kodiert, ohne das Bild neu zu komprimieren.
- 3
Ausgabe wählen
Wechseln Sie unter „Ausgabe als“ zwischen „Data-URI“, „Reines Base64“, „<img>-Tag“ und „CSS-Hintergrund“ – je nachdem, wo der Code landen soll.
- 4
Kopieren und einfügen
Nutzen Sie „Alles kopieren“ neben jedem Ergebnis und achten Sie auf die angezeigte Größe, damit Sie wissen, wie viel die Zeichenkette Ihrer Seite oder Ihrem Stylesheet hinzufügt.
Wann lohnt es sich, ein Bild in HTML einzubetten?
Base64 verwandelt Binärdaten in einfachen Text. Als Data-URI verpackt, kann dieser Text an die Stelle einer Bild-URL treten – das Bild reist dann in der HTML-, CSS- oder JSON-Datei mit, statt separat geladen zu werden. Praktisch ist das für kleine Icons und Logos im Stylesheet, Bilder in HTML-E-Mail-Vorlagen, Demos und Prototypen in einer einzigen Datei sowie API-Payloads oder Konfigurationsdateien, die nur Text annehmen.
Der Preis ist die Größe. Eine Base64-Zeichenkette ist etwa 33 % größer als die Binärdatei, und ein eingebettetes Bild kann der Browser nicht separat zwischenspeichern – es wird jedes Mal mit der Datei geladen, in der es steckt. Deshalb passt Base64 am besten zu kleinen Bildern: Aus einem Icon mit 2 KB werden rund 2,7 KB Text, was völlig in Ordnung ist; ein großes Foto würde Ihre Seite dagegen aufblähen und ist als normale Datei besser aufgehoben.
Weil der Konverter die Größe jedes Ergebnisses anzeigt, können Sie im Einzelfall entscheiden, ob Sie ein Bild in HTML oder CSS einbetten oder als gewöhnliche Datei behalten.
Data URI, reines Base64, img-Tag oder CSS: welche Ausgabe kopieren?
Eine Base64-Data-URI beginnt mit data:, gefolgt vom Medientyp der Datei wie image/png, dann ;base64, und dem kodierten Text. Sie können sie überall einfügen, wo eine URL erwartet wird: im src-Attribut eines Bildes, in einem CSS-Wert url() oder in einem JSON-Feld. Reines Base64 ist nur der kodierte Text ohne dieses Präfix – genau das, was viele APIs und Bibliotheken verlangen.
Die Ausgabe „<img>-Tag“ packt die Data-URI in ein vollständiges HTML-Bildelement, das Sie direkt in eine Seite setzen. Die Ausgabe „CSS-Hintergrund“ liefert eine fertige background-image-Zeile für ein Stylesheet. Alle vier stammen aus derselben Kodierung; beim Umschalten wird die Datei also nicht erneut verarbeitet.
PNG in Base64 und JPG in Base64 funktionieren gleich. SVG in Base64 ist nützlich, wenn ein Tool kein Inline-SVG-Markup akzeptiert; das kodierte SVG bleibt eine Vektorgrafik und skaliert weiterhin sauber auf jede Größe.
Ein Base64-Encoder, der Ihre Dateien privat hält
Der Encoder liest Ihre Dateien mit den eigenen Schnittstellen des Browsers und kodiert die Pixel nie neu – die Base64-Ausgabe ergibt dekodiert wieder eine identische Datei. Nichts wird unterwegs skaliert, komprimiert oder umgewandelt.
Hochgeladen wird auch nichts. Die Dateien bleiben auf Ihrem Gerät, werden im Tab verarbeitet und beim Schließen verworfen. Das zählt bei Logos, unveröffentlichten Designs oder Screenshots, die Sie keinem fremden Server überlassen möchten. Das Tool ist kostenlos und braucht keine Anmeldung.
Tipps für beste Ergebnisse
- Ein Bild in HTML einbetten lohnt sich vor allem bei Icons, Logos und einfachen Grafiken; Base64 macht die Datei etwa ein Drittel größer.
- Komprimieren oder verkleinern Sie ein Bild vor dem Kodieren – die Base64-Zeichenkette wächst mit jedem Byte des Originals.
- Bei SVG-Icons vermeidet Base64 Probleme mit Anführungszeichen, die sonst einen CSS- oder JSON-String zerbrechen würden.
- Nehmen Sie reines Base64, wenn eine API nur den kodierten Inhalt verlangt, und die Data-URI, wenn sie eine URL erwartet.
- Große Bilder verlinken Sie besser als Dateien, damit der Browser sie zwischen Seiten zwischenspeichern kann.
Häufige Fragen
Wie wandle ich ein Bild in Base64 um?
Ziehen Sie das Bild in das Feld oben und klicken Sie auf „In Base64 umwandeln“. Wählen Sie dann Data-URI, reines Base64, <img>-Tag oder CSS-Hintergrund und klicken Sie auf „Alles kopieren“. Die Kodierung passiert in Ihrem Browser, und die Ausgabe ergibt dekodiert genau die Originaldatei.
Was ist eine Base64-Data-URI?
Eine Zeichenkette, die das ganze Bild als Text enthält, in der Form data:, dann der Medientyp wie image/png, dann ;base64, und schließlich die kodierten Bytes. Browser akzeptieren sie überall, wo eine Bild-URL erlaubt ist – das Bild braucht dann keine eigene Datei.
Verschlechtert die Umwandlung in Base64 die Bildqualität?
Nein. Das Tool kodiert die Originalbytes der Datei, ohne etwas neu zu komprimieren, das Bild ist dekodiert also exakt gleich. Was sich ändert, ist die Größe: Base64-Text ist etwa 33 % größer als die Binärdatei.
Welche Bildformate kann ich umwandeln?
PNG, JPG, WebP, GIF, SVG, AVIF, BMP und ICO werden unterstützt, und Sie können mehrere Dateien auf einmal hinzufügen. Bei jedem Ergebnis steht die Größe, sodass Sie sehen, was das Einbetten Ihrem Code hinzufügen würde.
Sollte ich Base64-Bilder auf meiner Website verwenden?
Für kleine Icons, Logos und E-Mail-Vorlagen kann es eine Anfrage sparen und alles in einer Datei halten. Bei Fotos und größeren Bildern schadet es meist, weil der Text größer ist und nicht separat zwischengespeichert werden kann. Prüfen Sie die angezeigte Größe, bevor Sie einbetten.
Werden meine Bilder auf einen Server hochgeladen?
Nein. Die Base64-Kodierung läuft vollständig in Ihrem Browser. Ihre Bilder werden nie an die Server von Krawly gesendet und nichts wird gespeichert, private Logos und Screenshots bleiben also auf Ihrem Gerät. Beim Schließen des Tabs werden Dateien und Ergebnisse verworfen.
Privat durch Bauweise. Jeder Krawly-Konverter läuft in Ihrem Browser mit JavaScript und WebAssembly. Ihre Dateien werden weder hochgeladen noch gespeichert noch von jemandem gesehen – wenn Sie den Tab schließen, sind sie weg.