Bild in Base64 umwandeln
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. 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.
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.
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. Das Ergebnis lässt sich mit einem Klick kopieren oder als Textdatei herunterladen – fertig zum Einfügen in Quelltext, CSS-Eigenschaft oder JSON-Feld. Die Verarbeitung läuft dabei komplett auf Ihrem Gerät, ohne dass die Bilddatei irgendwohin übertragen wird.
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.
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.
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.
Brauche ich ein Konto?
Nein, es gibt derzeit keine Konten – die Browser-Funktion ist ohne Anmeldung nutzbar.
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.
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.
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. |