Website-Thumbnails: Vorschaubilder von Webseiten verstehen und einsetzen
Stand: 6 Quellen im Text
Ein Website-Thumbnail ist ein verkleinertes Bild einer Webseite, das vor dem Klick zeigt, wohin ein Link führt. Livethumb sammelt, was man dafür wissen muss: wie solche Vorschaubilder sauber in HTML eingebunden werden, wie Link-Vorschauen in sozialen Netzwerken und Messengern entstehen, wie sich Screenshots mit Headless-Browsern erzeugen lassen und was das Urheber- und Datenschutzrecht dazu sagt. Jeder Absatz nennt seine Quelle direkt im Text, mit Stand Oktober 2026.
Wie bindet man Vorschaubilder ein, ohne dass die Seite springt?
Ein Vorschaubild sollte im img-Element die Attribute width und height tragen; daraus berechnet der Browser das Seitenverhältnis und reserviert den Platz, bevor das Bild geladen ist (Quelle: developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img, Stand: Oktober 2026). Wie das mit srcset, loading="lazy" und object-fit zusammenspielt, steht im Artikel Vorschaubilder von Webseiten einbinden. Welches Format sich für Screenshots eignet, klärt Bildformate für Vorschaubilder.
Woher nehmen Messenger und Netzwerke das Bild einer Link-Vorschau?
Das Bild einer Link-Vorschau stammt bei vielen Plattformen aus den Open-Graph-Angaben im Kopf der geteilten Seite: Das Open-Graph-Protokoll zählt og:image zu den vier Pflichtangaben neben og:title, og:type und og:url (Quelle: ogp.me), und LinkedIn etwa nennt og:image unter den erforderlichen Tags für teilbare Seiten (Quelle: linkedin.com/help/linkedin/answer/a521928, Stand: Oktober 2026). Maße und Testwerkzeuge behandelt Open-Graph-Bild richtig setzen; den Weg von den Hover-Thumbnails der 2000er-Jahre zu heutigen Link-Karten beschreibt Link-Vorschau beim Überfahren.
Wie entsteht ein Screenshot einer Website?
Ein Screenshot einer Website lässt sich mit einem ferngesteuerten Browser ohne sichtbares Fenster erzeugen. Playwright erzeugt ihn mit page.screenshot(), auf Wunsch über die ganze scrollbare Seite (Quelle: playwright.dev/docs/screenshots, Stand: Oktober 2026). Werkzeuge und Befehle vergleicht Website-Screenshot selbst erstellen; wie Dienste das im großen Maßstab mit Warteschlange und Cache organisieren, erklärt Wie Thumbshot-Dienste arbeiten.
Darf man Screenshots fremder Websites zeigen?
Der Bundesgerichtshof hat 2010 im Verfahren I ZR 69/08 („Vorschaubilder“) entschieden, dass die Anzeige von Thumbnails in einer Bildersuchmaschine zwar eine öffentliche Zugänglichmachung nach § 19a UrhG ist, aber durch eine schlichte Einwilligung gedeckt sein kann, wenn Bilder ohne Schutzmaßnahmen gegen Suchmaschinen ins Netz gestellt werden (Quelle: rws-verlag.de/fileadmin/zbb-volltexte/1zr6908.pdf). Was daraus für eigene Screenshots folgt und was nicht, steht unter Urheberrecht bei Website-Screenshots.
Was hat Datenschutz mit Vorschaubildern zu tun?
Wer ein Bild von einem fremden Server einbindet, lässt den Browser jedes Besuchers diesen Server kontaktieren und damit dessen IP-Adresse übermitteln. Das Landgericht München I hat am 20. Januar 2022 (3 O 17493/20) einen Websitebetreiber verurteilt, der Google Fonts so eingebunden hatte, dass die IP-Adresse eines Besuchers ohne Einwilligung an Google ging (Quelle: gesetze-bayern.de/Content/Document/Y-300-Z-BECKRS-B-2022-N-612). Die Übertragung auf Screenshot-Dienste diskutiert Screenshot-APIs Dritter und Datenschutz; den Alt-Text für Vorschaubilder behandelt Alt-Text für Screenshots.
Was bietet Livethumb nicht?
Livethumb ist kein Thumbnail-Dienst: Die Seite erzeugt keine Screenshots, nimmt keine URLs entgegen und liefert keine Bilder zum Einbinden. Wer Livethumb betreibt und wie die Redaktion arbeitet, steht unter Über Livethumb; kurze Antworten auf typische Fragen bündelt die FAQ zu Website-Thumbnails.