Bild in Base64
Ein Bild in einen Base64-String oder eine data URI umwandeln, die du direkt in CSS oder HTML einfügen kannst.
oder Bilder hierher ziehen
Bis zu 30 MBDeine Bilder werden im Browser verarbeitet und nie hochgeladen- 1Auswählen
Ein Bild auswählen.
- 2Anpassen
Ausgabe wählen: reines Base64, data URI, CSS-Hintergrund oder HTML-img-Tag.
- 3Herunterladen
Mit einem Klick kopieren.
So funktioniert Bild in Base64
Wähle die Form, die du einfügen willst
Die Data-URI passt direkt in src="…" oder in ein CSS-url(). Reines Base64 ist für JSON und Konfigurationsdateien gedacht. Die fertigen Zeilen für CSS background-image und HTML <img> sind da, wenn du einfach etwas Funktionierendes einfügen willst. Ein Klick kopiert die gewählte Form.
Halte es klein
Base64 ist etwa ein Drittel größer als die Datei, die es kodiert, und steckt in deinem HTML oder CSS, statt als eigene Datei im Cache zu liegen. Unter 10 KB lohnt es sich, etwa für kleine Symbole, Platzhalter oder Abstandhalter; ab 50 KB warnt das Werkzeug, weil die Seite dann langsamer zu laden beginnt.
Alternativen, die man kennen sollte
Ein SVG fügt man besser als Markup ein als in Base64: So bleibt es bearbeitbar, lässt sich per CSS gestalten und komprimiert besser. Und alles, was auf mehr als einer Seite auftaucht, ist als normale Bilddatei besser aufgehoben, die der Browser einmal zwischenspeichert und wiederverwendet.
Häufige Fragen
Werden meine Fotos auf einen Server hochgeladen?
Nein. Alles läuft direkt in deinem Browser, deine Fotos verlassen dein Gerät also nie. Wenn du den Tab schließt, bleibt nichts zurück.
Bis zu welcher Bildgröße ist Base64 sinnvoll?
Als Faustregel: unter 10 KB. Base64 ist rund 33 % größer als die Originaldatei, große Bilder einzubetten bremst die Seite also aus.