Data-URI-Generator

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

Click to upload file or drag and drop file here

Maximum file size: 10MB Supported formats: image/png, image/jpeg, image/gif, image/webp, image/avif, image/bmp, image/svg+xml, image/x-icon, image/tiff, audio/mpeg, audio/wav, audio/ogg, audio/flac, video/mp4, video/webm, font/woff, font/woff2, font/ttf, font/otf, application/pdf, text/css, text/javascript, text/plain, text/html, application/json, application/xml, */*

Wichtige Fakten

Kategorie
Entwicklung & Web
Eingabetypen
file, select, text
Ausgabetyp
text
Sample-Abdeckung
4
API verfügbar
Yes

Ü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

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

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.
Problem
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'.
Beispielkonfiguration
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.
Problem
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'.
Beispielkonfiguration
encoding: 'base64', outputFormat: 'data-uri'
Ergebnis
Er kopiert die Base64-kodierte Data-URI und fügt sie direkt in die @font-face-Regel seines CSS ein.

Mit Samples testen

json, xml, html
PDF-Beispiele
Generierte PDF-Beispiele von Tools zwischen 2026-02-01 und 2026-02-10
preferred input family image,pdf,text
image, pdf
WebRTC Echtzeitkommunikation Beispiele
Umfassende WebRTC-Beispiele für P2P Audio/Video-Kommunikation, Datenkanäle, Bildschirmfreigabe und Signalisierungsserver
preferred input family audio,video,text
audio, video
QR-Code-Beispiele
Beispiel-QR-Code-Bilder zum Testen von QR-Code-Lese- und Generierungswerkzeugen
preferred input family image,text,json
image, text
XML-Beispiele
XML (eXtensible Markup Language)-Formatbeispiele von einfachen bis komplexen Strukturen
preferred input family image,text,xml
image, text

Verwandte Hubs

Tools fur Audio-Encoding und Formatkonvertierung
Vergleiche Audioformat-Konvertierung, Bitratenanderungen, Abtastraten-Konvertierung, Codec-Wechsel und Export-Tools in einem Hub.
Tools fur Bildformat-Konvertierung und animierten Export
Vergleiche Bildkonverter fur JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 und animationsgeeignete Exporte in einem Hub.
Tools fur JSON-Austausch und Format-Ubersetzung
Vergleiche JSON-Konvertierungswerkzeuge fur CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN und ahnliche strukturierte Formate in einem Hub.
Textfall-, Encoding- und Normalisierungs-Konvertierungs-Tools
Vergleichen Sie Textfall-Konvertierung, Zeichenbreiten-Konvertierung, Encoding-Konvertierung, Quoted-Printable-Verarbeitung und Inline-Textnormalisierung in einem Hub.

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.

API-Dokumentation

Request-Endpunkt

POST /de/api/tools/data-uri-generator

Request-Parameter

Parameter-Name Typ Erforderlich Beschreibung
file file (Upload erforderlich) Ja -
encoding select Nein -
outputFormat select Nein -
customMime text Nein -

Dateitypparameter müssen erst über POST /upload/data-uri-generator hochgeladen werden, um filePath zu erhalten, dann filePath an das entsprechende Dateifeld übergeben.

Antwortformat

{
  "result": "Processed text content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
Text: Text

MCP-Dokumentation

Fügen Sie dieses Tool zu Ihrer MCP-Server-Konfiguration hinzu: 

{
  "mcpServers": {
    "elysiatools-data-uri-generator": {
      "name": "data-uri-generator",
      "description": "Konvertiert Dateien in Data URIs (Base64 oder prozent-kodiert), um Bilder, Schriftarten und Ressourcen direkt in HTML, CSS oder Markdown einzubetten",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=data-uri-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Sie können mehrere Tools verketten, z.B.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, maximal 20 Tools.

Unterstützt URL-Dateilinks oder Base64-Codierung für Dateiparameter.

Wenn Sie auf Probleme stoßen, kontaktieren Sie uns bitte bei [email protected]