ENTWICKLER-TOOL

Image to Base64

Konvertiere Bilder (PNG, JPG, GIF, WebP, SVG) in Base64-Data-URLs für HTML, CSS und JSON. Mit Drag & Drop, Live-Vorschau und Download.

Drag & Drop Live-Vorschau Data-URL HTML/CSS/JSON Download

Datenschutz-Garantie: Alle Bilder werden zu 100% lokal in deinem Browser verarbeitet. Es werden keine Daten an Server gesendet. Perfekt für Webentwickler, Designer und Datenschutz-Enthusiasten.

Inhaltsverzeichnis

             Schnellübersicht
            Image to Base64: Bild → Data-URL
Unterstützte Formate: PNG, JPG, GIF, WebP, SVG, BMP
Ausgabe: Data-URL, Base64, HTML, CSS, JSON
Drag & Drop: Datei einfach ins Feld ziehen
Live-Vorschau: Bild direkt sehen
Theorie: Was ist Base64? (Anfängerfreundlich)
Geschichte: Von MIME zu Data-URLs
FAQ: Häufige Fragen zu Base64-Bildern

        

1. Image to Base64 Konverter

Ziehe ein Bild ins Feld oder klicke zum Auswählen – die Umwandlung erfolgt sofort.

Bild hier ablegen

oder klicke zum Auswählen (PNG, JPG, GIF, WebP, SVG, BMP)

Data-URL anzeigen

Zeilenumbrüche (76 Zeichen)

Hintergrund im Preview

Als JPEG komprimieren (85%)

Kein Bild geladen

Dateiname —

Dateityp —

Originalgröße —

Abmessungen —

Base64 Länge —

Overhead —

Base64-Ausgabe

// Lade ein Bild hoch, um die Base64-Ausgabe zu sehen

Wussten Sie schon?

Base64 vergrößert Daten um ca. 33% – 3 Bytes werden zu 4 Zeichen.
Die Data-URL ist ein RFC-Standard (RFC 2397) aus dem Jahr 1998.
Ein typisches 1 KB PNG wird zu ca. 1,4 KB als Base64.
Icons bis ca. 5 KB lohnen sich als Inline-Data-URL – das spart HTTP-Requests.
Data-URLs werden vom Browser gecached, wenn sie in CSS-Dateien eingebettet sind.

2. Theorie – Base64 einfach erklärt

Verstehe die Grundlagen von Base64 und Data-URLs – ohne Vorkenntnisse.

Was ist Base64?

Base64 ist eine Kodierung, die binäre Daten in Text umwandelt – mit einem Zeichensatz aus 64 Zeichen:

A-Z (26 Zeichen)
a-z (26 Zeichen)
0-9 (10 Zeichen)
+ und / (2 Zeichen)
= als Padding

"Hi" → "SGk="

Warum braucht man Base64?

Binärdaten können in textbasierten Protokollen Probleme verursachen:

E-Mail: SMTP ist textbasiert (MIME)
HTML/CSS: Bilder direkt einbetten
JSON: Keine Binärdaten erlaubt
URLs: Sonderzeichen vermeiden
XML: Keine Steuerzeichen erlaubt

Ohne Base64: Datenverlust bei Übertragung

Wo wird Base64 eingesetzt?

Base64 begegnet dir in vielen Bereichen:

Web: Data-URLs für Bilder, Fonts
E-Mail: Anhänge (MIME)
JWT: Header & Payload sind Base64URL
HTTP Basic Auth: Benutzer:Passwort
Datenbanken: BLOBs als Text speichern
Kubernetes: Secrets in YAML

JWT: eyJhbGciOiJIUzI1NiJ9...

Tipps für Anfänger

Kleine Bilder: Nur bis ~5 KB einbetten
HTTP-Requests sparen: Weniger Roundtrips
Kein Caching-Problem: Aber keine separate Cache-Steuerung
Vorsicht bei großen Bildern: HTML wird riesig
Keine Verschlüsselung: Jeder kann es dekodieren

Data-URL in CSS: background: url(data:image/png;base64,...)

Wussten Sie schon? Base64 stammt ursprünglich aus der E-Mail-Übertragung (MIME-Standard, 1992). Es wurde entwickelt, damit Binärdaten wie Bilder und Dokumente sicher durch textbasierte SMTP-Server übertragen werden können. Heute ist Base64 allgegenwärtig: JWT-Tokens sind Base64URL-kodiert, Kubernetes Secrets werden als Base64 gespeichert und Data-URLs machen Webseiten schneller, indem sie HTTP-Requests einsparen. Fun Fact: Die 64 Zeichen wurden gewählt, weil sie in allen gängigen Zeichensätzen vorkommen – so funktioniert Base64 weltweit!

3. Bild-Formate im Vergleich

Für die Base64-Einbettung eignen sich verschiedene Formate unterschiedlich gut:

Format	MIME-Type	Transparenz	Empfehlung
PNG	image/png	✅ Ja	Icons, Logos
JPG/JPEG	image/jpeg	❌ Nein	Fotos (klein)
GIF	image/gif	✅ Ja (1 Bit)	Animationen
WebP	image/webp	✅ Ja	Modern, effizient
SVG	image/svg+xml	✅ Ja	Icons (vektor)
BMP	image/bmp	❌ Nein	Nicht empfohlen
ICO	image/x-icon	✅ Ja	Favicon

Wann Base64 NICHT verwenden?

Große Bilder (> 10 KB): Die Data-URL wird unübersichtlich und der HTML/CSS-Code bläht sich auf.
Bilder mit Caching-Vorteil: Externe Bilder können separat gecached werden, Data-URLs nicht.
Häufig genutzte Bilder: Ein externes Bild wird einmal geladen, Data-URLs werden bei jedem Seitenaufruf neu übertragen.
Progressives Laden: Externe Bilder können gestreamt werden, Data-URLs nicht.

4. Geschichte von Base64 und Data-URLs

Von E-Mail-Anhängen zu modernen Web-Anwendungen.

1971

Erste E-Mail

Ray Tomlinson verschickt die erste E-Mail. Textbasierte Kommunikation wird Standard – aber Binärdaten (Bilder, Dokumente) können noch nicht übertragen werden.

1987

MIME wird erfunden

MIME (Multipurpose Internet Mail Extensions) wird eingeführt. Es definiert, wie Anhänge in E-Mails kodiert werden – der Ursprung von Base64.

1992

RFC 1341

RFC 1341 standardisiert MIME und Base64 offiziell. E-Mail-Anhänge werden zum Standard. Base64 wird zur universellen Methode für Binärdaten in Textform.

1998

Data-URLs

RFC 2397 definiert Data-URLs: Bilder und andere Dateien können direkt in HTML/CSS eingebettet werden. Kleine Icons müssen nicht mehr als separate Dateien geladen werden.

2010

Data-URLs im Web

Moderne Browser unterstützen Data-URLs umfassend. Inline-Bilder werden populär – besonders für kleine Icons, Sprites und Loading-Animationen. HTTP-Requests werden eingespart.

2015

JWT (JSON Web Token)

JWT wird populär – Header und Payload sind Base64URL-kodiert (Base64 mit URL-sicheren Zeichen). Wird Standard für moderne Authentifizierung.

Heute

Base64 überall

Base64 ist aus der IT nicht wegzudenken: Data-URLs, JWT, Kubernetes Secrets, HTTP Basic Auth, E-Mail-Anhänge, APIs – überall werden Binärdaten als Text kodiert. Über 1 Milliarde Base64-Kodierungen finden täglich statt.

5. FAQ – Spannende Fragen & Antworten

Häufige Fragen zu Base64-Bildern

Wann sollte ich Base64 für Bilder verwenden?

Base64 lohnt sich nur für kleine Bilder mit bestimmten Anwendungsfällen:

✅ Sinnvoll bei:

Icons & Logos: Bilder unter 5 KB
Favicon: Kleine Icons direkt im HTML
Loading-Spinner: Animation ohne externe Datei
E-Mail-Signaturen: Logos ohne Anhang
Einzelne SVGs: Kleine Vektorgrafiken
GitHub README: Bilder direkt im Markdown

❌ Nicht sinnvoll bei:

Fotos: Zu groß, Base64-Overhead enorm
Hero-Images: Verzögern das Laden
Häufig genutzte Bilder: Besser separat mit Caching
Große Grafiken: Ab 10 KB wird HTML unübersichtlich

Faustregel: Wenn die Data-URL länger als 5 KB ist, verwende lieber eine separate Datei.

Warum wird die Datei durch Base64 größer?

Base64 vergrößert Binärdaten um etwa 33% – das hat mathematische Gründe:

Das Problem:

Ein Byte kann 256 Werte annehmen (0-255)
Base64 nutzt nur 64 Zeichen (A-Z, a-z, 0-9, +, /)
64 = 2⁶ – also können nur 6 Bit pro Zeichen kodiert werden
Aus 8 Bit (1 Byte) werden 6 Bit (Base64-Zeichen)

Die Rechnung:

3 Bytes = 24 Bit
24 Bit ÷ 6 Bit/Zeichen = 4 Base64-Zeichen

Also: 3 Bytes → 4 Zeichen
Overhead = 4/3 = 1,333 → +33%

Beispiel:

Original: 1 KB (1024 Bytes)
Base64: ca. 1,37 KB (1366 Zeichen)
Plus Data-URL-Prefix: ca. 1,4 KB

Padding: Wenn die Datenmenge nicht durch 3 teilbar ist, wird mit = aufgefüllt. Das ist die einzige "Verschwendung" in Base64.

Konsequenz: Ein 100 KB Foto wird zu 133 KB Base64 – daher für große Bilder ungeeignet!

Was ist der Unterschied zwischen Data-URL und Base64?

Die Begriffe werden oft synonym verwendet, sind aber nicht dasselbe:

Aspekt	Base64	Data-URL
Was	Kodierung von Bytes zu Text	Format für URLs
Standard	RFC 4648	RFC 2397
Format	Nur die kodierten Daten	`data:[MIME];base64,DATEN`
Verwendung	Überall (E-Mail, JWT, etc.)	Nur in HTML/CSS/URLs

Beispiele:

Nur Base64:

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFAAH/q842iQAAAABJRU5ErkJggg==

Als Data-URL:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFAAH/q842iQAAAABJRU5ErkJggg==

Faustregel: Base64 ist die Kodierung, Data-URL ist der Container mit Metadaten (MIME-Type).

Ist Base64 sicher? Kann man es verschlüsseln?

Nein, Base64 ist KEINE Verschlüsselung! Das ist ein häufiges Missverständnis:

Was Base64 ist:

Kodierung: Daten werden in ein anderes Format umgewandelt
Umkehrbar: Jeder kann Base64 dekodieren
Kein Schlüssel: Funktioniert ohne Passwort
Kein Schutz: Bietet keinerlei Sicherheit

Was Base64 NICHT ist:

❌ Keine Verschlüsselung
❌ Keine Komprimierung (macht größer!)
❌ Kein Hashing
❌ Kein Sicherheitsmerkmal

Beispiel:

Klartext: "MeinPasswort123"
Base64:   "TWVpblBhc3N3b3J0MTIz"
→ In 1 Sekunde dekodiert!

Wenn du echte Sicherheit brauchst:

Verschlüsselung: AES-256, RSA, ChaCha20
Hashing: SHA-256, bcrypt (für Passwörter)
HTTPS: TLS/SSL für Transport
Signaturen: HMAC, RSA-Signaturen

Warum Base64 trotzdem nützlich ist: Es geht um Kompatibilität, nicht um Sicherheit. Binärdaten können nur so durch textbasierte Protokolle transportiert werden.

Wie funktioniert Base64-Kodierung Schritt für Schritt?

Der Algorithmus ist erstaunlich einfach – hier Schritt für Schritt:

Beispiel: "Man" kodieren

Schritt 1: ASCII-Werte holen

M = 77 = 01001101
a = 97 = 01100001
n = 110 = 01101110

Schritt 2: Alle 24 Bits aneinanderhängen

01001101 01100001 01101110

Schritt 3: In 6-Bit-Gruppen aufteilen

010011 = 19
010110 = 22
000101 = 5
101110 = 46

Schritt 4: In Base64-Zeichen umwandeln

Der Base64-Index ist: A-Z (0-25), a-z (26-51), 0-9 (52-61), + (62), / (63)

→ T
→ W
 → F
→ u

Ergebnis: "TWFu"

Padding: Wenn die Eingabe nicht durch 3 teilbar ist:

"Ma" (2 Zeichen): "TWE=" (1 Padding)
"M" (1 Zeichen): "TQ==" (2 Padding)

Umgekehrt (Dekodieren): Genau umgekehrter Weg – Base64-Zeichen → Index → 6-Bit → 8-Bit → Bytes → ASCII.

Was ist Base64URL und wie unterscheidet es sich?

Base64URL ist eine URL-sichere Variante von Base64:

Zeichen	Standard Base64	Base64URL
62	`+`	`-` (Bindestrich)
63	`/`	`_` (Unterstrich)
Padding	`=`	Weggelassen

Warum Base64URL?

+ und / haben in URLs besondere Bedeutung
+ wird als Leerzeichen interpretiert
/ trennt Pfade
= ist für Query-Parameter problematisch

Verwendung:

JWT (JSON Web Token): Header & Payload
OAuth: Tokens und Codes
URLs: Sichere Kodierung
Dateinamen: Keine Sonderzeichen

Beispiel JWT:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.abc123

Die drei Teile sind durch Punkte getrennt: Header.Payload.Signature – alle Base64URL-kodiert.

Kann ich Base64-Bilder in CSS verwenden?

Ja, absolut! Data-URLs funktionieren in CSS genauso wie externe Bilder:

Als Hintergrundbild:

.icon {
  background-image: url(data:image/png;base64,iVBORw0KGgo...);
  background-size: contain;
  width: 24px;
  height: 24px;
}

Für Pseudo-Elemente (::before / ::after):

.btn::before {
  content: '';
  background: url(data:image/svg+xml;base64,PHN2Zy...);
  width: 16px;
  height: 16px;
}

Für Fonts (WOFF, WOFF2):

@font-face {
  font-family: 'MyFont';
  src: url(data:font/woff2;base64,d09GMgABAAAAA...);
}

Vorteile in CSS:

Weniger HTTP-Requests: Besonders bei vielen kleinen Icons
CSS ist eigenständig: Keine externen Abhängigkeiten
Gut für SVG-Icons: Skalierbar und kompakt

Nachteile:

CSS-Datei wird größer
Kein separates Caching der Bilder
Änderungen erfordern neue CSS-Version

Tipp: Erstelle ein separates CSS für Icons mit Data-URLs, damit sie nicht den Haupt-CSS-Cache invalidieren.

Wie dekodiere ich Base64-Bilder wieder?

Es gibt mehrere Wege, Base64 zurück in ein Bild zu verwandeln:

1. Direkt im Browser anzeigen:

<img src="data:image/png;base64,iVBORw0KGgo...">

Einfach die Data-URL direkt im src-Attribut verwenden. Der Browser dekodiert automatisch.

2. In Linux/Mac (Base64-Tool):

# Base64-String in Datei speichern
echo "iVBORw0KGgo..." > image.b64

# Dekodieren
base64 -d image.b64 > image.png

3. In Python:

import base64

with open('image.b64', 'r') as f:
    b64_data = f.read()

with open('image.png', 'wb') as f:
    f.write(base64.b64decode(b64_data))

4. In JavaScript (Browser):

// Data-URL in Datei umwandeln
fetch(dataUrl)
  .then(res => res.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    // Zum Download anbieten
  });

5. Online-Tools: Base64-Decoder (aber Vorsicht bei sensiblen Daten!).

Format erkennen: Das Präfix verrät den Typ:

data:image/png;base64, → PNG
data:image/jpeg;base64, → JPG
data:image/svg+xml;base64, → SVG

Wie groß ist der Performance-Unterschied?

Die Performance hängt stark von der Bildgröße und der Nutzungshäufigkeit ab:

Szenario 1: Kleine Icons (unter 5 KB)

Data-URL: ⚡ Schneller (weniger HTTP-Requests)
Externe Datei: 1 zusätzlicher Roundtrip pro Icon
Beispiel: 20 Icons = 20 Requests vs. 0 Requests

Szenario 2: Große Bilder (über 10 KB)

Data-URL: ❌ Langsamer (HTML/CSS wird riesig)
Externe Datei: ✅ Schneller (parallel ladbar, gecached)
Problem: Data-URLs blockieren den HTML-Parser

Szenario 3: Wiederholte Nutzung

Data-URL: Wird bei jedem Seitenaufruf neu geladen
Externe Datei: Einmal gecached, danach instant

Faustregeln:

Größe	Empfehlung
< 1 KB	✅ Data-URL
1-5 KB	✅ Data-URL (meist)
5-10 KB	⚠️ Abwägen
> 10 KB	❌ Externe Datei

Moderne Optimierung:

HTTP/2: Viele parallele Requests – kleinere Nachteile für externe Dateien
Critical CSS: Data-URLs im Above-the-Fold-Bereich
Lazy Loading: Externe Bilder für Below-the-Fold

Messen ist besser als schätzen: Nutze Lighthouse oder WebPageTest, um die tatsächliche Performance zu prüfen.

Zusammenfassung

Die wichtigsten Punkte

Base64: Kodierung, keine Verschlüsselung – für Kompatibilität
Overhead: +33% Größe (3 Bytes → 4 Zeichen)
Data-URL: data:[MIME];base64,[DATEN] (RFC 2397)
Empfohlen für: Icons, Logos, SVGs unter 5 KB
Nicht empfohlen für: Fotos, große Bilder, häufige Nutzung
Base64URL: URL-sichere Variante für JWT, OAuth
Formate: PNG (Transparenz), JPG (Fotos), SVG (Vektor), WebP (modern)
Best Practice: Unter 5 KB = Data-URL, darüber externe Datei
Unser Tool: Live-Konvertierung in alle Formate

Weitere Tools

Unicode-Konverter

Konvertiere zwischen Unicode-Zeichen, Codepoints, UTF-8 und HTML-Entities.

Zum Tool

ASCII-Tabelle

Vollständige ASCII-Tabelle mit Dezimal, Hex, Oktal und Binär.

Zum Tool

Hash Generator

MD5, SHA-1, SHA-256 und SHA-512 für Text und Dateien.

Zum Tool

.gitignore Generator

Erstelle .gitignore-Dateien für alle gängigen Sprachen und Tools.

Zum Tool