Base64 Bild-Encoder

Konvertieren Sie Bilder sofort in Base64-Strings. Betten Sie Bilder direkt in HTML, CSS oder JSON ein. Kein Server-Upload erforderlich - sicher und schnell.

Eingabe

Supports PNG, JPG, GIF, SVG, WebP, BMP

Verwandeln Sie Ihre Bilddateien in Base64-kodierte Strings. Mit diesem Tool können Sie Bilder direkt in Ihren HTML-, CSS- oder JSON-Code einbetten, HTTP-Anfragen reduzieren und die Dateiverwaltung vereinfachen.

Was ist Base64-Bildkodierung?

Base64-Bildkodierung ist eine Methode zur Umwandlung von binären Bilddaten in eine Textzeichenfolge unter Verwendung des Base64-ASCII-Zeichensatzes. Dies ermöglicht es Ihnen, Bilddaten direkt in textbasierte Dateien wie HTML, CSS oder JSON einzubetten, anstatt auf eine externe Bilddatei zu verlinken.

So funktioniert der Base64-Bild-Encoder

Die Dateiauswahl übergibt Ihr Bild an den FileReader des Browsers, der eine Data-URL der Form data:<mime>;base64,<Nutzdaten> zurückgibt — RFC 2397 um Base64 nach RFC 4648. Nichts verlässt Ihren Rechner. Das Werkzeug trennt die Zeichenkette am ersten Komma: Der Kopf liefert den vom Browser erkannten MIME-Typ, und die Länge der Nutzdaten mal 3/4 ergibt die dekodierte Bytegröße, angezeigt in KB. Die Abmessungen stammen aus dem Laden der Zeichenkette in ein unsichtbares Image-Element, dessen Breite und Höhe ausgelesen werden; was der Dekoder nicht vermessen kann, meldet „Unknown dimensions“. Dieselbe Data-URL wird anschließend in ein <img>-Tag und eine CSS-Regel background-image eingesetzt.

Hauptmerkmale

Clientseitige Verarbeitung: Ihre Bilder werden niemals auf einen Server hochgeladen.
Unterstützt alle gängigen Bildformate (PNG, JPG, GIF, SVG, WebP).
Generiert gebrauchsfertige HTML- und CSS-Schnipsel.
Zeigt Dateigröße und Abmessungen an.
Sofortige Konvertierung.

Wie man es benutzt

1

Klicken Sie auf die Dateieingabe oder ziehen Sie ein Bild hinein.

2

Warten Sie auf die sofortige Verarbeitung der Konvertierung.

3

Kopieren Sie den rohen Base64-String, das HTML <img>-Tag oder die CSS-Hintergrundeigenschaft.

4

Fügen Sie den Code in Ihr Projekt ein.

Häufige Fehler

Kodierung sehr großer Bilder: Base64 erhöht die Dateigröße um ca. 33%, was das Laden der Seite verlangsamen kann.
Bilder vor der Kodierung nicht optimieren: Komprimieren Sie Ihre Bilder immer zuerst.
Base64 für alles verwenden: Es ist am besten für kleine Icons, Logos oder kritische UI-Elemente geeignet.

Anwendungsfälle

Einbetten kleiner Icons in CSS, um zusätzliche HTTP-Anfragen zu vermeiden.
Einfügen von Bildern in eigenständige HTML-Dateien (z. B. E-Mail-Signaturen).
Speichern von Bilddaten in JSON oder Datenbanken.
Schnelle Vorschau von Bilddaten.

Siehe auch

  • Bildgrößenänderung — Verkleinern Sie das Bild vor der Kodierung — Base64 bläht es um rund ein Drittel auf, ein kleineres Original hält die Data-URL handhabbar.
  • Base64-Encoder — Nutzen Sie ihn, wenn die Nutzdaten reiner Text statt einer Datei sind, oder um eine Base64-Zeichenkette wieder zu dekodieren.

FAQ

Erhöht Base64 die Dateigröße?

Ja, die Base64-Kodierung erhöht die Dateigröße in der Regel um etwa 33% im Vergleich zur ursprünglichen Binärdatei.

Ist es sicher?

Ja, die Konvertierung erfolgt vollständig in Ihrem Browser. Ihre Bilder werden an keinen Server gesendet.

Wann sollte ich Base64-Bilder verwenden?

Verwenden Sie sie für kleine Bilder wie Icons, Logos oder wenn Sie eine einzelne eigenständige Datei benötigen. Vermeiden Sie sie für große Fotos.