Bild zu Base64 Konverter

Funktionen

• Bidirektionale Konvertierung: Bild → Base64-Kodierung und Base64 → Bild-Dekodierung auf einem Bildschirm
• Mehrere Formate: Unterstützt JPG, PNG, WebP, GIF, BMP und SVG
• Sofortige data URI: Gibt eine sofort einsatzbereite data URI für HTML img src oder CSS background-image aus

Anleitung

1. Bild hochladen: Bild in das linke Panel ziehen oder per Schaltfläche auswählen
2. Ergebnis kopieren: Gesamte data URI oder nur den Base64-Teil kopieren
3. Base64 → Bild: Base64-String im rechten Panel einfügen, um das Bild wiederherzustellen

Anwendungsfälle

• HTML-Einbettung: data URI in img src verwenden, um Bilder ohne Serveranfrage anzuzeigen
• CSS-Hintergrund: Bilder direkt per background-image: url(data:...) in CSS einbetten
• API-Payload: Bilddaten als Base64 in REST APIs oder JSON-Payloads einbinden
• Debugging: Base64-kodierte Bilddaten schnell visualisieren

Code-Beispiele

Die generierte data URI kann direkt in HTML oder CSS eingefügt werden.

HTML

<!-- data URI direkt in img src einbetten -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...==" alt="Bild">

<!-- Zusammen mit dem picture-Element -->
<picture>
  <source srcset="data:image/webp;base64,UklGRiAA...==" type="image/webp">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...==" alt="Bild">
</picture>

CSS

/* data URI als background-image */
.thumbnail {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...==");
  background-size: cover;
  background-position: center;
}

/* In der content-Eigenschaft verwenden */
.icon::before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxu...==");
}