Bild zu Base64 Konverter

Der Bild zu Base64 Konverter ist ein kostenloses Online-Tool, das jedes Bild in eine Base64-kodierte Zeichenfolge umwandelt. Die Base64-Kodierung wandelt binäre Bilddaten in einfachen ASCII-Text um, sodass Sie Bilder direkt in HTML, CSS, JavaScript, JSON, XML und mehr einbetten können – ohne eine separate Bilddatei zu benötigen. Alles geschieht in Ihrem Browser: Ihre Bilder werden niemals auf einen Server hochgeladen.

Was ist die Base64-Bildkodierung?

Base64 ist ein Binär-zu-Text-Kodierungsschema, das binäre Daten unter Verwendung von 64 ASCII-Zeichen (A–Z, a–z, 0–9, +, /) darstellt. Bei der Anwendung auf Bilder wandelt Base64 die rohen Bildbytes in eine lange Textzeichenfolge um, die direkt in den Quellcode eingebettet werden kann. Der häufigste Weg, Base64-Bilder in der Webentwicklung zu verwenden, sind Daten-URIs – ein Schema, das Inline-Daten in URLs mit dem Format data:[MIME-Typ];base64,[kodierte Daten] ermöglicht.

Wann man Base64-Bilder verwendet

Wann man Base64-Bilder NICHT verwenden sollte

Die Base64-Kodierung erhöht die Dateigröße um etwa 33 %. Verwenden Sie für große Bilder (Fotos, Banner) herkömmliche Bilddateien, die über HTTP/2 bereitgestellt werden, das Multiplexing unterstützt. Vermeiden Sie Base64 für Bilder, die größer als 10–20 KB in der Produktion sind, da der Größen-Overhead den Vorteil weniger HTTP-Anfragen überwiegt. Große Base64-Zeichenfolgen können vom Browser auch nicht separat zwischengespeichert werden.

Unterstützte Bildformate

So verwenden Sie dieses Tool

1. Laden Sie Ihr Bild hoch: Ziehen Sie eine Bilddatei per Drag-and-Drop in den Upload-Bereich, klicken Sie, um Dateien zu durchsuchen, oder fügen Sie ein Bild mit Strg+V (Cmd+V auf dem Mac) aus Ihrer Zwischenablage ein.
2. Vorschau und Metadaten prüfen: Das Tool zeigt sofort eine Vorschau Ihres Bildes mit Metadaten wie Dateiname, Abmessungen, MIME-Typ und einem visuellen Größenvergleich zwischen den Original- und den kodierten Daten an.
3. Wählen Sie Ihr Ausgabeformat: Wechseln Sie zwischen vier Ausgabe-Tabs – Raw Base64 (nur die kodierte Zeichenfolge), Daten-URI (mit MIME-Präfix), HTML-<img>-Tag (fertig zum Einfügen) oder CSS-background-image-Eigenschaft.
4. Kopieren Sie das Ergebnis: Klicken Sie auf die Schaltfläche "⧉ Kopieren", um die kodierte Ausgabe in Ihre Zwischenablage zu kopieren und in Ihren Code einzufügen.

Leitfaden für Ausgabeformate

Raw Base64-Zeichenfolge

Der reine Base64-kodierte Text ohne Präfix. Verwenden Sie dies, wenn Sie die Rohdaten für benutzerdefinierte Implementierungen, API-Aufrufe benötigen oder das MIME-Präfix selbst hinzufügen möchten.

Daten-URI

Der vollständige Daten-URI einschließlich des MIME-Typ-Präfixes (z. B. data:image/png;base64,iVBOR...). Dies ist das vielseitigste Format – es funktioniert direkt in HTML-src-Attributen, CSS-url()-Werten und beim Laden von Bildern in JavaScript.

HTML <img>-Tag

Ein gebrauchsfertiges HTML-Bildelement mit dem Base64-Daten-URI als src sowie width- und height-Attributen für das korrekte Layout. Fügen Sie es direkt in Ihr HTML ein.

CSS background-image

Eine vollständige CSS-Eigenschaftsdeklaration mit background-image: url('data:...'). Fügen Sie es einer beliebigen CSS-Regel hinzu, um das Bild als Hintergrund ohne externe Dateireferenz zu verwenden.

Privatsphäre & Sicherheit

Dieses Tool verarbeitet alles lokal in Ihrem Webbrowser unter Verwendung der JavaScript FileReader-API. Ihre Bilder werden niemals hochgeladen, niemals gespeichert und niemals über das Netzwerk übertragen. Die Base64-Konvertierung findet vollständig auf Ihrem Gerät statt, was dieses Tool sicher für sensible und vertrauliche Bilder macht.

Häufig gestellte Fragen

Was ist die Base64-Kodierung für Bilder?

Die Base64-Kodierung wandelt binäre Bilddaten in ASCII-Textzeichen um. Dies ermöglicht es Ihnen, Bilder als Daten-URIs direkt in HTML-, CSS- oder JavaScript-Code einzubetten, wodurch separate Bilddateianfragen entfallen. Die kodierte Zeichenfolge ist etwa 33% größer als die ursprünglichen Binärdaten.

Wann sollte ich Base64-kodierte Bilder verwenden?

Verwenden Sie Base64 für kleine Bilder wie Icons, Logos und UI-Elemente (normalerweise unter 10 KB). Es reduziert die Anzahl der HTTP-Anfragen und vereinfacht die Bereitstellung. Vermeiden Sie es für große Bilder, da die Größenzunahme von 33% die Leistung beeinträchtigt. Es ist auch nützlich für E-Mail-Vorlagen, Ein-Datei-HTML-Dokumente und CSS-Hintergrundbilder.

Wird mein Bild auf einen Server hochgeladen?

Nein. Dieses Tool verarbeitet Bilder vollständig in Ihrem Browser mithilfe der JavaScript FileReader-API. Ihre Bilder verlassen niemals Ihr Gerät, was vollständige Privatsphäre und Sicherheit gewährleistet. Die Konvertierung erfolgt sofort auf Ihrem Computer.

Welche Bildformate werden unterstützt?

Dieser Konverter unterstützt alle gängigen Bildformate einschließlich PNG, JPEG, GIF, WebP, SVG, BMP und ICO. Das Tool erkennt automatisch den MIME-Typ und generiert das korrekte Daten-URI-Präfix für jedes Format.

Was ist der Unterschied zwischen einer Base64-Zeichenfolge und einem Daten-URI?

Eine Base64-Zeichenfolge ist lediglich die kodierte Textdarstellung der Bilddaten. Ein Daten-URI enthält ein Präfix mit dem MIME-Typ (wie data:image/png;base64,), gefolgt von der Base64-Zeichenfolge. Daten-URIs können direkt in HTML-src-Attributen und CSS-url()-Werten verwendet werden.

Zusätzliche Ressourcen

• Daten-URLs - MDN Web Docs
• Base64-Kodierung - MDN Web Docs
• Base64 - Wikipedia