Image to Base64

ENTWICKLER-TOOL

Image to Base64 Converter

Wandle Bilder in Base64-Code um – ideal für CSS, HTML, JSON und API-Übertragungen. Mit Drag & Drop, Live-Vorschau und Copy-to-Clipboard.

Alle Formate Drag & Drop Live-Vorschau Copy & Download Dark Mode

Hinweis: Dieses Tool dient zu Lern- und Entwicklungszwecken. Alle Verarbeitungen erfolgen lokal in Ihrem Browser – es werden keine Dateien an einen Server gesendet.

Inhaltsverzeichnis

Schnellübersicht

Auf dieser Seite findest du:

  • Image to Base64 Converter: Bilder in Base64-Code umwandeln
  • Drag & Drop: Bilder einfach per Drag & Drop hochladen
  • Live-Vorschau: Sieh das Bild direkt nach dem Hochladen
  • Copy & Download: Code kopieren oder als Datei herunterladen
  • Anwendungsbeispiele: CSS, HTML, JSON, API
  • FAQ: Häufige Fragen zu Base64

1. Image to Base64 Converter

Lade ein Bild hoch und erhalte den Base64-Code – perfekt für die Einbettung in CSS, HTML oder JSON.

Bild hochladen & konvertieren

Klicken oder Datei hier ablegen
Unterstützte Formate: JPG, PNG, GIF, SVG, BMP, WebP
Max. 5 MB

2. Anwendungsbeispiele

Base64-codierte Bilder werden in vielen Bereichen eingesetzt. Hier die wichtigsten Anwendungsfälle:

CSS

Bilder direkt in CSS-Dateien einbetten – reduziert HTTP-Requests.

background-image: url('data:image/png;base64,iVBORw0...');
HTML

Bilder direkt im HTML-Code einbetten – ideal für E-Mails und Templates.

<img src="data:image/jpeg;base64,/9j/4AAQ...">
JSON / API

Bilder über APIs übertragen – perfekt für mobile Apps und Web-Services.

{ "image": "data:image/png;base64,iVBORw0..." }
Datenbanken

Bilder als Text in Datenbanken speichern – ideal für kleine Bilder und Icons.

INSERT INTO images (data) VALUES ('iVBORw0...')

3. Was ist Base64?

Base64 ist eine Kodierung, die binäre Daten in Text umwandelt – ideal für die Übertragung über textbasierte Protokolle.

Was ist Base64?

Base64 ist eine Kodierungsmethode, die binäre Daten (wie Bilder) in einen lesbaren Text umwandelt.

64 Zeichen: A-Z, a-z, 0-9, +, /

Jedes Base64-Zeichen repräsentiert 6 Bits – 3 Bytes werden zu 4 Base64-Zeichen.

Warum Base64?

  • HTTP-kompatibel: Keine Probleme mit Sonderzeichen
  • Kein separater Upload: Bilder sind im Code enthalten
  • E-Mail-Anhänge: MIME-kompatible Kodierung
  • JSON/XML: Einfache Übertragung als Text

Wie funktioniert es?

Die Kodierung erfolgt in 3 Schritten:

  • 1. Binärdaten in 24-Bit-Blöcke aufteilen
  • 2. In 4 × 6-Bit-Blöcke zerlegen
  • 3. In Base64-Zeichen umwandeln

3 Bytes → 4 Base64-Zeichen

Größe & Overhead

Base64-codierte Daten sind etwa 33% größer als das Original.

100 KB Bild → 133 KB Base64

Fazit: Für kleine Bilder (Icons, Logos) ideal – für große Bilder weniger geeignet.

4. Die Geschichte von Base64

Von den Anfängen der E-Mail-Übertragung bis zur modernen Web-Entwicklung:

1987

MIME wird geboren

Der MIME-Standard (Multipurpose Internet Mail Extensions) führt Base64 ein, um Binärdaten als Text zu übertragen.

1990er

Das Web entdeckt Base64

Mit dem Aufkommen des World Wide Web wird Base64 für die Übertragung von Bildern und anderen Binärdaten genutzt.

2000er

Data-URIs in CSS

Data-URIs ermöglichen die Einbettung von Base64-codierten Bildern direkt in CSS und HTML.

2010er

Mobile Apps & APIs

Base64 wird zur Standard-Kodierung für die Übertragung von Bildern in JSON-APIs und mobilen Apps.

Heute

Allgegenwärtig

Base64 ist aus der modernen Web-Entwicklung nicht mehr wegzudenken – von CSS bis zu REST-APIs.

5. FAQ – Häufige Fragen

Häufige Fragen zu Base64

Was ist Base64 und wofür wird es verwendet?

Base64 ist eine Kodierungsmethode, die binäre Daten in Text umwandelt.

Verwendung:

  • Einbettung von Bildern in CSS (background-image: url('data:image/...'))
  • Einbettung von Bildern in HTML (<img src="data:image/...">)
  • Übertragung von Bildern in JSON-APIs
  • E-Mail-Anhänge (MIME)
  • Speicherung von kleinen Bildern in Datenbanken
Welche Bildformate werden unterstützt?

Dieses Tool unterstützt alle gängigen Bildformate:

  • JPEG / JPG: Für Fotos und komplexe Bilder
  • PNG: Für Logos, Icons und transparente Bilder
  • GIF: Für animierte Bilder und einfache Grafiken
  • SVG: Vektorgrafiken (XML-basiert)
  • BMP: Unkomprimierte Bitmap-Bilder
  • WebP: Modernes Format mit guter Kompression

Tipp: Für Web-Anwendungen sind PNG (Logos) und JPEG (Fotos) am weitesten verbreitet.

Wie groß ist der Base64-Overhead?

Base64-codierte Daten sind etwa 33% größer als die Originaldaten.

Beispiel:

  • 100 KB Bild → ~133 KB Base64
  • 1 MB Bild → ~1.33 MB Base64

Empfehlung:

  • Für kleine Bilder (Icons, Logos) ideal
  • Für große Bilder (Fotos) besser als separate Datei
  • Für SVG-Dateien ist der Overhead geringer
Wie verwende ich Base64 in CSS?

In CSS wird Base64 mit url() und dem data:-Prefix verwendet:

.logo {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...');
  width: 100px;
  height: 100px;
}

Tipp: Verwende Base64 für kleine Icons und Logos – für große Bilder besser als separate Datei.

Was ist der Unterschied zwischen Base64 und Data-URIs?

Base64: Die eigentliche Kodierungsmethode, die binäre Daten in Text umwandelt.

Data-URIs: Ein URI-Schema, das Base64-codierte Daten direkt in HTML, CSS oder anderen Dokumenten einbettet.

Beispiel:

data:image/png;base64,iVBORw0KGgoAAAANS...

Data-URIs sind eine praktische Anwendung von Base64 im Web.

Kann ich Base64 auch für andere Dateitypen verwenden?

Ja! Base64 kann für jede Art von Binärdaten verwendet werden:

  • PDFs: data:application/pdf;base64,...
  • Fonts: data:font/woff2;base64,...
  • Audio: data:audio/mpeg;base64,...
  • Video: data:video/mp4;base64,...
  • JSON: {"file": "data:application/json;base64,..."}

Das Prinzip ist immer das gleiche: Binärdaten werden in lesbaren Text umgewandelt.

Warum ist Base64 in JSON-APIs beliebt?

Base64 ist in JSON-APIs beliebt, weil:

  • JSON nur Text unterstützt: JSON kann keine Binärdaten direkt übertragen
  • Einfache Integration: Base64-Strings können einfach in JSON-Objekte eingefügt werden
  • Kein separater Upload: Das Bild wird direkt mit den Daten übertragen
  • Einfaches Caching: Der Base64-String kann wie normaler Text gecacht werden

Nachteil: Die Dateigröße steigt um etwa 33%.

Wie sicher ist Base64?

Base64 ist keine Verschlüsselung! Es ist nur eine Kodierung.

  • Keine Sicherheit: Jeder kann Base64-codierte Daten dekodieren
  • Keine Vertraulichkeit: Die Daten sind im Klartext (nur kodiert)
  • Verwendung: Nur für Datenübertragung, nicht für Sicherheit

Für verschlüsselte Übertragung: Verwende HTTPS und zusätzliche Verschlüsselung (z.B. AES) für sensible Daten.

Zusammenfassung

Die wichtigsten Punkte

  • Base64: Kodierung von Binärdaten in lesbaren Text
  • Anwendungen: CSS, HTML, JSON, E-Mails, Datenbanken
  • Overhead: ~33% größer als das Original
  • Ideal für: Kleine Bilder, Icons, Logos, SVG
  • Nicht ideal für: Große Fotos, Videos, Audio-Dateien
  • Unser Tool: Konvertiert Bilder zu Base64 mit Vorschau und Copy-Funktion
  • Sicherheit: Base64 ist keine Verschlüsselung – für sensible Daten zusätzliche Sicherheit verwenden

Weitere Entwickler-Tools

Unicode-Konverter

Zeichen in Unicode-Werte umwandeln – Hex, Dezimal, Binär, HTML-Entities.

Zum Tool
QR-Code Generator

QR-Codes für URLs, Texte, WiFi, vCards und mehr erstellen.

Zum Tool
Passwort-Generator

Sichere Passwörter mit einstellbarer Länge und Zeichenarten generieren.

Zum Tool
ASCII-Tabelle

Die vollständige ASCII-Tabelle mit Suche, Filter und Dark Mode.

Zum Tool