Data-URL-Extraktor aus HTML

• Sofortige Data-URL-Extraktion aus HTML: Extrahiere alle eingebetteten data:-URIs sofort aus HTML. Füge beliebigen HTML-Code ein und unser Data-URL-Extraktor sucht nach data:-URIs in img src, link href, CSS url(), source srcset, iframe src, script src, a href und object data - ganz ohne manuelle Suche.
• Sichere und private HTML-Verarbeitung: Die gesamte Data-URL-Extraktion aus HTML erfolgt ausschließlich in deinem Browser. Deine HTML-Dokumente, extrahierten URIs und Analyseergebnisse verlassen niemals dein Gerät. Keine Datenübertragung, kein Tracking, keine Anmeldung - vollständige Privatsphäre.
• Data-URL-Extraktor online - keine Installation: Nutze den Data-URL-Extraktor direkt in jedem modernen Browser ohne Downloads, Apps oder Plugins. Mit Aufschlüsselung nach MIME-Typ, Analyse kodierter/dekodierter Größen und Unterstützung für einzelne Dateidownloads.
• Umfassende Analyse und Download-Optionen: Unser Data-URL-Extraktor bietet eine Aufschlüsselung nach MIME-Typ, einen Vergleich kodierter vs. dekodierter Größe, die geschätzte Originaldateigröße, den umgebenden HTML-Kontext für jede Data-URL und Ein-Klick-Download für einzelne Dateien oder alle extrahierten Data-URLs auf einmal.

• Extrahieren eingebetteter Bilder aus HTML-Dateien: Webentwickler nutzen den Data-URL-Extraktor, um base64-kodierte Bilder aus HTML-Dateien zur separaten Optimierung zu extrahieren. Finde alle eingebetteten Bilder, sieh dir ihre MIME-Typen und Größen an und lade jedes Bild einzeln herunter, um es in externe Dateien umzuwandeln - für besseres Caching und kleinere HTML-Nutzlasten.
• Sicherheitsaudit eingebetteter Daten in HTML: Sicherheitsforscher nutzen den Data-URL-Extraktor, um HTML-Dokumente auf eingebettete Daten zu prüfen, die sensible Informationen enthalten könnten. Identifiziere alle data:-URIs, prüfe ihre Inhaltstypen und überprüfe den umgebenden HTML-Kontext, um zu bewerten, ob das Einbetten von Data-URLs angemessen ist oder ob sie externalisiert werden sollten.
• Analyse und Optimierung von HTML-E-Mails: E-Mail-Marketer nutzen den Data-URL-Extraktor, um HTML-E-Mail-Vorlagen zu analysieren, die Bilder als Data-URLs einbetten. Sieh dir den gesamten Anteil der kodierten Größe jeder eingebetteten Ressource an, verstehe die MIME-Typ-Verteilung und entscheide, welche Bilder inline eingebettet und welche extern gehostet werden sollten, für bessere Kompatibilität mit E-Mail-Clients.
• Debugging großer HTML-Nutzlasten: Frontend-Entwickler, die langsam ladende Seiten debuggen, nutzen den Data-URL-Extraktor, um übergroße Data-URLs zu identifizieren, die ihr HTML aufblähen. Das Tool zeigt kodierte und dekodierte Größen für jede Data-URL und hilft so, die eingebetteten Ressourcen mit dem größten Beitrag zum Seitengewicht zu finden.
• Migration von Data-URLs zu externen Assets: Beim Refactoring von HTML zur Verwendung externer Dateien statt eingebetteter Data-URLs nutzen Entwickler den Extraktor, um alle data:-URIs, ihre MIME-Typen und Größen zu katalogisieren. Lade jede Ressource einzeln herunter und ersetze die data:-URI durch eine externe Dateireferenz.
• HTML-Performance- und Größenbudget-Analyse: Performance-Ingenieure nutzen den Data-URL-Extraktor, um zu analysieren, wie viel der Größe eines HTML-Dokuments von eingebetteten Data-URLs im Vergleich zum eigentlichen Markup stammt. Die MIME-Typ-Aufschlüsselung und die Gesamtstatistiken zu kodierter/dekodierter Größe helfen, Größenbudgets durchzusetzen und Optimierungspotenziale zu erkennen.

Data-URLs (auch data:-URIs genannt) sind ein durch RFC 2397 definiertes URL-Schema, das das Einbetten von Daten direkt in HTML-Dokumente ermöglicht, statt auf externe Dateien zu verweisen. Eine Data-URL folgt dem Format: data:[<MIME-Typ>][;base64],<Daten>. Zum Beispiel bettet data:image/png;base64,iVBORw0KGgo... ein vollständiges PNG-Bild als base64-kodierten String direkt in das HTML ein.

Data-URLs werden häufig für kleine Bilder (Symbole, Sprites), Schriftarten (woff2), Inline-SVGs und HTML-E-Mail-Vorlagen verwendet, bei denen externe Ressourcen blockiert werden können. Sie eliminieren zwar HTTP-Anfragen, erzeugen aber durch die base64-Kodierung etwa 33 % Overhead und können vom Browser nicht unabhängig zwischengespeichert werden. Unser Data-URL-Extraktor aus HTML hilft dir, alle eingebetteten data:-URIs zu finden und zu analysieren, ihre Größenauswirkung zu verstehen und zu entscheiden, ob du sie inline behalten oder in externe Dateien migrieren solltest.

1. 1. HTML eingeben: Füge dein HTML-Dokument (oder beliebigen Text mit data:-URIs) in das Eingabefeld ein. Das Tool durchsucht den Inhalt nach 14 gängigen HTML-Mustern, in denen Data-URLs typischerweise vorkommen: img src (Bilder), link href (Symbole, Stylesheets), CSS url()-Deklarationen (Hintergründe, Schriftarten), source srcset (responsive Bilder), iframe src (Inline-Frames), script src (eingebettete Skripte), a href (Download-Links) und object data (Plugins).
2. 2. Extrahieren und analysieren: Für jede gefundene Data-URL parst der Extraktor den MIME-Typ (image/png, text/html, application/pdf usw.), den Kodierungstyp (base64 vs. prozentkodiert), berechnet die kodierte Größe (der vollständige Data-URL-String), die dekodierte Größe (die tatsächlichen Daten nach der Dekodierung) und schätzt die Originaldateigröße (angepasst an den base64-Overhead). Eine Aufschlüsselung nach MIME-Typ zeigt die Verteilung der Inhaltstypen über alle extrahierten URLs.
3. 3. Prüfen und exportieren: Durchsuche die extrahierten Data-URLs in einem Kartenlayout mit farbkodierten MIME-Typ-Kategorien. Jede Karte zeigt die URL-Details, Größeninformationen und den umgebenden HTML-Kontext. Lade einzelne Dateien mit automatisch erkannten Dateiendungen herunter, lade alle Dateien auf einmal herunter oder kopiere alle Data-URL-Strings in die Zwischenablage für die weitere Verarbeitung.

• Kodierte Größe: Die vollständige Bytelänge der Data-URL, wie sie im HTML erscheint, einschließlich des data:-Präfixes, der MIME-Typ-Deklaration, des Kodierungsmarkers (;base64) und der base64- oder prozentkodierten Daten. Dies ist der tatsächliche Beitrag dieser Data-URL zum Gewicht deiner HTML-Seite.
• Dekodierte Größe: Die tatsächliche Binärgröße der Daten nach der Dekodierung aus base64 oder Prozentkodierung. Bei base64-Daten sind das etwa 75 % der kodierten Datenlänge (base64 erweitert Binärdaten um ~33 %). Bei prozentkodierten Daten ist das die dekodierte UTF-8-Stringlänge.
• Geschätzte Originalgröße: Eine Annäherung daran, wie groß die Datei wäre, wenn sie als externe Datei statt als Data-URL eingebettet gespeichert würde. Dies korrigiert den ~33 % base64-Kodierungs-Overhead plus die Metadaten (MIME-Typ, Kodierungsmarker). Das hilft dir, den tatsächlichen Daten-Footprint und die Einsparungen durch Externalisierung von Data-URLs abzuschätzen.
• MIME-Typ-Verteilung: Die Aufschlüsselung der Inhaltstypen über alle extrahierten Data-URLs hilft dir zu verstehen, welche Arten von Daten eingebettet sind - Bilder, Schriftarten, Skripte, Styles oder andere Inhalte - und ihren relativen Beitrag zur gesamten eingebetteten Datengröße.

Der Data-URL-Extraktor ist 100 % kostenlos und ohne Anmeldung. Die gesamte HTML-Analyse erfolgt lokal in deinem Browser - deine HTML-Dokumente, extrahierten Data-URLs und Analyseergebnisse verlassen niemals dein Gerät. Es gibt keine Dateigrößen- oder Nutzungsgrenzen. Das Tool durchsucht 14 verschiedene HTML-Tag-Muster, bietet MIME-Typ-Aufschlüsselung, Analyse kodierter/dekodierter Größen, einzelne und Batch-Downloads und funktioniert nach dem ersten Laden vollständig offline. Nutze es so oft du willst, um HTML-Dokumente mit eingebetteten Data-URLs zu analysieren.