Heruntergeladene Website ohne Bilder und CSS? Die Lösung
Heruntergeladene Website ohne Bilder und CSS? Finden Sie die Ursache (Filter, CDN, Lazy Loading, JavaScript, 403, file://) und beheben Sie sie gezielt.
Website Downloader 10 Min. Lesezeit
Wenn eine heruntergeladene Website ohne Bilder und CSS angezeigt wird, gibt es zwei grundsätzliche Ursachen. Entweder wurden die Dateien nie geladen, oder sie wurden geladen, aber die Seiten verweisen mit Pfaden auf sie, die offline nicht funktionieren. Dateien fehlen wegen eines Filters, wegen Ressourcen auf einer anderen Domain oder einem CDN, wegen Lazy Loading, JavaScript-Rendering oder einer Sperre durch den Server. Pfade brechen, weil sie root-relativ sind, noch auf die Live-Website zeigen oder unter file:// blockiert werden. Suchen Sie unten Ihr Symptom und wenden Sie dann die passende Lösung für HTTrack, wget, WebCopy oder einen browserbasierten Downloader an.
Schnelldiagnose: Vom Symptom zur Ursache
Bevor Sie Einstellungen ändern, öffnen Sie den heruntergeladenen Ordner und prüfen Sie, ob die fehlenden Dateien tatsächlich vorhanden sind. Öffnen Sie dann die Kopie im Browser, drücken Sie F12 und sehen Sie sich die Tabs Konsole und Netzwerk an. Die fehlgeschlagenen URLs verraten meist direkt die Ursache.
| Was Sie sehen | Wahrscheinlichste Ursache | Abschnitt |
|---|---|---|
| Nur Text, blaue Links, gar kein Layout | CSS nie heruntergeladen (Filter, CDN, .tmp-Dateien) oder root-relative Pfade unter file:// | Dateien nie geladen / Dateien vorhanden, aber Darstellung kaputt |
| Layout stimmt, aber Header-Banner und Abschnittshintergründe sind leer | Bilder, die in CSS-Dateien referenziert werden | CSS-Hintergrundbilder |
| Graue Kästen, Ladekreise oder unscharfe Vorschaubilder statt Fotos | Lazy Loading (data-src, srcset) | Lazy-Loading-Bilder |
| Nur Header und Footer oder eine komplett leere Seite | Inhalt wird per JavaScript erzeugt | React-, Vue- und Angular-Websites |
| Sehr wenige Dateien oder Fehlerseiten als Inhalt gespeichert | 403-Antworten, Rate Limits, Login | Verweigerte Downloads |
| Sieht gut aus, aber ein Klick auf einen Link öffnet die Live-Website | Links wurden nicht umgeschrieben | Dateien vorhanden, aber Darstellung kaputt |
Ein schneller Test: Zeigt die Konsole file:///css/style.css (einen Pfad im Wurzelverzeichnis Ihres Laufwerks), existiert die Datei, wird aber mit einem root-relativen Pfad eingebunden. Zeigt sie https://cdn.irgendwas.com/..., wurde die Datei nie gespeichert, weil sie auf einem anderen Host liegt.
Heruntergeladene Website ohne Bilder und CSS: Dateien wurden nie geladen
Enthält der Ordner nur HTML-Dateien oder sind die Ordner css und images leer, hat der Crawler diese Dateien übersprungen. Dafür gibt es drei übliche Gründe.
Filter und Scan-Regeln, die Ressourcen ausschließen
Ein häufiger Grund, warum HTTrack keine Bilder herunterlädt, ist eine selbst hinzugefügte Scan-Regel, oft aus einem Forenbeitrag kopiert. Regeln wie -* gefolgt von +*.html behalten nur Seiten. HTTrack braucht keine Liste von Dateitypen, um Bilder und Stylesheets derselben Website zu holen. Entscheidend ist der Umfang (Scope): Dateien auf dem Start-Host werden geladen, Dateien anderswo nicht. Wenn Sie Filter hinzugefügt haben, entfernen Sie sie oder erlauben Sie Ressourcen ausdrücklich:
+*.css +*.js +*.png +*.jpg +*.jpeg +*.gif +*.webp +*.svg +*.woff +*.woff2
Starten Sie den Crawl außerdem im Stammverzeichnis der Website (https://example.com/), nicht in einem Unterordner wie /blog/. Der Standard-Modus von HTTrack bleibt unterhalb des Startverzeichnisses, und wgets --no-parent tut dasselbe. Stylesheets in /assets/ oder /wp-content/ können so außerhalb des Crawls landen.
Warum speichert HTTrack .tmp-Dateien statt CSS-Dateien?
Die .tmp-Dateien sind meist Übertragungen, die nie abgeschlossen wurden, oder Dateien, deren Typ HTTrack nicht eindeutig bestimmen konnte. Das passiert, wenn der Server einen fehlenden oder falschen MIME-Typ sendet oder wenn das Stylesheet über eine Skript-URL wie style.php?ver=6 ausgeliefert wird. Lassen Sie den Spiegel vollständig durchlaufen und nutzen Sie dann Continue interrupted download (unterbrochenen Download fortsetzen) oder Update existing download (vorhandenen Download aktualisieren). Liegt es am MIME-Typ, teilen Sie HTTrack mit der Option --assume mit, um welche Datei es sich handelt, zum Beispiel --assume php=text/css, wenn PHP-URLs Stylesheets liefern. Verwenden Sie das nur, wenn das tatsächlich zutrifft.
Bilder und CSS auf einem CDN oder einer anderen Domain
Viele Websites liefern ihre Ressourcen von einem anderen Host aus: cdn.example.com, ein Bilddienst, Google Fonts oder das CDN eines Themes. Standardmäßig verlassen Crawler die Startdomain nicht, deshalb fehlen diese Dateien in der Kopie, obwohl jede Seite heruntergeladen wurde. Das ist die übliche Erklärung für „Website kopiert, aber keine Bilder“.
- HTTrack: Aktivieren Sie Get non-HTML files related to a link (die Option
-n/--near) oder fügen Sie eine Regel wie+cdn.example.com/*hinzu. - wget: Erlauben Sie andere Hosts, aber benennen Sie sie, damit der Crawl nicht quer durchs Web wandert:
wget --mirror --page-requisites --convert-links --adjust-extension --span-hosts --domains=example.com,cdn.example.com https://example.com/ - WebCopy: Tragen Sie die Ressourcen-Domains in die Crawl-Regeln ein oder erlauben Sie das Herunterladen von Ressourcen anderer Hosts, wenn sie von Seiten im Umfang verlinkt sind.
Wenn Sie keine Ressourcen-Hosts aufspüren und keine Filterregeln schreiben möchten, nimmt Ihnen ein Online-Tool diesen Schritt ab. Website Downloader lädt jede Unterseite zusammen mit ihren Bildern, Stylesheets, Skripten, Schriften und Medien herunter und liefert eine einzige ZIP-Datei. Der kostenlose Plan umfasst bis zu 100 Unterseiten, genug, um zu prüfen, ob eine problematische Website vollständig ankommt. Die Vor- und Nachteile im Vergleich zu HTTrack finden Sie im Beitrag HTTrack-Alternative: Website Downloader online ohne Installation.
Warum fehlen CSS-Hintergrundbilder in der Offline-Kopie?
Hier stimmen Layout und Schriften, aber Header-Banner, Abschnittshintergründe und Icons sind leer. Diese Bilder werden nicht im HTML eingebunden. Sie stehen im Stylesheet, in Zeilen wie background-image: url(../img/hero.jpg).
Dabei geht dreierlei schief:
- Der Crawler liest das CSS nie. Ein Tool, das nur HTML auswertet, sieht diese Verweise überhaupt nicht. Aktuelle wget-Versionen werten
url()in CSS-Dateien aus, wenn Sie--page-requisitesverwenden. HTTrack wertet CSS ebenfalls aus, kann aber URLs in@import-Ketten,image-set()und Inline-style-Attributen übersehen. - Der relative Pfad bricht. Ein
url()in einer CSS-Datei wird relativ zur CSS-Datei aufgelöst, nicht zur Seite. Speichert das Tool das Stylesheet in einem anderen Ordner als im Original, zeigt../img/hero.jpgins Leere. Öffnen Sie das gespeicherte CSS, suchen Sie ein fehlendes Bild und prüfen Sie, ob dieser Pfad relativ dazu existiert. - Das Bild wird per JavaScript gesetzt. Slider und Parallax-Effekte setzen Hintergründe oft über Skripte, sodass weder HTML noch CSS die Bild-URL enthalten.
Zur Lösung starten Sie den Download erneut mit aktivierter CSS-Auswertung und dem Ressourcen-Host im Umfang. Fehlen nur wenige Bilder, laden Sie sie von Hand in den Pfad herunter, den das CSS erwartet.
Warum fehlen Lazy-Loading-Bilder oder erscheinen nur unscharfe Platzhalter?
Lazy Loading schickt zuerst einen winzigen Platzhalter und tauscht ihn beim Scrollen gegen das echte Foto aus. Das HTML sieht etwa so aus: <img src="placeholder.gif" data-src="foto.jpg">. Ein Crawler folgt src und speichert den Platzhalter. data-src, data-lazy und ähnliche Attribute erfindet jedes Plugin selbst, daher behandeln allgemeine Crawler sie nicht als Links.
- Natives Lazy Loading (
loading="lazy") ist unproblematisch, weil die echte URL weiterhin insrcsteht. - srcset listet mehrere Größen desselben Bildes auf. Ältere Crawler ignorieren es, sodass Sie nur das Ersatzbild oder bei bestimmten Bildschirmbreiten ein kaputtes Bild bekommen. Prüfen Sie in der Dokumentation Ihres Tools, ob srcset unterstützt wird.
- Per Skript eingefügte Galerien holen ihre Bildlisten von einer API, und die URLs tauchen nie im Seitenquelltext auf.
Praktische Lösungen: Ziehen Sie die URLs aus dem gespeicherten HTML (suchen Sie nach data-src=), schreiben Sie sie in eine Textdatei und übergeben Sie diese mit wget -x -i urls.txt an wget, das dabei die Ordnerstruktur nachbildet. Ersetzen Sie anschließend im HTML per Suchen und Ersetzen data-src durch src. Bei einer WordPress-Website, die Sie selbst verwalten, können Sie das Lazy-Load-Plugin vor dem Kopieren vorübergehend deaktivieren. Mehr zu diesem Weg lesen Sie unter WordPress als HTML exportieren.
Warum wird eine React- oder Vue-Website als leere Seite heruntergeladen?
Manche Websites schicken dem Browser eine fast leere HTML-Datei plus ein großes JavaScript-Bundle, und erst das Bundle baut die Seite auf. Vollständig clientseitig gerenderte React-, Vue- und Angular-Apps funktionieren so. Ein Crawler, der kein JavaScript ausführt, speichert nur diese Hülle: ein <div id="root"></div>, vielleicht einen Header, aber keinen Inhalt. Die Dokumentation von Cyotek stellt klar, dass WebCopy kein JavaScript ausführt, und auch wget und HTTrack tun das nicht. Für die typische Klage „WebCopy lädt JavaScript-Seite nicht“ gibt es also keine Einstellung, die hilft.
Website Downloader hat dieselbe Einschränkung. Eine Website, die ihren Inhalt vollständig im Browser erzeugt, kann ein Archiv mit der Seitenhülle, aber ohne Inhalt ergeben. Ihre realistischen Optionen:
- Wenn es Ihre eigene Website ist, exportieren Sie sie aus dem Quellcode. Die meisten Frameworks haben einen Static-Site- oder Pre-Rendering-Modus, der echtes HTML schreibt.
- Prüfen Sie, ob die Website vorgerendertes HTML ausliefert. Viele Next.js- und Nuxt-Websites tun das, und die lassen sich normal herunterladen. Nutzen Sie dafür Seitenquelltext anzeigen statt der Entwicklertools: Steht der Text im rohen Quelltext, kann ein Crawler ihn speichern.
- Speichern Sie bei wenigen Seiten die gerenderte Seite aus dem Browser (Seite speichern unter … Webseite, komplett). Das erfasst das DOM im aktuellen Zustand, das Ergebnis hängt aber oft weiterhin von Skripten ab.
Selbst wenn der Inhalt heruntergeladen wird, funktionieren serverseitige Funktionen wie Suchfelder, Kontaktformulare, Warenkörbe und Kommentare offline nicht. Das ist zu erwarten und kein Downloadfehler.
Warum liefert die Website 403 oder verweigert den Download?
Enthält die Kopie nur eine Handvoll Dateien, als index.html gespeicherte Fehlerseiten oder Bilder, die durch „Access denied“-Antworten ersetzt wurden, hat der Server den Crawler gestoppt. Typische Gründe:
- User-Agent-Sperre. Manche Server lehnen die Standardkennungen von wget und HTTrack ab. Mit
--user-agentin wget und-Fin HTTrack ändern Sie sie. - Rate Limits und Bot-Schutz. Zu viele Anfragen pro Sekunde lösen 403- oder 429-Antworten aus. Drosseln Sie wget mit
--wait=1 --random-waitoder verringern Sie in HTTrack die Zahl der Verbindungen. - Hotlink-Schutz. Bilder werden verweigert, wenn die Anfrage keinen passenden Referrer mitschickt.
- Login. Seiten hinter einem Login liefern statt des Inhalts ein Anmeldeformular.
Seien Sie hier vorsichtig. Eine Website, die automatisierten Zugriff aktiv verweigert, signalisiert, dass sie nicht kopiert werden möchte. Prüfen Sie also, ob Sie eine Erlaubnis haben; die Grundlagen erklärt der Beitrag Ist es legal, eine Website herunterzuladen? (keine Rechtsberatung). Für Ihr eigenes Konto kann wget mit --load-cookies eine Browsersitzung wiederverwenden. Website Downloader lädt keine Seiten hinter einem Login herunter. Verweigert eine Website automatisierte Downloads, meldet der Dienst das, statt Ihnen ein leeres Archiv zu liefern. Ist die Website bereits offline, kann eine Kopie aus dem Internet Archive die bessere Quelle sein: siehe Website aus der Wayback Machine wiederherstellen.
Offline-Kopie sieht kaputt aus, obwohl die Dateien vorhanden sind
Alles liegt im Ordner, und trotzdem zeigt die Kopie keine Formatierung. Das ist ein Pfadproblem, kein Downloadproblem.
Warum sieht die Kopie auf einem lokalen Server gut aus, über file:// aber kaputt?
Wenn Sie index.html doppelklicken, öffnet der Browser die Datei als file://. Dort verhalten sich drei Dinge anders als auf einem Webserver:
- Root-relative Pfade.
/css/style.cssbedeutet auf einem Server „ab dem Stammverzeichnis der Website“, unter file:// aber „ab dem Stammverzeichnis Ihres Laufwerks“. Das ist der häufigste Grund, warum eine Website ohne Formatierung heruntergeladen wird. Die Lösung ist, die Links in relative umzuwandeln (css/style.css,../css/style.css). Genau das tun wgets--convert-linksund das standardmäßige Umschreiben der Links in HTTrack. - Sicherheitsregeln des Browsers. Als ES-Module geladene Skripte,
fetch()-Anfragen nach JSON und manchmal Webfonts werden auf file://-Seiten blockiert. - Ein
<base href>-Tag, das auf die Live-Domain zeigt, schickt jeden relativen Link zurück ins Netz.
Am schnellsten prüfen Sie das, indem Sie den Ordner lokal ausliefern. Führen Sie darin python3 -m http.server 8000 aus und öffnen Sie http://localhost:8000. Sieht die Kopie dort richtig aus, sind die Dateien in Ordnung, und nur die Pfade müssen umgewandelt werden.
Warum führen Links in der Offline-Kopie noch zur Live-Website?
Die Links wurden nie umgeschrieben. Absolute URLs wie https://example.com/ueber-uns/ bleiben absolut, solange das Tool sie nicht umwandelt. Ergänzen Sie bei wget --convert-links (und --adjust-extension, damit Seiten mit der Endung .html gespeichert werden). Prüfen Sie bei HTTrack, dass Sie das Umschreiben der Links nicht abgeschaltet haben. Verbleibende absolute Links zeigen meist auf Seiten außerhalb des Crawl-Umfangs, die das Tool zu Recht unverändert lässt.
Website Downloader liefert genau diese Struktur als einzelne ZIP-Datei, die offline in jedem Browser funktioniert. Wenn Sie lieber nichts installieren möchten, lesen Sie den Beitrag zur HTTrack-Alternative, oder vergleichen Sie die Pläne auf der Preisseite, falls Ihre Website mehr als 100 Unterseiten hat.
FAQ
Welche Dateitypen lädt HTTrack standardmäßig herunter?
HTTrack hat keine feste Liste von Dateitypen. Es speichert alles, was von Seiten innerhalb seines Umfangs verlinkt ist, also auf demselben Host und standardmäßig unterhalb des Startverzeichnisses. Bilder, CSS und JavaScript derselben Website sind ohne jede Regel enthalten. Was fehlt, liegt meist auf einem anderen Host oder wird durch eine selbst hinzugefügte Scan-Regel ausgeschlossen.
Kann ich nur die fehlenden Ressourcen erneut herunterladen statt der ganzen Website?
Ja. Nutzen Sie in HTTrack nach dem Korrigieren der Filter Update existing download. Damit wird der Spiegel erneut geprüft und Fehlendes nachgeladen. Bei wget führen Sie denselben Befehl mit -N (Zeitstempel) erneut aus, damit unveränderte Dateien übersprungen werden, oder übergeben eine Liste fehlender URLs mit -i urls.txt.
Gibt es ein Tool, das eine komplett mit JavaScript gebaute Website rettet?
Nicht zuverlässig. Crawler wie wget, HTTrack und WebCopy speichern das HTML, das der Server sendet, und bei einer clientseitig gerenderten App ist dieses HTML eine leere Hülle. Der verlässliche Weg ist ein statischer Export aus dem Quellcode der Website oder das Speichern einzelner gerenderter Seiten aus dem Browser.
Wann ist ein Online-Downloader die einfachere Wahl?
Wenn Sie keine Filterregeln schreiben, keine CDN-Domains auflisten und keine Links von Hand umwandeln möchten, oder wenn Sie an einem Chromebook, Tablet oder Firmenrechner arbeiten, auf dem Sie keine Software installieren dürfen. Website Downloader läuft im Browser und liefert eine ZIP-Datei. Der kostenlose Plan schafft bis zu 100 Unterseiten ohne Konto. Weitere Details finden Sie in den FAQ.
- heruntergeladene Website ohne Bilder und CSS
- Fehlerbehebung
- HTTrack
- wget
- Offline-Websites