Leitfaden zur Tool-Nutzung

Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.

Wichtige Fakten

Kategorie: Development
Eingabetypen: file, select, text
Ausgabetyp: text
Sample-Abdeckung: 4
API bereit: Ja

Ü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.

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.

So funktioniert es

1Laden Sie die gewünschte Datei über das Upload-Feld hoch (maximal 10 MB).
2Wählen Sie die gewünschte Kodierung wie Base64, URL-kodiert oder Roh aus.
3Wählen Sie das passende Ausgabeformat wie Data URI, HTML-Tag, CSS oder Markdown.
4Kopieren 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.

Beispiele

1. SVG-Icon direkt in CSS einbetten

Frontend-Entwickler

Hintergrund

Ein Entwickler möchte ein SVG-Icon als Hintergrundbild in einer CSS-Klasse verwenden, ohne eine separate Bilddatei auf den Server hochzuladen.

Aufgabe

Vermeidung eines zusätzlichen HTTP-Requests für ein kleines Icon.

Verwendung

Er lädt die SVG-Datei hoch, wählt als Kodierung 'URL-kodiert (Prozent)' und als Ausgabeformat 'CSS background'.

encoding: 'url', outputFormat: 'css'

Ergebnis

Er erhält einen fertigen CSS-Schnipsel mit der URL-kodierten SVG-Ressource, den er direkt in sein Stylesheet einfügen kann.

2. Schriftart in Stylesheet integrieren

Web-Designer

Hintergrund

Eine benutzerdefinierte WOFF2-Schriftart soll geladen werden, ohne dass es beim Seitenaufruf zu sichtbaren Verzögerungen beim Textrendering kommt.

Aufgabe

Verhindern von Layout-Verschiebungen durch verzögertes Laden externer Schriftdateien.

Verwendung

Er lädt die WOFF2-Datei hoch, wählt 'Base64 (Standard)' und das Ausgabeformat 'Nur Data URI'.

FAQ

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.

encoding: 'base64', outputFormat: 'data-uri'

Data-URI-Generator

Dieses Tool ausführen

Beispiele zu diesem Tool

Mit verwandten Tools und Themen fortfahren

Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.

Wichtige Fakten

Überblick

Wann verwenden

So funktioniert es

Anwendungsfälle

Beispiele

1. SVG-Icon direkt in CSS einbetten

2. Schriftart in Stylesheet integrieren

FAQ

Web TypeScript Bildverarbeitungsbeispiele

Web Rust Bildverarbeitungsbeispiele

PDF-Beispiele

WebRTC Echtzeitkommunikation Beispiele

Bildsequenz zu Video

Bildpartikel-Musikvisualisierung

PDF Kontaktbogen

Storyboard-Bogen PDF