Ueberblick
Dieses Tool wandelt die binären Bilddaten in einen Base64-String um, den du in HTML, CSS, JSON, E-Mails oder Testdaten einfügen kannst. Es ist nützlich, wenn ein Bild als Text transportiert werden soll, etwa in einer Konfiguration, einer Vorlage oder einem Datenbankfeld. Es unterstützt gängige Bildformate, sofern der Browser die Quelle lesen kann. Das Ergebnis kann reines Base64 sein oder eine vollständige Data-URL mit MIME-Präfix wie data:image/png;base64,... .
Anwendungsfaelle
- Logo in einer E-Mail-KopfzeileEin kleines PNG- oder SVG-Logo als Text einbetten, damit es in einer Vorlage ohne externes Hosting verwendet werden kann.
- Bild in JSON speichernEine kleine Grafik oder Miniatur als Base64 in ein JSON-Payload für einen API-Test oder ein lokales Fixture aufnehmen.
- Favicon für einen PrototypenEin kompaktes Favicon in eine Data-URL verwandeln, wenn du für einen Demo-Aufbau keine zusätzlichen Dateien verwalten willst.
- Bild als Text weitergebenDie codierte Grafik in einer Notiz, einem Ticket oder einer Nachricht einfügen, wenn exakt dieselben Bilddaten benötigt werden.
So funktioniert es
- 1
Bild laden oder Data-URL einfügen.
- 2
Der Browser liest die Datei lokal.
- 3
Die Bilddaten werden in Base64 kodiert.
- 4
Ergebnis kopieren und dort einsetzen, wo es gebraucht wird.
Beispiele
PNG-Logo für HTML
Eingabe: Bild: 48×48 PNG, dunkles Logo auf transparentem Hintergrund
Ausgabe: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABX...
Nutze die vollständige Data-URL im img-Tag oder als CSS-Hintergrundbild.
JPEG-Produktvorschau
Eingabe: Bild: 320×240 JPEG, Produktfoto im Freien
Ausgabe: /9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxISEhUTEhIVFhUXFxgYGBgYGBcYFxgXFxgYGBgYFxgYHSggGBolGxgXITEhJSkrLi4uGB8zODMtNygtLisBCgoKDg0OGhAQGy0lHyUtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLv/AABEIAJ8BPgMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAEBQADBgcBAv/EADsQAAIBAgQDBgQEBgIDAAAAAAECAwQRAAUSITFBBhMiUWEUMnGBkaGxwdHwFCNS8RQjYnKC0eEV/8QAGgEBAAMBAQEAAAAAAAAAAAAAAAECAwQFBv/EACIRAQEAAgICAQUAAAAAAAAAAAABAhEDIRIxBEFRImETcf/aAAwDAQACEQMRAD8A9z2...
Wenn das Zielsystem sein eigenes MIME-Präfix ergänzt, reicht oft nur der nackte Base64-Text.
Kleines SVG-Icon für einen Prototypen
Eingabe: Bild: 24×24 SVG-Icon als Data-URL
Ausgabe: PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+...
Sinnvoll, wenn du eine textbasierte Version eines kleinen Icons brauchst.
FAQ
Muss ich das MIME-Präfix behalten?
Nur wenn du eine vollständige Data-URL brauchst. Wenn die codierten Bytes genügen, kopiere nur den Base64-Teil.
Warum ist die Ausgabe länger als der Dateiname?
Base64 stellt Binärdaten als Text dar, daher ist der String meist länger als die Bilddatei selbst.
Kann ich jede Bild-Data-URL einfügen?
Ja, sofern sie gültig ist und der Browser die eingebetteten Bilddaten lesen kann.
Was ist bei sehr großen Bildern zu beachten?
Sie werden zwar kodiert, aber der Text kann sehr lang und in Code oder Nachrichten unhandlich werden.
Warum beginnt meine Ausgabe nicht mit data:image/... ?
Dann wurde meist nur der Base64-Teil kopiert. Ergänze das MIME-Präfix manuell, wenn du eine vollständige Data-URL brauchst.