Zum Hauptinhalt springen

Bild → Base64 Konverter

Konvertieren Sie Bilddateien in Base64-Strings. Generieren Sie Base64-Code, der direkt in HTML und 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 Dateien auszuwählen
  • Drag & Drop Unterstützung
  • Unterstützt bis zu 10 MB

🖼️ Vorschau​

  • Sofortige Vorschau des hochgeladenen Bildes
  • Anzeige von Bildinformationen (Größe, Auflösung, Typ)
  • Berechnung der Base64-Datengröße

💻 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 konvertiert. Wenn Sie ein Bild in Base64 kodieren, können Sie es direkt in HTML oder CSS einbetten.

Normales Bild vs. Base64​

Herkömmliche Methode:

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

Base64-Methode:

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

Vorteile​

✅ Reduzierte HTTP-Anfragen​

  • Kein zusätzlicher Datei-Download erforderlich
  • Kürzere Seitenladezeiten (bei kleinen Bildern)

✅ Alles in einer Datei​

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

✅ Kein CDN/Hosting erforderlich​

  • Kein Bildhosting-Server erforderlich
  • Eliminiert externe Abhängigkeiten

✅ Sofort einsatzbereit​

  • Sofort renderbar
  • Keine Caching-Probleme (bei kleinen Dateien)

Nachteile​

❌ Erhöhte Dateigröße​

  • Base64 erhöht die Größe um etwa 33% gegenüber dem Original
  • Nicht geeignet für große Bilder

❌ Kein Browser-Caching​

  • Wird jedes Mal mit dem HTML übertragen
  • Schlechtere Wiederverwendbarkeit

❌ Verminderte Code-Lesbarkeit​

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

❌ Keine CSS-Sprites möglich​

  • Bildkombinationstechniken können nicht verwendet werden

Wann sollte man es verwenden?​

✅ Geeignete Fälle​

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

    • UI-Icons
    • Aufzählungszeichen
    • Kleine Logos

  2. Einzelne HTML-Dateien

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

  3. Wenn sofortige Anzeige erforderlich ist

    • 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-relevante Bilder

    • Produktbilder
    • Blog-Post-Bilder

Unterstützte Formate​

  • JPG/JPEG: Geeignet für Fotos
  • PNG: Unterstützt transparente Hintergründe
  • GIF: Unterstützt Animationen
  • 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;
}

Responsive Bilder​

<picture>
  <source
    media="(min-width: 768px)"
    srcset="data:image/png;base64,..."
  />
  <img src="data:image/png;base64,..." alt="Beschreibung" />
</picture>

Optimierungstipps​

1. Bildkomprimierung​

Komprimieren Sie Bilder vor der Base64-Konvertierung:

  • TinyPNG
  • ImageOptim
  • Squoosh

2. Passendes Format wählen​

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

3. Größenanpassung​

Verwenden Sie nur die benötigte Größe:

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

4. Lazy Loading in Betracht ziehen​

Anstatt Base64 direkt zu verwenden:

// Nur bei Bedarf laden
const base64 = 'data:image/png;base64,...';
img.src = base64;

Sicherheitsüberlegungen​

⚠️ Vorsicht vor XSS-Angriffen​

Beim Empfang von Bildern von Benutzern:

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

⚠️ CSP (Content Security Policy)​

Base64-Bilder in der CSP img-src-Richtlinie:

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

Verwandte Tools​

💬 War dieses Tool hilfreich?​

Senden Sie uns jederzeit gerne Ihr Feedback oder Ihre Vorschläge!

Datenschutz​

Alle Dateikonvertierungen werden lokal in Ihrem Browser durchgeführt. Ihre Bilder werden nicht auf unsere Server hochgeladen.