„Screenshot“ einer ganzen Webseite erstellen

Eine ganze Webseite als Bild festhalten, nicht nur den sichtbaren Ausschnitt: Das braucht man ständig. Für die Abstimmung mit Kunden, für die Dokumentation eines Standes vor dem Relaunch, für ein Portfolio. Früher hat man dafür mehrere Bildschirmfotos gemacht und sie in Photoshop zusammengesetzt. Das ist seit Jahren nicht mehr nötig: Alle großen Browser können es selbst, ohne Erweiterung.

Firefox: zwei Klicks, ohne Zusatzprogramm

Firefox hat die Funktion eingebaut. Rechtsklick auf eine freie Stelle der Seite, dann „Bildschirmfoto aufnehmen“. Oben rechts erscheinen zwei Schaltflächen: „Sichtbaren Bereich speichern“ und „Gesamte Seite speichern“. Die zweite ist die gesuchte. Das Ergebnis landet als PNG im Download-Ordner.

Chrome und Edge: über die Entwicklerwerkzeuge

In Chrome ist die Funktion vorhanden, aber versteckt:

1. Entwicklerwerkzeuge öffnen mit F12 oder Strg + Umschalt + I
2. Strg + Umschalt + P drücken, das öffnet die Befehlsliste
3. screenshot tippen und „Capture full size screenshot“ wählen

Edge kann beides: denselben Weg über die Entwicklerwerkzeuge, zusätzlich aber auch Strg + Umschalt + S für „Web-Erfassung“ mit der Option „Ganze Seite“.

Safari

Im Web-Inspector den Reiter „Elemente“ öffnen, das <html>-Element auswählen und im Kontextmenü „Bildschirmfoto aufnehmen“ wählen. Dafür muss das Entwicklermenü in den Einstellungen aktiviert sein.

Viele Seiten auf einmal: die Kommandozeile

Sobald es um mehr als eine Handvoll Seiten geht, lohnt sich ein Skript. Für die Referenzen auf dieser Website habe ich einundzwanzig Projekte in Desktop- und Handyansicht aufgenommen, in einem Durchlauf. Das geht mit Playwright in wenigen Zeilen:

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(viewport={"width": 1440, "height": 900})
    page.goto("https://example.com", wait_until="networkidle")
    page.screenshot(path="seite.png", full_page=True)
    browser.close()

Der entscheidende Teil ist full_page=True. Ohne die Angabe bekommt man wieder nur den sichtbaren Ausschnitt.

Warum ganzseitige Screenshots oft misslingen

Vier Ursachen decken fast alle Fälle ab:

Bilder fehlen oder sind grau

Moderne Seiten laden Bilder erst, wenn sie in die Nähe des Sichtfelds kommen. Ein Screenshot, der die Seite auf einen Schlag aufnimmt, erwischt sie vorher. Abhilfe: die Seite einmal langsam bis unten durchscrollen und erst dann auslösen. Im Skript reicht eine kurze Schleife, die in Schritten nach unten springt und jeweils einen Moment wartet.

Der Kopfbereich wiederholt sich

Bleibt die Navigation beim Scrollen stehen, taucht sie im fertigen Bild mehrfach auf. Das passiert vor allem bei Werkzeugen, die intern mehrere Aufnahmen zusammensetzen. Die eingebauten Browser-Funktionen und Playwright lösen das inzwischen sauber.

Der Cookie-Hinweis liegt über allem

Vor der Aufnahme wegklicken. Im Skript entweder auf die Schaltfläche klicken oder das Element vorher aus dem Dokument entfernen.

Feste Elemente an Rändern

Alles mit position: fixed, also Chat-Blasen, Zurück-nach-oben-Pfeile und Banner, klebt in der Aufnahme an einer Stelle und verdeckt Inhalt. Auch hier hilft nur, sie vorher auszublenden.

Was ich in der Praxis nehme

Für einen schnellen Blick den Firefox, weil es zwei Klicks sind. Sobald mehrere Seiten oder mehrere Bildschirmbreiten gebraucht werden, ein kleines Playwright-Skript, weil das Ergebnis reproduzierbar ist und man es am nächsten Tag identisch wiederholen kann.

Hinweis in eigener Sache: Der ursprüngliche Beitrag von 2011 empfahl das Firefox-Add-on „Screengrab“. Das gibt es für aktuelle Firefox-Versionen nicht mehr, und man braucht es auch nicht mehr.