Bild in Base64 umwandeln
Ein winziges PNG mit 74 Byte kommt als eine einzige Textzeile zurück, die mit data:image/png beginnt, bereit zum Einfügen dort, wo kein externes Bild lädt: in E-Mails, PDFs und Offline-Apps. Der Bildtyp wird aus der Datei selbst gelesen. Kostenlos in Ihrem Browser.
- Kostenlos
- Läuft in Ihrem Browser
- Ohne Anmeldung
- Ihre Daten bleiben auf Ihrem Gerät
Im Browser ausführen – kostenlos
Läuft direkt in Ihrem Browser – kostenlos. Ihre Datei verlässt Ihren Browser nicht und wird an keinen Server übertragen.
Die Umwandlung läuft vollständig im Browser Ihres Geräts, ist unbegrenzt nutzbar und kostet nichts – für Entwickler, die kleine Icons oder Platzhalter inline einbauen wollen.
Wenn das Bild im Dokument mitreisen muss
Manche Umgebungen können ein externes Bild schlicht nicht laden: das E-Mail-Programm, das entfernte Bilder blockiert, der PDF-Generator, der nur eingebettete Daten versteht, die App, die ohne Netz funktionieren soll. Dann muss das Bild als Text im Dokument selbst stecken. Die Idee, Dateien als Text zu verschicken, ist Jahrzehnte älter als das Web: Sie entstand, um Anhänge durch E-Mail-Systeme zu bringen, die nur reinen Text kannten. Sie senden das Bild und erhalten die kodierte Zeile mit der passenden Typangabe am Anfang.
Der Haken und wann es sich nicht lohnt
Base64 macht eine Datei ungefähr ein Drittel größer, und ein eingebettetes Bild kann der Browser nicht getrennt zwischenspeichern wie eine verlinkte Datei. Deshalb gehört die Technik in bestimmte Fälle: das Firmenlogo in einer Transaktions-E-Mail, Unterschrift oder Logo in einer PDF-Rechnung, kleine Symbole einer Offline-App und HTML-Berichte, die als eine einzige Datei ohne kaputte Bilder funktionieren sollen. Auf einer normalen Webseite ist ein direkter Link fast immer die bessere Wahl.
Wofür Base64 im Code sinnvoll ist
Ein Base64-String bettet ein Bild direkt im Quelltext ein, statt es als separate Datei zu laden – das spart eine Anfrage, was sich vor allem bei sehr kleinen Icons, Platzhaltern oder E-Mail-Vorlagen lohnt, bei denen externe Bilder ohnehin oft blockiert werden. Für große Fotos eignet sich der Ansatz dagegen nicht: Der Text wird deutlich größer als die Originaldatei und verlangsamt eher, als er hilft.
So läuft die Umwandlung
Sie laden die Bilddatei hoch, die Funktion liest sie ein und erzeugt daraus den passenden Base64-String samt dem korrekten Data-URI-Präfix für das jeweilige Format. Die Verarbeitung läuft dabei komplett auf Ihrem Gerät, ohne dass die Bilddatei irgendwohin übertragen wird.
Anwendungsfälle
E-Mail-Vorlage mit eingebettetem Logo
Die Bäckerei Hoffmann e. K. aus Leipzig verschickt Bestellbestätigungen mit einem kleinen Logo im Kopfbereich. Als Base64-String eingebettet, zeigt es fast jedes E-Mail-Programm an, auch wenn externe Bilder blockiert sind.
Platzhalter-Icons in einer Webanwendung
Ein Entwicklerteam in Frankfurt am Main bettet wiederkehrende Symbole direkt im CSS ein, statt Dutzende kleiner Icon-Dateien zu laden – kürzere Ladezeit für eine überschaubare Anzahl an Symbolen.
Prototyp ohne eigenen Dateiserver
Stefan Krüger baut einen Prototyp und hat noch keinen Speicherort für Bilddateien eingerichtet. Ein eingebetteter Base64-String funktioniert auch ohne separaten Server – praktisch für die frühe Entwicklungsphase.
Häufige Fragen
Verlässt mein Bild den Browser?
Nein, bei der Nutzung auf der Seite läuft die Umwandlung vollständig auf Ihrem Gerät.
Wann lohnt sich Base64 nicht?
Bei großen Fotos: Der Base64-Text wird rund ein Drittel größer als die Originaldatei. Für Fotos in normaler Größe bleibt ein normaler Bild-Link die bessere Wahl.
Brauche ich ein Konto?
Nein, es gibt derzeit keine Konten – die Browser-Funktion ist ohne Anmeldung nutzbar.
Gibt es ein Limit für die Dateigröße?
Bis zu 15 MB und 12 Megapixel – für die typischen kleinen Icons und Grafiken, für die sich Base64 überhaupt eignet, liegt das weit über dem Bedarf.
Woher weiß das Werkzeug, ob mein Bild ein PNG oder ein JPEG ist?
Es liest den Bildtyp aus dem Inhalt der Datei selbst und nicht aus ihrem Namen. Eine falsch benannte Datei erhält deshalb trotzdem die richtige Kennung am Anfang der Textzeile.
Verwandte Tools
Für Entwickler — API-Zugang
Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.
Endpunkt
Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.
Aufruf aus Ihrem Stack
curl -X POST https://api.kit.forhosting.com/image/to-base64 \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"image":"https://ejemplo.com/imagen.jpg"}'const res = await fetch("https://api.kit.forhosting.com/image/to-base64", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"image": "https://ejemplo.com/imagen.jpg"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/to-base64",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"image": "https://ejemplo.com/imagen.jpg"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/to-base64", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"image":"https://ejemplo.com/imagen.jpg"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"image":"https://ejemplo.com/imagen.jpg"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/to-base64", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"image": "https://ejemplo.com/imagen.jpg"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.to_base64",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.
Preis
Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.
Limits
max_mb | 15 |
max_megapixels | 12 |
Fehler
| HTTP | Code | Bedeutung |
|---|---|---|
401 | unauthorized | Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer). |
402 | insufficient_balance | Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht. |
404 | unknown_type | Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog. |
429 | rate_limited | Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt. |
Technische Hinweise
Diese Funktion wandelt eine Bilddatei in einen Base64-String um, den Sie direkt in HTML, CSS oder JSON einbetten können, ohne eine separate Bilddatei verlinken zu müssen.
So läuft die Umwandlung
Das Ergebnis lässt sich mit einem Klick kopieren oder als Textdatei herunterladen – fertig zum Einfügen in Quelltext, CSS-Eigenschaft oder JSON-Feld.
Kostenlos im Browser, optional per API
Für die normale Nutzung auf der Seite fällt nichts an, auch nicht bei wiederholter Nutzung. Wer die Umwandlung automatisiert in eine Build-Pipeline oder ein Content-Management-System einbinden will, kann dieselbe Funktion per API ansprechen; dort kostet die serverseitige Verarbeitung $0.002 pro Anfrage, weil dann kein Browser eines Endnutzers zur Verfügung steht, der die Umwandlung lokal übernehmen könnte, sondern ein Server die Aufgabe erledigt.
Technische Fragen
In welchem Format kommt das Ergebnis?
Als vollständiger Data-URI mit korrektem Präfix für das jeweilige Bildformat, fertig zum Einfügen in HTML, CSS oder JSON.
Was kostet die Nutzung über die API?
$0.002 pro Anfrage bei serverseitiger Verarbeitung, relevant nur für eine automatisierte Einbindung, nicht für die normale Nutzung im Browser.