Zum Hauptinhalt springen

Bild → Base64 Konverter

Konvertieren Sie Bilddateien in Base64-Strings. Generieren Sie Base64-Code, der direkt in HTML, CSS eingebettet werden kann.

📁

Click or drag and drop an image here

Supports: JPG, PNG, GIF, WebP (Max 10MB)

About Base64 Images

Base64 encoding converts images into text format that can be embedded directly in HTML, CSS, or JSON. This eliminates the need for separate image files and reduces HTTP requests.

Advantages

  • No additional HTTP requests - faster page load
  • Perfect for small icons and logos
  • Works well in email templates
  • Self-contained HTML files

Disadvantages

  • Increases file size by ~33%
  • Cannot be cached separately by browsers
  • Not suitable for large images
  • Makes code less readable

Best Practices

  • Use for small images (icons, bullets) under 10KB
  • Optimize images before converting
  • Consider SVG for vector graphics instead
  • Use traditional image files for photos

Hauptfunktionen​

📤 Einfacher Upload​

  • Klicken Sie, um Datei auszuwählen
  • Drag & Drop unterstützt
  • Unterstützt bis zu 10 MB

🖼️ Vorschau​

  • Sofortige Vorschau des hochgeladenen Bildes
  • Bildinformationen anzeigen (Größe, Auflösung, Typ)
  • Base64-Datengröße berechnen

💻 Code-Snippets​

  • HTML <img>-Tag-Beispiel
  • CSS background-image-Beispiel
  • Ein-Klick-Kopierfunktion

💾 Export​

  • Base64-String kopieren
  • HTML/CSS-Code kopieren

Was ist Base64-Kodierung?​

Base64 ist eine Kodierungsmethode, die Binärdaten in Textformat umwandelt. Wenn Sie ein Bild in Base64 kodieren, können Sie es direkt in HTML oder CSS einbinden.

Normales Bild vs. Base64​

Normale Methode:

<img src="image.png" alt="Bild" />

Base64-Methode:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." alt="Bild" />

Vorteile​

✅ HTTP-Anforderungen reduziert​

  • Kein zusätzlicher Datei-Download erforderlich
  • Seitenladezeit verkürzt (für kleine Bilder)

✅ Abschluss in einzelner Datei​

  • Alles in einer HTML-Datei enthalten
  • Ideal für E-Mail-HTML

✅ Kein CDN/Hosting erforderlich​

  • Kein Bild-Hosting-Server erforderlich
  • Externe Abhängigkeiten entfernt

✅ Sofort verwendbar​

  • Sofortiges Rendering möglich
  • Keine Caching-Probleme (bei kleinen Dateien)

Nachteile​

❌ Dateigröße erhöht​

  • Base64 ist etwa 33% größer als Original
  • Ungeeignet für große Bilder

❌ Browser-Caching nicht möglich​

  • Wird jedes Mal mit HTML gesendet
  • Geringere Wiederverwendbarkeit

❌ Code-Lesbarkeit verringert​

  • HTML/CSS-Code wird länger
  • Wartung schwieriger

❌ CSS-Sprites nicht möglich​

  • Bildkombinationstechnik nicht verwendbar

Wann sollte es verwendet werden?​

✅ Geeignete Fälle​

  1. Icons und kleine Bilder (1-10KB)

    • UI-Icons
    • Aufzählungspunkte
    • Kleine Logos

  2. Einzelne HTML-Datei

    • E-Mail-Vorlagen
    • Offline-HTML-Dokumente
    • Präsentationen

  3. Sofortige Anzeige erforderlich

    • Above-the-fold-Inhalte
    • Wichtige UI-Elemente

❌ Ungeeignete Fälle​

  1. Große Bilder (>50KB)

    • Fotos
    • Hintergrundbilder
    • Banner

  2. Wiederverwendete Bilder

    • Auf mehreren Seiten verwendet
    • Häufig aktualisierte Bilder

  3. SEO-wichtige Bilder

    • Produktbilder
    • Blog-Post-Bilder

Unterstützte Formate​

  • JPG/JPEG: Geeignet für Fotos
  • PNG: Transparenter Hintergrund unterstützt
  • GIF: Animationen unterstützt
  • WebP: Modernes Format

Verwendungsbeispiele​

HTML-Bild​

<img
  src="data:image/png;base64,iVBORw0KGg..."
  alt="Beschreibung"
  width="100"
  height="100"
/>

CSS-Hintergrund​

.element {
  background-image: url('data:image/png;base64,iVBORw0KGg...');
  background-size: cover;
  background-position: center;
}

Optimierungstipps​

1. Bild komprimieren​

Komprimieren Sie das Bild vor Base64-Konvertierung:

  • TinyPNG
  • ImageOptim
  • Squoosh

2. Passendes Format wählen​

  • Fotos: JPG (verlustbehaftet)
  • Icons: PNG (verlustfrei, Transparenz)
  • Einfache Grafiken: SVG (Vektor)

3. Größe anpassen​

Nur in benötigter Größe verwenden:

  • 2x Retina: Doppelte Originalgröße
  • 1x: Tatsächliche Anzeigegröße

Sicherheitsüberlegungen​

⚠️ XSS-Angriff Vorsicht​

Beim Empfang von Bildern von Benutzern:

  • Dateityp validieren
  • Dateigröße begrenzen
  • Content-Type überprüfen

⚠️ CSP (Content Security Policy)​

Base64-Bilder in CSP img-src-Richtlinie:

Content-Security-Policy: img-src 'self' data:;

Verwandte Tools​

💬 War dieses Tool hilfreich?​

Dieses Tool hilft Ihnen, Bilder schnell in Base64 zu konvertieren - perfekt für E-Mail-Vorlagen, Offline-Dokumente und kleine Icons.

Vorteile:​

  • Einfach & Schnell: Sofortige Konvertierung
  • Vorschau: Visuelles Feedback
  • Code-Snippets: Fertige HTML/CSS-Beispiele
  • Kostenlos: Keine Registrierung erforderlich

Datenschutz​

Dieses Tool arbeitet vollständig clientseitig. Ihre Bilder werden nicht auf Server hochgeladen und nur in Ihrem Browser verarbeitet.