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

<!-- img src에 data URI 직접 삽입 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...==" alt="이미지">

<!-- picture 태그와 함께 사용 -->
<picture>
  <source srcset="data:image/webp;base64,UklGRiAA...==" type="image/webp">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...==" alt="이미지">
</picture>

CSS

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

/* content 속성에 사용 */
.icon::before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxu...==");
}