Die Ergebnisse dienen nur zu Informationszwecken und können Fehler enthalten. Bitte überprüfen Sie wichtige Informationen unabhängig. Die Nutzung dieses Tools erfolgt auf eigene Gefahr.
Was dieses Tool macht
Der Bild-zu-Base64-Konverter macht aus einer Bilddatei eine Data-URL: eine einzige Textzeile, die mit data:image/png;base64, (oder dem Typ Ihrer Datei) beginnt, gefolgt von den Base64-kodierten Bildbytes. Wählen Sie ein PNG, JPG, GIF, SVG, WebP oder ein beliebiges anderes Bild, und der Text erscheint samt Vorschau, bereit zum Kopieren.
Die Datei wird mit dem FileReader des Browsers gelesen und daher nie hochgeladen. Eine Data-URL lässt sich überall dort verwenden, wo eine normale Bildadresse funktioniert: in einem <img src>, in CSS mit background-image: url(...), in einer JSON-Payload oder in einer E-Mail-Vorlage. Base64 macht die Daten etwa ein Drittel größer als die Originaldatei, daher eignet es sich am besten für kleine Bilder.
Wann Sie es verwenden
- Sie betten ein kleines Icon oder Logo in CSS ein, damit die Seite einen Request weniger stellt.
- Sie packen ein Bild in eine einzelne, eigenständige HTML-Datei, etwa einen Bericht oder eine Demo.
- Sie senden ein Bild in einem JSON-API-Request, der keine Multipart-Uploads akzeptiert.
- Sie fügen ein Inline-Bild in eine HTML-E-Mail-Signatur oder ein Test-Fixture ein.
Beispiel
Eingabe
pixel.png (1 × 1 px, blau, 69 Byte)Ausgabe
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mOwbvoGAAKvAbSJsn7VAAAAAElFTkSuQmCCFragen zu diesem Tool
Warum ist der Base64-Text größer als mein Bild?
Base64 schreibt je 3 Bytes als 4 Textzeichen, das Ergebnis ist also rund 33 % größer als die Datei. Aus einem 30-KB-Bild werden etwa 40 KB Text. Gzip- oder Brotli-Kompression auf dem Server holt einen Teil davon wieder herein.
Wann sollte ich ein Bild nicht inline einbetten?
Verzichten Sie darauf bei großen Fotos und bei Bildern, die auf vielen Seiten verwendet werden. Eine normale Bilddatei wird vom Browser einmal gecacht, ein Inline-Bild dagegen mit jeder HTML- oder CSS-Datei, die es enthält, erneut heruntergeladen.
Wie verwende ich das Ergebnis in CSS?
Setzen Sie es in url(): background-image: url("data:image/png;base64,...");. Bei SVG-Icons ist ein URL-kodiertes SVG oft kleiner als Base64; der URL-Encoder kann es vorbereiten.
Wie mache ich aus Base64 wieder ein Bild?
Fügen Sie die vollständige Data-URL in die Adressleiste des Browsers ein und speichern Sie das Bild, oder dekodieren Sie den Teil nach dem Komma mit dem Base64-Decoder, wenn Sie die rohen Bytes brauchen.
Ist dieses Tool kostenlos?
Ja, es ist kostenlos. Ohne Anmeldung und ohne E-Mail. Ergebnisse direkt auf dieser Seite.
Wie erhalte ich mein Ergebnis?
Nutze das Tool auf dieser Seite. Das Ergebnis erscheint hier und wird nicht per E-Mail zugestellt.