Website-Screenshot selbst erstellen: Headless-Browser und Werkzeuge

Wie macht man einen Screenshot direkt mit Chrome?

Der Chrome-Schalter --screenshot nimmt die Zielseite im Headless-Modus auf. Chrome speichert das Bild als screenshot.png im aktuellen Arbeitsverzeichnis. Die Chrome-Dokumentation empfiehlt die Kombination mit --window-size für die Fenstergröße (Quelle: developer.chrome.com/docs/automation-and-testing/headless-cli, Stand: Oktober 2026).

chrome --headless --screenshot --window-size=1280,800 https://example.org/

Für Seiten, die lange nachladen, hat Chrome den Schalter --timeout. Er legt in Millisekunden fest, wie lange Chrome höchstens wartet. Danach erfasst Chrome den Inhalt für --screenshot, --dump-dom oder --print-to-pdf, auch wenn die Seite noch lädt (Quelle: developer.chrome.com/docs/automation-and-testing/headless-cli, Stand: Oktober 2026).

Der alte Headless-Modus von Chrome ist heute ein eigenes Programm namens chrome-headless-shell. Das gilt seit Chrome 132.0.6793.0. Heruntergeladen wird es über das Chrome-for-Testing-Dashboard (Quelle: developer.chrome.com/docs/automation-and-testing/headless, Stand: Oktober 2026).

Wie erstellt man einen Screenshot mit Playwright?

Playwright erstellt einen Screenshot mit page.screenshot(). Die Option fullPage: true nimmt die gesamte scrollbare Seite auf. Das wirkt, als hätte der Bildschirm Platz für die ganze Seite. Statt in eine Datei kann Playwright das Bild als Buffer zurückgeben. Über einen Locator lässt sich auch ein einzelnes Element aufnehmen (Quelle: playwright.dev/docs/screenshots, Stand: Oktober 2026).

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1280, height: 800 } });
await page.goto('https://example.org/');
await page.screenshot({ path: 'example.png', animations: 'disabled' });
await browser.close();

Für reproduzierbare Vorschaubilder bietet Playwright mehrere Screenshot-Optionen. animations: "disabled" stoppt CSS-Animationen, Übergänge und Web Animations. mask überdeckt gewählte Elemente mit einem farbigen Kasten. style spielt beim Aufnehmen ein eigenes Stylesheet ein, etwa um Cookie-Banner auszublenden. scale: "css" hält Screenshots auf hochauflösenden Geräten klein. Dann entspricht ein Bildpixel einem CSS-Pixel (Quelle: playwright.dev/docs/api/class-page#page-screenshot, Stand: Oktober 2026).

Wie erstellt man einen Screenshot mit Puppeteer?

Puppeteer nimmt Screenshots mit der Methode Page.screenshot() auf. Puppeteer ist eine JavaScript-Bibliothek zur Steuerung von Chrome oder Firefox (Quellen: pptr.dev/, pptr.dev/api/puppeteer.page.screenshot). Die Optionen ähneln denen von Playwright. fullPage nimmt die ganze Seite auf, clip einen Ausschnitt. type wählt das Format, Standard ist PNG. quality zwischen 0 und 100 gilt für verlustbehaftete Formate. omitBackground erlaubt transparente Hintergründe (Quelle: pptr.dev/api/puppeteer.screenshotoptions, Stand: Oktober 2026).

Ein fertiges Kommando bietet das Node.js-Paket capture-website. Es ist quelloffen und steht unter MIT-Lizenz. Laut eigener Beschreibung nutzt es Puppeteer im Hintergrund. Dazu gibt es das separate Kommandozeilenwerkzeug capture-website-cli (Quelle: github.com/sindresorhus/capture-website, Stand: Oktober 2026).

Was passiert dabei auf Protokollebene?

Puppeteer steuert den Browser über das DevTools Protocol oder WebDriver BiDi (Quelle: pptr.dev/). Der Befehl Page.captureScreenshot des Chrome DevTools Protocol nimmt die Seite auf. Das Bild kommt Base64-kodiert zurück. Der Befehl kennt die Formate jpeg, png und webp sowie einen Ausschnitt per clip. Der experimentelle Parameter captureBeyondViewport nimmt über den sichtbaren Bereich hinaus auf (Quelle: chromedevtools.github.io/devtools-protocol/tot/Page/#method-captureScreenshot, Stand: Oktober 2026).

Was kann der W3C-Standard WebDriver?

Die W3C-Spezifikation WebDriver definiert zwei Befehle für Screenshots. „Take Screenshot“ (GET /session/{session id}/screenshot) nimmt den sichtbaren Bereich des obersten Browserfensters auf. „Take Element Screenshot“ erfasst den sichtbaren Teil eines Elements, nachdem es in den Blick gescrollt wurde. Das Ergebnis ist laut Spezifikation ein verlustfreies PNG, Base64-kodiert (Quelle: Editor's Draft vom 9. Juli 2026, w3c.github.io/webdriver/#screen-capture, Stand: Oktober 2026).

Eine ganzseitige Aufnahme definiert der W3C-Standard WebDriver nicht. „Take Screenshot“ erfasst nur den sichtbaren Bereich (Quelle: w3c.github.io/webdriver/#screen-capture). Für ganze Seiten braucht es eine browserspezifische Erweiterung oder ein Werkzeug wie Playwright mit fullPage (Quelle: playwright.dev/docs/screenshots). Die WebDriver-Spezifikation nennt Selenium WebDriver als ihren Ursprung (Quelle: w3c.github.io/webdriver/, Stand: Oktober 2026).

In Selenium heißen die WebDriver-Screenshot-Befehle TakeScreenshot und TakeElementScreenshot. Die Selenium-Dokumentation führt sie im Abschnitt über Fenster und Tabs. Dort stehen Beispiele für mehrere Programmiersprachen (Quelle: selenium.dev/documentation/webdriver/interactions/windows/, Stand: Oktober 2026).

Viewport oder ganze Seite – was eignet sich als Thumbnail?

Für ein Vorschaubild genügt in der Regel der sichtbare Bereich. Ein Thumbnail soll den ersten Eindruck einer Seite zeigen. Playwright nimmt ohne weitere Angabe genau diesen Bereich auf, denn fullPage steht standardmäßig auf false (Quelle: playwright.dev/docs/api/class-page#page-screenshot, Stand: Oktober 2026). Ganzseitige Aufnahmen sehr langer Seiten ergeben extrem hohe Bilder. Verkleinert sind sie kaum noch erkennbar.

Was sollte man vor dem Aufnehmen beachten?

Ein Screenshot zeigt nur, was der Browser zum Zeitpunkt der Aufnahme rendert. Bilder mit loading="lazy" erscheinen erst, wenn sie in die Nähe des sichtbaren Bereichs kommen. Chromium holt solche Bilder laut web.dev seit Juli 2020 bei schnellen Verbindungen ab 1250 Pixeln Abstand (Quelle: web.dev/articles/browser-level-image-lazy-loading, Stand: Oktober 2026). Bei ganzseitigen Aufnahmen können weiter unten liegende Bilder deshalb fehlen. Das passiert, wenn die Seite vorher nicht gescrollt wurde.

Wer Screenshots fremder Websites erstellt und veröffentlicht, berührt das Urheberrecht. Nach § 16 UrhG ist jede Kopie eines Werkes eine Vervielfältigung. Das gilt „gleichviel ob vorübergehend oder dauerhaft, in welchem Verfahren und in welcher Zahl“ (Quelle: gesetze-im-internet.de/urhg/__16.html, Stand: Oktober 2026). Was das praktisch bedeutet, behandelt Urheberrecht bei Website-Screenshots. Wie ein Dienst Tausende solcher Aufnahmen organisiert, erklärt Wie Thumbshot-Dienste arbeiten.