Tutorial
Schritt für Schritt: Bilder in Base64 umwandeln
In diesem Tutorial lernst du, wie du den Base64 Converter nutzt, um Bilder direkt im Browser zu konvertieren – ohne Upload auf einen Server.
Bilder hochladen
Ziehe deine Bilder per Drag & Drop in den Upload-Bereich oder klicke auf die Fläche, um Dateien auszuwählen. Du kannst auch Bilder direkt aus der Zwischenablage mit Strg+V einfügen. Unterstützt werden JPG, PNG, GIF, WebP, SVG und BMP – maximal 20 Bilder mit je 1,5 MB.
Ergebnisse anzeigen
Nach dem Upload werden deine Bilder automatisch konvertiert. In der Ergebnistabelle siehst du eine Vorschau, die originale Dateigröße, die Base64-Größe und den prozentualen Größenzuwachs.
Code kopieren
Für jedes Bild stehen verschiedene Code-Formate bereit: Reiner Base64-String, CSS background-image, HTML img-Tag und Markdown. Klicke einfach auf den entsprechenden Button, um den Code in die Zwischenablage zu kopieren.
In dein Projekt einfügen
Füge den kopierten Base64-Code in dein HTML, CSS oder Markdown ein. Base64-Bilder benötigen keine separaten Dateien und werden direkt mit dem Quellcode geladen – ideal für Icons, Platzhalter und kleine Grafiken.
Tipps & Best Practices
- • Verwende Base64 nur für kleine Bilder unter 10 KB. Größere Bilder sollten als separate Dateien eingebunden werden.
- • Base64 erhöht die Dateigröße um circa 33%. Nutze es gezielt für kritische Ressourcen, die sofort geladen werden müssen.
- • Der Reverse-Modus ermöglicht es dir, Base64-Strings zurück in Bilddateien zu konvertieren.
- • SVG-Dateien eignen sich besonders gut für Base64, da sie oft sehr klein sind und gut komprimiert werden können.