AnwendungsfälleBeispiele

Wie verwendet man Base64-Bilder?

Hier findest du die häufigsten Anwendungsfälle mit direkt kopierbaren Beispielen. Ersetze einfach die Werte durch dein eigenes Ergebnis.

Du erhältst zwei Formate: Data URL (mit MIME-Präfix) und rohes Base64 (ohne Präfix)

Data URL (empfohlen)

data:image/png;base64,QUJDZA==

Rohes Base64

QUJDZA==

Direkte Anzeige im Web (HTML)

Geeignet für schnelle Vorschauen, statische Seiten oder Szenarien ohne zusätzliche Ressourcen-Hosts

<img
  src="data:image/png;base64,QUJDZA=="
  alt="Base64 Image"
  width="240"
/>

Als Hintergrundbild verwenden (CSS)

Ideal für Icons, Platzhalter und kleine dekorative Grafiken – reduziert zusätzliche HTTP-Anfragen

.banner {
  background-image: url("data:image/png;base64,QUJDZA==");
  background-size: cover;
  background-position: center;
}

API- / JSON-Übertragung

Geeignet für Debugging, Prototypen oder temporäre Übertragung. Für große Bilder im Produktivbetrieb nicht empfohlen.

{
  "filename": "image.png",
  "mime": "image/png",
  "dataUrl": "data:image/png;base64,QUJDZA=="
}

Wenn das Backend nur rohes Base64 benötigt, übertrage QUJDZA== separat und sende den MIME-Typ getrennt.

Mobile / plattformübergreifende Nutzung (Beispiele)

Jede Laufzeitumgebung mit Base64-Unterstützung kann dies verwenden. Hier findest du gängige Implementierungen zum schnellen Testen.

import 'dart:convert';
import 'package:flutter/widgets.dart';

final bytes = base64Decode("QUJDZA==");
final image = Image.memory(bytes);

Wann sollte man Base64 vermeiden?

Base64 eignet sich für schnellen Datentransfer – nicht als Ersatz für vollständige statische Ressourcen-Systeme