Data-URI-Handler
Erstellt oder dekodiert Base64-Daten-URIs zum Einbetten von Dateien.
Ueber den Data URI Handler
Der Data URI Handler ermoeglicht es Ihnen, jede Datei in einen Base64-Data URI fuer die direkte Einbettung in HTML, CSS oder JavaScript zu kodieren und bestehende Data URIs zurueck in ihren urspruenglichen Dateiinhalt zu dekodieren. Data URIs folgen dem RFC 2397-Format `data:[<mediatype>][;base64],<data>`, wodurch Assets ohne zusaetzliche HTTP-Anfragen inline eingefuegt werden koennen. Das Inlining kleiner Assets wie SVG-Icons, Schriftarten oder winziger Bilder kann die Seitenladezeit fuer kritische Ressourcen erheblich reduzieren. Alle Kodierungs-, Dekodierungs-, MIME-Typ-Erkennungs- und Dateivorschau-Vorgange finden vollstaendig in Ihrem Browser statt, ohne dass ein Server-Upload erforderlich ist.
So verwenden Sie es
Zum Kodieren laden Sie eine Datei hoch oder fuegen Sie Rohtext ein und waehlen Sie den korrekten MIME-Typ aus dem Dropdown-Menue aus – das Tool generiert die vollstaendige RFC 2397-konforme Data URI-Zeichenkette, die bereit ist, in src-, href- oder url()-Attribute eingefuegt zu werden. Zum Dekodieren fuegen Sie einen bestehenden Data URI in das Eingabefeld ein und klicken Sie auf Dekodieren, um den eingebetteten Inhalt zu extrahieren, Bilder oder SVGs inline vorab anzuzeigen und die Originaldatei herunterzuladen. Die gesamte Verarbeitung erfolgt clientseitig, sodass Ihre Dateien den Browser niemals verlassen.
Häufige Anwendungsfälle
- Frontend-Entwickler, die kleine SVG-Icons, Spinner oder UI-Bilder direkt in HTML oder CSS einbetten, um zusaetzliche HTTP-Anfragen zu eliminieren und die Latenz des kritischen Rendering-Pfads zu reduzieren
- Designer von E-Mail-Vorlagen, die benutzerdefinierte Webfonts und Logo-Bilder als Base64-Data URIs in CSS-Stilbloecke einbetten, um eine konsistente Darstellung in Clients zu gewaehrleisten, die das Laden externer Ressourcen blockieren
- Sicherheitsforscher, die verdaechtige Data URIs in Phishing-HTML-Anhaengen oder verschleierten Skript-Tags dekodieren, um den versteckten Payload-Inhalt aufzudecken
- Webentwickler, die vollstaendig eigenstaendige HTML-Demos in einer einzigen Datei, Offline-Dokumentationsseiten oder portable Tool-Widgets erstellen, die alle Assets inline einbetten
- Autoren von Build-Tools, die Base64-kodierte Hintergrundbild-Data URIs fuer CSS-in-JS-gestylte Komponenten generieren oder inline SVG-Data URIs fuer Icon-Schriftarten erstellen