Bild-zu-Base64-Konverter

Base64 ist eine Schreibweise für Binärdaten als Zeichenkette. Ein so kodiertes Bild lässt sich direkt in HTML (<img src="data:image/png;base64,...">), in CSS (background-image: url(data:...)) oder in JSON einbetten oder an eine API übergeben, ohne die Datei auf einem Server abzulegen.

Base64 brauchen Sie in einigen Fällen: für kleine Icons und Logos inline im CSS (spart HTTP-Anfragen), für E-Mail-Vorlagen mit eingebetteten Bildern (Outlook blockiert externe Bilder standardmäßig), für das Senden von Bildern an APIs (OpenAI Vision, Google Cloud Vision) und für eigenständige HTML-Dateien ohne Abhängigkeiten.

Base64 vergrößert die Daten um rund 33 Prozent (3 Binärbytes werden zu 4 Zeichen). Bei kleinen Bildern bis 10 KB überwiegt der Nutzen der eingesparten Anfragen. Bei großen Fotos über 50 KB sind normale Dateien besser: Base64 würde die Seite vergrößern und das Laden verlangsamen.

Die ganze Kodierung läuft lokal im Browser, die Daten gehen an keinen Server. Ohne Registrierung, ohne Limits, ohne Tracking.

Base64-Kodierung wandelt binäre Bilddaten in einen Textstring um, der 64 druckbare ASCII-Zeichen verwendet (A–Z, a–z, 0–9, +, /). Jeweils 3 Bytes Binärdaten werden zu 4 Base64-Zeichen, was bedeutet, dass der kodierte String etwa 33% größer ist als die Originaldatei.

Der Konverter liest Ihre Bilddatei, kodiert sie als Base64-String und fügt das passende Data-URI-Präfix hinzu (z.B. data:image/png;base64,). Dies erzeugt einen eigenständigen String, der direkt in HTML, CSS oder JSON eingebettet werden kann, ohne eine separate Bilddatei zu benötigen.

Base64-kodierte Bilder werden häufig für kleine Icons, Logos und UI-Elemente verwendet, wo das Einsparen einer zusätzlichen HTTP-Anfrage die Ladezeit verbessert. Die Konvertierung erfolgt vollständig lokal in Ihrem Browser.

Base64 lohnt sich in bestimmten Fällen, ist aber nicht immer die richtige Wahl:

• Base64 passt für – kleine Bilder unter 10 KB (Icons, Logos), E-Mail-Vorlagen mit eingebetteten Bildern, API-Anfragen, die Bilddaten in JSON verlangen, und in sich geschlossene HTML-Dateien.
• Normale Dateien passen für – große Bilder über 50 KB, Hero-Bilder und Fotos auf Websites, Bilder, die der Browser zwischenspeichern soll, und Inhalte aus einem CDN.

Base64 vergrößert die Daten um 33 % und verhindert das Zwischenspeichern im Browser. Für gute Ladezeiten betten Sie nur sehr kleine Grafiken ein und liefern alles andere als normale Dateien mit passenden Cache-Headern aus.