# Data-URI-Generator

Konvertiert Dateien in Data URIs (Base64 oder prozent-kodiert), um Bilder, Schriftarten und Ressourcen direkt in HTML, CSS oder Markdown einzubetten

> Kanonische Seite: https://elysiatools.com/de/tools/data-uri-generator

- **Kategorie:** Development

- **Schlagwörter:** data uri, base64, inline, einbetten, bild, schriftart, css, html, data url

## Überblick

Der Data-URI-Generator konvertiert Ihre Dateien wie Bilder, Schriftarten oder Dokumente schnell in Base64- oder prozent-kodierte Data-URIs. Dadurch können Sie Ressourcen direkt in HTML, CSS oder Markdown einbetten, um HTTP-Anfragen zu reduzieren und die Ladezeiten Ihrer Webseiten zu optimieren.

## Eingaben

- **Datei** (file)
- **Kodierung** (select)
- **Ausgabeformat** (select)
- **MIME-Typ** (text): Auto-detected (e.g. image/png). Override only if needed.

## Wann verwenden

- Wenn Sie kleine Bilder, Icons oder Logos direkt in Ihre HTML- oder CSS-Dateien einbetten möchten, um zusätzliche HTTP-Requests zu vermeiden.
- Wenn Sie benutzerdefinierte Schriftarten direkt in ein Stylesheet integrieren wollen, um Layout-Verschiebungen beim Laden der Seite zu verhindern.
- Wenn Sie eigenständige HTML-Dokumente oder E-Mail-Templates erstellen, die alle Medienressourcen offline und ohne externe Abhängigkeiten enthalten müssen.

## Funktionsweise

- Laden Sie die gewünschte Datei über das Upload-Feld hoch (maximal 10 MB).
- Wählen Sie die gewünschte Kodierung wie Base64, URL-kodiert oder Roh aus.
- Wählen Sie das passende Ausgabeformat wie Data URI, HTML-Tag, CSS oder Markdown.
- Kopieren Sie den generierten Data-URI-Code direkt für die Verwendung in Ihrem Projekt.

## Anwendungsfälle

- Einbetten von SVG-Icons direkt in CSS-Dateien als Hintergrundbilder.
- Integration von WOFF2-Schriftarten in Stylesheets für ein schnelles Laden ohne zusätzliche Serveranfragen.
- Erstellung von autarken HTML-E-Mail-Newslettern mit eingebetteten Logos und Grafiken.

## Häufig gestellte Fragen

### Was ist eine Data-URI?

Eine Data-URI ist ein Schema, mit dem Mediendateien direkt als Inline-Daten in Webdokumente wie HTML oder CSS eingebettet werden können, meist mittels Base64-Kodierung.

### Welche Dateitypen werden unterstützt?

Das Tool unterstützt alle gängigen Formate, darunter Bilder (PNG, SVG, WebP), Schriftarten (WOFF2, TTF), Audio- und Videodateien sowie Text- und PDF-Dokumente.

### Gibt es eine Dateigrößenbeschränkung?

Ja, die maximale Dateigröße für den Upload beträgt 10 MB.

### Wann sollte ich die URL-Kodierung anstelle von Base64 verwenden?

Die URL-Kodierung (Prozent-Kodierung) eignet sich besonders für SVG-Dateien, da sie im Klartext lesbar bleiben und im Vergleich zu Base64 oft weniger Speicherplatz beanspruchen.

### Kann ich den MIME-Typ manuell anpassen?

Ja, Sie können das Feld für den MIME-Typ nutzen, um den automatisch erkannten Typ bei Bedarf manuell zu überschreiben.

## Ähnliche Tools

- [Bildsequenz zu Video](https://elysiatools.com/de/tools/image-sequence-to-video): Bilddateien oder ein ZIP mit Frames per natürlicher Dateinamenssortierung in Video konvertieren
- [PDF Kontaktbogen](https://elysiatools.com/de/tools/pdf-photo-contact-sheet): Erstellt Kontaktbogen mit Vorschaubildern, Dateinamen und EXIF
- [Storyboard-Bogen PDF](https://elysiatools.com/de/tools/pdf-storyboard-sheet): Erzeugt Storyboard-Seiten mit Vorschaubild und Notizbereich
- [Wasserzeichen-Opazität-Tool](https://elysiatools.com/de/tools/image-watermark-opacity): Fügen Sie Wasserzeichen mit benutzerdefinierter Opazität zu Bildern hinzu, unterstützt Text- und Bildwasserzeichen mit erweiterten Opazitätskontrollen
- [Batch-Bildkonvertierung](https://elysiatools.com/de/tools/batch-convert): Mehrere Bilder in verschiedene Formate mit Qualitätseinstellungen konvertieren
- [Bild-Bittiefe-zu-PNG-Konverter](https://elysiatools.com/de/tools/image-to-bit-depth-png): Konvertiert Bilder in exakte monochrome, indizierte, Graustufen-, RGB- oder RGBA-PNG-Bittiefen mit Prüfung.
- [PDF-Kopf-/Fußzeilen-Bausteine](https://elysiatools.com/de/tools/pdf-header-footer-snippets): Konvertiert HTML zu PDF und fügt Logo-, Titel- und Datumsbausteine hinzu
- [Bild-Palette zu Design-Tokens](https://elysiatools.com/de/tools/image-to-design-tokens): Extrahiert dominante Farben per k-Means und exportiert sie als CSS-/SCSS-Variablen, Tailwind-Config oder JSON-Tokens mit Namen und Farbskala

## Beispiele

- [Web TypeScript Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/web-image-processing-typescript): Web TypeScript Bildverarbeitungsbeispiele einschließlich Bild-Lesen/Speichern, Skalierung und Formatkonvertierung
- [Web Rust Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/web-image-processing-rust): Web Rust Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung
- [PDF-Beispiele](https://elysiatools.com/de/samples/pdf-samples): Generierte PDF-Beispiele von Tools zwischen 2026-02-01 und 2026-02-10
- [WebRTC Echtzeitkommunikation Beispiele](https://elysiatools.com/de/samples/webrtc-samples): Umfassende WebRTC-Beispiele für P2P Audio/Video-Kommunikation, Datenkanäle, Bildschirmfreigabe und Signalisierungsserver