Why is the Base64 string larger than the original file?

Base64 encoding represents binary data using only 64 ASCII characters (A-Z, a-z, 0-9, +, /). Since each Base64 character encodes 6 bits of data but takes up 8 bits (1 byte) in text, the encoded output is approximately 33% larger than the original binary file. For example, a 30 KB PNG image becomes roughly 40 KB as a Base64 string. This overhead is the trade-off for being able to embed binary data directly in text formats like HTML, CSS, and JSON.

Is my image uploaded to any server?

No. This tool runs entirely in your browser using the JavaScript FileReader API. Your image file never leaves your device — all encoding is performed client-side. No data is sent to any server, making this tool completely private and safe for sensitive images. You can verify this by disconnecting from the internet and using the tool — it will still work.

What image formats are supported?

This tool supports all common web image formats: PNG, JPEG (JPG), GIF, WebP, SVG, BMP, and ICO. The encoder reads the file's binary data and converts it to Base64 regardless of the image content. The correct MIME type is automatically detected from the file extension and included in the Data URI (e.g., data:image/png;base64,... for PNG files).

Can I use Base64 images in emails?

Yes, but with caveats. Base64-encoded images can be embedded in HTML emails using the Data URI scheme in an img tag's src attribute. This eliminates the need for external image hosting and avoids images being blocked by email clients. However, some email clients (notably older versions of Outlook) may not render Data URI images. For maximum compatibility, keep Base64 images small (under 50 KB original size) and test across target email clients.

Is there a recommended size limit for Base64 images?

For practical use, keep Base64-encoded images under 20-30 KB (original file size). Larger images significantly increase HTML/CSS file size, cannot be cached separately by browsers, and slow down page rendering because the browser must decode the entire string before displaying. For images larger than 30 KB, it's generally better to use a regular image file served via HTTP — the browser can cache it, load it in parallel, and decode it more efficiently.

A Data URI (Uniform Resource Identifier) is a scheme that allows you to embed file data directly in a document instead of linking to an external file. The format is: data:[MIME-type];base64,[encoded-data]. For images, this looks like data:image/png;base64,iVBORw0KGgo... — you can use this string anywhere a URL is expected: in HTML img src attributes, CSS url() values, or JavaScript image sources. Data URIs are defined in RFC 2397.

Bild zu Base64 Encoder

Konvertieren Sie jedes Bild zu Base64-codierter Zeichenfolge. Erhalten Sie einsatzbereite Code-Snippets für HTML <img>, CSS background-image und Markdown. 100% Client-seitig — Ihre Dateien verlassen niemals Ihren Browser.

100% Client-seitig Kein Upload erforderlich Sofortige Codierung Kopieren & Einfügen bereit

Ihr Bild hier ablegenTippen Sie, um Ihr Bild auszuwählen

oder

PNG, JPEG, GIF, WebP, SVG, BMP, ICO

Ihre Dateien verlassen niemals Ihren Browser. Die gesamte Codierung erfolgt Client-seitig — nichts wird auf einen Server hochgeladen.

So codieren Sie Bild zu Base64

Hochladen

Laden Sie Ihr Bild ab oder wählen Sie es aus. Unterstützt PNG, JPEG, GIF, WebP, SVG, BMP und ICO Formate.

Codieren

Ihr Bild wird sofort zu Base64 konvertiert, direkt in Ihrem Browser. Kein Upload erforderlich — Die Codierung erfolgt Client-seitig.

Kopieren

Kopieren Sie den einsatzbereiten Code-Snippet für HTML, CSS oder Markdown. Fügen Sie ihn direkt in Ihr Projekt ein.

Was ist Base64-Bildcodierung?

Base64 ist ein Binär-zu-Text-Codierungsschema, das Binärdaten in eine Folge von ASCII-Zeichen umwandelt. Bei Anwendung auf Bilder transformiert es die rohen Binärdaten in eine Textdarstellung, die 64 Zeichen verwendet (A–Z, a–z, 0–9, +, /) plus das = Padding-Zeichen.

Die codierte Zeichenfolge kann direkt in HTML, CSS, JavaScript, JSON, XML und andere textbasierte Formate eingebettet werden, indem das Data URI Schema verwendet wird. Anstatt ein externes Bilddatei über eine URL zu referenzieren, binden Sie die gesamten Bilddaten inline als data:image/png;base64,... Zeichenfolge ein. Der Browser dekodiert diese Zeichenfolge und stellt das Bild dar, ohne eine zusätzliche HTTP-Anfrage zu stellen.

Base64-Codierung ist in RFC 4648 und das Data URI Schema in RFC 2397 definiert. Beide werden in allen modernen Browsern, E-Mail-Clients und Entwicklungs-Frameworks umfassend unterstützt.

Wann sollten Sie Base64-Bilder verwenden

Base64-codierte Bilder sind in spezifischen Szenarien ideal, in denen die Beseitigung externer Dateiabhängigkeiten wichtiger ist als die Dateigröße:

Inline in HTML — Betten Sie kleine Symbole, Logos oder Dekorationsbilder direkt in Ihren HTML ein. Beseitigt eine zusätzliche HTTP-Anfrage, was die wahrgenommene Ladezeit für kleine Bilder verbessern kann (unter 2–5 KB).
CSS-Hintergründe — Binden Sie kleine Hintergrundmuster, Sprites oder UI-Symbole direkt in Ihr Stylesheet ein. Keine externe Datei zu verwalten, und das Bild wird mit dem CSS ohne separate Anfrage geladen.
E-Mail-Vorlagen — HTML-E-Mails können sich nicht auf externe Bild-Hosting verlassen, die zugänglich sind. Das Einbetten von Bildern als Base64 Data URIs stellt sicher, dass sie angezeigt werden, auch wenn der E-Mail-Client des Empfängers Remote-Bilder blockiert.
Standalone-Anwendungen — Beim Erstellen eigenständiger HTML-Dateien, Dashboards oder Berichte, die offline funktionieren müssen, ermöglicht Base64 das Bündeln aller Bilder in einer Datei.
API-Nutzlasten — Beim Versenden von Bilddaten über JSON-APIs konvertiert Base64-Codierung Binärbilddaten in eine JSON-sichere Zeichenfolge. Häufig in Upload-APIs, Avatar-Systemen und Daten-Pipelines.
Dynamische Bildgenerierung — Server-seitige Skripte, die Bilder laufend generieren, können Base64-Zeichenfolgen statt Verwaltung von temporären Dateien zurückgeben.

Wann Sie Base64-Bilder NICHT verwenden sollten

Base64-Codierung ist nicht immer die richtige Wahl. Hier sind Situationen, in denen reguläre Bilddateien besser sind:

Große Bilder (über 20–30 KB) — Base64-Codierung addiert ungefähr 33% zur Dateigröße. Ein 100 KB Bild wird zu ~133 KB Base64-Text, eingebettet in Ihren HTML oder CSS. Dies erhöht die Dokumentgröße, verlangsamt das Parsen und verschwendet Bandbreite.
Browser-Caching — Externe Bilddateien können vom Browser unabhängig zwischengespeichert werden. Base64-Bilder, die in HTML eingebettet sind, werden jedes Mal neu heruntergeladen, wenn die Seite geladen wird. Eingebettet in CSS werden sie mit dem Stylesheet zwischengespeichert, können aber nicht seitenübergreifend gemeinsam genutzt werden.
Renderleistung — Der Browser muss die Base64-Zeichenfolge zurück in Binärform dekodieren, bevor er rendert. Bei großen Bildern addiert dieser Dekodierungsschritt eine messbare Verzögerung im Vergleich zum direkten Rendern einer zwischengespeicherten Binärdatei.
SEO und Zugänglichkeit — Suchmaschinen können Base64-codierte Bilder für die Bildsuche nicht indexieren. Verwenden Sie ordnungsgemäße <img> Tags mit src URLs für Bilder, die in Bildsuchergebnissen angezeigt werden sollen.
Content Delivery Networks — CDNs sind darauf ausgelegt, statische Assets (einschließlich Bilder) von Edge-Servern in der Nähe des Benutzers bereitzustellen. Base64-inline Bilder umgehen CDN-Vorteile völlig.

Base64 Größen-Overhead

Base64-Codierung erhöht die Dateigröße um ungefähr 33%. Dies ist eine inhärente Eigenschaft der Codierung: Alle 3 Bytes der Binärdaten werden zu 4 Bytes Base64-Text (jedes Base64-Zeichen repräsentiert 6 Bits, besetzt aber 8 Bits in Text). Die genaue Formel ist:

Base64 Größe = ceil(ursprüngliche Größe / 3) × 4

Zur praktischen Referenz:

Ein 1 KB Symbol wird zu ~1,33 KB in Base64 — vernachlässigbarer Overhead
Ein 10 KB Miniatur wird zu ~13,3 KB — immer noch angemessen für Inline-Nutzung
Ein 100 KB Foto wird zu ~133 KB — erwägen Sie stattdessen eine reguläre Datei
Ein 1 MB Bild wird zu ~1,33 MB — verwenden Sie definitiv eine externe Datei

Das optimale Größenbereich für Base64-Bilder ist unter 10–20 KB ursprüngliche Dateigröße. In diesem Bereich kompensiert das Eliminieren einer HTTP-Anfrage oft die Größenzunahme, besonders auf Verbindungen mit hoher Latenz.

Häufig gestellte Fragen

Warum ist die Base64-Zeichenfolge größer als die ursprüngliche Datei?

Base64-Codierung stellt Binärdaten mit nur 64 ASCII-Zeichen dar (A–Z, a–z, 0–9, +, /). Da jedes Base64-Zeichen 6 Daten-Bits codiert, aber 8 Bits (1 Byte) in Text belegt, ist die codierte Ausgabe ungefähr 33% größer als die ursprüngliche Binärdatei. Beispielsweise wird ein 30 KB PNG-Bild zu ungefähr 40 KB als Base64-Zeichenfolge. Dieser Overhead ist der Kompromiss dafür, dass Sie Binärdaten direkt in Textformate wie HTML, CSS und JSON einbetten können.

Wird mein Bild auf einen Server hochgeladen?

Nein. Dieses Tool läuft vollständig in Ihrem Browser mit dem JavaScript FileReader API. Ihre Bilddatei verlässt niemals Ihr Gerät — die gesamte Codierung erfolgt Client-seitig. Keine Daten werden auf einen Server gesendet, was dieses Tool völlig privat und sicher für vertrauliche Bilder macht. Sie können dies überprüfen, indem Sie die Internetverbindung trennen und das Tool verwenden — es funktioniert weiterhin.

Welche Bildformate werden unterstützt?

Dieses Tool unterstützt alle gängigen Web-Bildformate: PNG, JPEG (JPG), GIF, WebP, SVG, BMP und ICO. Der Encoder liest die Binärdaten der Datei und konvertiert sie unabhängig vom Bildinhalt zu Base64. Der korrekte MIME-Typ wird automatisch aus der Dateierweiterung erkannt und im Data URI einbezogen (z.B. data:image/png;base64,... für PNG-Dateien).

Kann ich Base64-Bilder in E-Mails verwenden?

Ja, aber mit Einschränkungen. Base64-codierte Bilder können in HTML-E-Mails mit dem Data-URI-Schema in einem <img> Tag src Attribut eingebettet werden. Dies beseitigt die Notwendigkeit für externes Bild-Hosting und verhindert, dass Bilder von E-Mail-Clients blockiert werden. Jedoch können einige E-Mail-Clients (insbesondere ältere Outlook-Versionen) Data-URI-Bilder möglicherweise nicht rendern. Für maximale Kompatibilität halten Sie Base64-Bilder klein (unter 50 KB Originalgröße) und testen Sie über Ziel-E-Mail-Clients.

Gibt es eine empfohlene Größenbegrenzung für Base64-Bilder?

Für praktische Nutzung halten Sie Base64-codierte Bilder unter 20–30 KB (Originaldateigröße). Größere Bilder erhöhen erheblich die HTML/CSS-Dateigröße, können vom Browser nicht separat zwischengespeichert werden und verlangsamen das Seiten-Rendering, da der Browser die gesamte Zeichenfolge vor der Anzeige dekodieren muss. Für Bilder größer als 30 KB ist es generell besser, eine reguläre Bilddatei über HTTP zu verwenden — der Browser kann sie zwischenspeichern, parallel laden und effizienter dekodieren.

Was ist ein Data URI?

Ein Data URI (Uniform Resource Identifier) ist ein Schema, das es Ihnen ermöglicht, Dateidaten direkt in ein Dokument einzubetten, anstatt auf eine externe Datei zu verlinken. Das Format ist: data:[MIME-type];base64,[encoded-data]. Für Bilder sieht dies wie data:image/png;base64,iVBORw0KGgo... aus — Sie können diese Zeichenfolge überall dort verwenden, wo eine URL erwartet wird: in HTML <img> src Attributen, CSS url() Werten oder JavaScript Bildquellen. Data URIs sind in RFC 2397 definiert.