Schluss mit gestückelten Screenshots! Wie Sie mit Vivoldi vollständige Webseiten auf einmal erfassen

Haben Sie jemals versucht, eine lange Landingpage zu erfassen, indem Sie dutzende Male scrollen, Teil-Screenshots aufnehmen und diese in einem Bildbearbeitungsprogramm zusammenfügen? Oder erinnern Sie sich an den mühsamen Prozess, Bilder einzeln mit der rechten Maustaste zu speichern, um die Webseite eines Wettbewerbers zu analysieren?

Wenn Sie Web-Planer, Marketer, Designer oder Blogger sind, wiederholt sich diese Art von Arbeit öfter, als Sie vielleicht denken. Mit dem richtigen Werkzeug kann dieser gesamte Prozess jedoch durch die Eingabe einer einzigen URL gelöst werden.

In diesem Artikel konzentrieren wir uns auf Vivoldis Funktion zur Erfassung ganzer Webseiten und führen Sie Schritt für Schritt durch praktische Methoden, die Sie sofort in Ihrer Arbeit anwenden können – von der Nutzung erweiterter Einstellungen über mobile Bildschirmaufnahmen bis hin zur Stapel-Extraktion von Bildern.

Wenn Sie diesen Artikel bis zum Ende lesen, werden Sie Folgendes mitnehmen:

• Wie Sie eine gesamte Webseite auf einmal und ohne Scrollen erfassen
• Wie Sie die Browserhöhe einstellen, um abgeschnittene Bildschirme vollständig zu vermeiden
• Wie Sie PC- und mobile Bildschirme gleichzeitig erfassen
• Wie Sie alle Bilder innerhalb einer Webseite auf einmal herunterladen
• Praktische Tipps für erweiterte Einstellungen (Rendering-Modus, Retina, verzögerte Erfassung usw.)

Warum Standard-Capture-Tools nicht ausreichen

Die Standard-Erfassungsfunktion eines Browsers oder die Screenshot-Tastenkombinationen eines Betriebssystems speichern nur den aktuell auf dem Bildschirm sichtbaren Bereich. Um eine vertikal lange Landingpage, einen Nachrichtenartikel oder eine Detailseite in einem Online-Shop vollständig zu erfassen, müssen Sie unweigerlich nach unten scrollen, mehrere Aufnahmen machen und diese zusammenfügen.

Es gibt auch die Methode, Browser-Erweiterungen zu verwenden. Erweiterungen brechen jedoch auf bestimmten Websites recht häufig ab oder können dynamisch geladene Inhalte nicht richtig erfassen. Insbesondere auf Seiten mit unendlichem Scrollen (Infinite Scroll) oder verzögertem Laden (Lazy Loading) tritt häufig das Problem auf, dass leere Bereiche erfasst werden.

Die Erfassung von mobilen Bildschirmen ist noch umständlicher. Wenn Sie an einem PC arbeiten und überprüfen möchten, wie ein responsives mobiles Layout aussieht, müssen Sie direkt von Ihrem Smartphone darauf zugreifen oder Entwicklertools öffnen, um es zu emulieren. Auch das separate Speichern während dieses Vorgangs ist nicht einfach.

Das Web-Capture-Tool von Vivoldi löst diese Unannehmlichkeiten mit einem Server-Side-Rendering-Ansatz. Anstatt selbst einen Browser zu öffnen und zu scrollen, rendert der Server die gesamte Seite über die Chromium- oder Firefox-Engine und wandelt sie dann in ein Bild um. Daher ist die Aufgabe aus Sicht des Benutzers bereits mit der Eingabe einer URL und dem Drücken einer einzigen Taste erledigt.

Grundlegende Nutzung: Vollbildaufnahme nur durch Eingabe einer URL

Die grundlegende Nutzung des Vivoldi Web-Capture-Tools ist äußerst einfach. Wenn Sie die Website aufrufen, fällt Ihnen als Erstes ein breites URL-Eingabefeld ins Auge. Fügen Sie hier einfach die Adresse der Webseite ein, die Sie erfassen möchten, und drücken Sie die Schaltfläche OK. Das ist alles.

Innerhalb weniger bis zu einigen Dutzend Sekunden (abhängig von der Komplexität der Seite) wird das Erfassungsergebnis auf dem Vorschaubildschirm angezeigt. Das Vorschaubild mag klein und von geringer Qualität aussehen, dies wird jedoch nur zu Anzeigezwecken verkleinert.

Wenn Sie mit dem eigentlichen Download fortfahren, wird ein qualitativ hochwertiges Bild in der exakten Originalauflösung der Seite gespeichert. Lassen Sie sich nicht von der Qualität der Vorschau täuschen.

Im kostenlosen Tarif können Sie 1 URL gleichzeitig verarbeiten. Wenn Sie Ihren Tarif aktualisieren, können Sie bis zu 10 URLs gleichzeitig als Stapel erfassen. Der Indikator 1 / 10 URLs am unteren Rand des Eingabefeldes steht genau dafür. Wenn Sie wiederholt mehrere Seiten erfassen müssen, ist dies eine Funktion, für die ein Upgrade in Betracht gezogen werden sollte.

Erweiterte Einstellungen beherrschen: 6 Kernoptionen

Einfache Erfassungen allein lösen die meisten Situationen. Auf einigen Websites kann die Erfassung jedoch unvollständig sein oder nicht auf die gewünschte Weise gespeichert werden. In diesen Fällen können durch Aufklappen der Erweiterten Einstellungen fast alle Szenarien durch Anpassung detaillierter Optionen abgedeckt werden. Es gibt insgesamt 6 Kernelemente in den erweiterten Einstellungen.

1. Bildschirm-Rendering-Modus (Chromium / Firefox)

Der Standard ist Chromium. Als Chrome-basierte Engine rendert sie die meisten modernen Websites normalerweise einwandfrei. Gelegentlich kann es jedoch vorkommen, dass eine bestimmte Website aufgrund von Sicherheitsrichtlinien oder Zugriffsrechten in einer Chromium-Umgebung nicht geöffnet wird oder das Layout fehlerhaft aussieht. In diesem Fall ermöglicht die Änderung des Rendering-Modus auf Firefox die Umgehung und den Zugriff mit einer anderen Engine.

In der Praxis ist es effizient, es zuerst mit Chromium zu versuchen, und wenn ein Fehler oder ein unvollständiges Ergebnis auftritt, auf Firefox zu wechseln und es erneut zu versuchen. Die Tatsache, dass beide Engines unterstützt werden, ist einer der strukturellen Vorteile von Vivoldi im Vergleich zu Browser-Erweiterungen.

2. Browserhöhe (Auto / Manuelle Einstellung)

Diese Einstellung ist die wichtigste Option zur Lösung von Problemen mit abgeschnittenen Bildschirmen. Der Standard ist Auto, was die tatsächliche Höhe der Seite automatisch erkennt. Bei Websites, die dynamische Inhalte mit JavaScript laden, oder bei Seiten, die auf Scroll-Ereignisse reagieren, erkennt der Auto-Modus die tatsächliche Gesamthöhe der Seite jedoch manchmal nicht genau. In solchen Fällen wird der untere Rand des aufgenommenen Bildes abgeschnitten oder Teile der Seite fehlen.

Die Lösung ist einfach. Sie müssen nur die Browserhöhe manuell eingeben. Wenn die Seite sehr lang ist, legen Sie einen ausreichend großen Wert wie 10.000px oder 20.000px fest. Selbst wenn die eingestellte Höhe länger ist als die tatsächliche Seite, entsteht nur ein leerer Raum und der Inhalt wird nicht abgeschnitten. Es ist also besser, sie großzügig einzustellen. Der Hinweistext am unteren Rand des Eingabefeldes (💡 Wenn Sie das Hintergrundbild nicht sehen können, passen Sie die Browserhöhe manuell an) steht im gleichen Zusammenhang.

3. Bildqualität (Automatisch / Manuell)

Der Standardwert ist Automatisch. Dies gleicht die Dateigröße und die Bildqualität des Erfassungsergebnisses automatisch aus. Wenn Sie die Dateigröße reduzieren möchten, verringern Sie die Qualität; wenn Sie für den Druck oder ein Portfolio höchste Qualität benötigen, können Sie diese manuell auf maximale Qualität einstellen.

4. Website-Verbindungsmodus (Desktop-PC / Mobil)

Diese Funktion ist besonders nützlich für Designer und Planer. Der Standardwert ist Desktop-PC (FHD), wodurch die Seite in einem Desktop-Layout basierend auf Full HD-Auflösung (1920×1080) gerendert wird. Wenn Sie hier in den Modus Telefon (Mobil) wechseln, wird die Seite im exakt gleichen responsiven Layout gerendert, als würde von einem tatsächlichen mobilen Gerät darauf zugegriffen.

Wenn Sie beispielsweise das mobile Design der Website eines Mitbewerbers analysieren oder das mobile Layout Ihrer eigenen Webseite überprüfen, können Sie den mobilen Bildschirm direkt von Ihrem PC aus erfassen und speichern, ohne Ihr Smartphone herausnehmen zu müssen. Die Erfassung derselben URL sowohl im Desktop- als auch im mobilen Modus eignet sich auch hervorragend als Inspektionsdaten für responsives Design.

5. Speicherformat (JPG usw.)

Der Standard ist JPG. Für allgemeine Web-Referenzsammlungen oder Freigabezwecke ist JPG in Bezug auf Bildqualität und Dateigröße sehr effizient. Wenn Sie ein Erfassungsergebnis benötigen, das einen transparenten Hintergrund enthält, oder gestochen scharfe Texterfassungen erforderlich sind, können Sie andere unterstützte Formate auswählen.

6. Verzögerte Erfassung (Verwendung bei Fehlern beim Laden der Seite)

Die Standardeinstellung ist eine verzögerte Erfassung von 1 Sekunde nach dem Laden. Wenn eine Seite sofort erfasst wird, sobald sie in den Browser geladen wird, können Bilder, Schriftarten oder dynamische Elemente, deren Rendering noch nicht abgeschlossen ist, in einem leeren Zustand erfasst werden. Durch Einstellen einer Verzögerungszeit wird nach Abschluss des Ladevorgangs eine bestimmte Zeit abgewartet, bevor die Erfassung erfolgt.

Wenn die Seite viele asynchron geladene Elemente enthält, wie z. B. Werbebanner, Video-Thumbnails oder Slider, versuchen Sie, die Verzögerungszeit auf 2~3 Sekunden zu erhöhen. Umgekehrt können Sie bei leichten und schnellen statischen Seiten die Verzögerungszeit reduzieren, um die Erfassung zu beschleunigen.

Bonus-Optionen: Retina-Modus und gezielte Erfassung

Am unteren Rand der erweiterten Einstellungen befinden sich zwei zusätzliche Optionen in Form von Kontrollkästchen. Das Wissen um diese ermöglicht in Kombination mit den grundlegenden 6 Einstellungen noch präzisere Erfassungen.

Retina-Modus (Speichert als hochauflösendes Bild durch Verdoppelung der Pixel)

Durch die Aktivierung des Retina-Modus wird die Pixeldichte des aufgenommenen Bildes verdoppelt. Sie können ein doppelt so scharfes Bild erhalten wie bei der Aufnahme mit einer Standard-Monitorauflösung. Dies eignet sich für die Druckproduktion, die Sammlung hochwertiger Portfolios und detaillierte UI-Inspektionsarbeiten. Da die Bilddateigröße jedoch proportional zunimmt, ist es effizienter, den Standardwert beizubehalten, wenn es sich nur um einfache Referenzzwecke handelt.

Spezifische Bereichserfassung (Query Selector)

Wenn Sie nicht die gesamte Seite, sondern nur ein bestimmtes gewünschtes Element erfassen möchten – wie z. B. ein Header-Banner, einen bestimmten Abschnitt oder einen Produktkartenbereich – verwenden Sie diese Option. Sie können das Ziel-Element mithilfe der CSS Query Selector-Syntax festlegen. Dies ist eine besonders nützliche Funktion für Entwickler oder Personen, die mit HTML/CSS vertraut sind. Wenn Sie beispielsweise eine Klasse oder ID wie .product-detail oder #main-banner angeben, wird nur dieses Element sauber erfasst.

Praktische Anwendungsszenarien: Versuchen Sie es in diesen Situationen

Nachdem wir uns die Funktionen einzeln angesehen haben, wollen wir nun in spezifischen Szenarien untersuchen, wie Sie sie in der Praxis anwenden können.

Szenario 1: Benchmarking von Landingpages der Wettbewerber (Marketer)

Eine neue Aktionsseite eines Mitbewerbers wurde veröffentlicht. Sie müssen die Struktur, den Text und die Bildplatzierung analysieren und mit Ihrem Team teilen. Wenn Sie die URL in Vivoldi einfügen und auf die Schaltfläche OK drücken, wird die gesamte vertikal lange Landingpage als ein einziges Bild gespeichert. Wenn Sie sie sowohl im Desktop- als auch im mobilen Modus speichern, erhalten Sie nützliche Daten für die Analyse der responsiven Strategie.

Sollte die Aufnahme in der Mitte abgeschnitten werden, stellen Sie die Browserhöhe in den erweiterten Einstellungen manuell großzügig ein. Tritt ein Rendering-Fehler auf, ist der Wechsel in den Firefox-Modus ebenfalls eine Lösung.

Szenario 2: Inspektion von responsivem Webdesign (Webdesigner)

Eine neue Serviceseite wurde bereitgestellt. Sie müssen überprüfen, ob das Layout auf mobilen Bildschirmen umbricht oder Fehler aufweist. Wenn Sie in Vivoldi den Website-Verbindungsmodus auf 'Telefon (Mobil)' einstellen und erfassen, erhalten Sie ein Vollbild des responsiven Layouts, das genau so aussieht, als würde mit einem echten Smartphone darauf zugegriffen.

Sie können dies schnell und ohne Smartphone oder Entwicklertools überprüfen.

Szenario 3: Stapelweise Sammlung von Referenzbildern (Planer / Blogger)

Sie müssen mehrere Bilder von einer Design-Referenzseite oder einer Shop-Detailseite sammeln. In diesem Fall können Sie mit Vivoldis Funktion Bild-Extraktor alle auf dieser Seite enthaltenen Bilder mit einem einzigen Klick im Stapel herunterladen.

Im Vergleich zum dutzendfachen Wiederholen des Rechtsklick-und-Speichern-Prozesses wird die Zeit drastisch reduziert.

Szenario 4: Vollständige Archivierung von Nachrichtenartikeln

Sie müssen eine Aufzeichnung eines wichtigen Nachrichtenartikels oder einer Ankündigung aufbewahren. Wenn Sie nur den Link speichern, könnte der Originaltext später geändert oder gelöscht werden. Durch die Erfassung der URL mit Vivoldi können Sie den gesamten Bildschirm der Seite zu diesem Zeitpunkt als Bilddatei dauerhaft erhalten.

Durch Aktivierung des Retina-Modus wird der Text viel klarer gespeichert.

Bild-Extraktor: Batch-Download von Webseiten-Bildern

Neben Web-Capture ist ein weiteres nützliches Tool von Vivoldi der Bild-Extraktor. Wenn Web-Capture die gesamte Seite als einzelnes Bild speichert, ist der Bild-Extraktor eine Funktion, die die in diese Seite eingebetteten einzelnen Bilder in ihrem ursprünglichen Dateiformat abruft.

Dies ist besonders effektiv beim Sammeln von Bildern von Seiten, auf denen mehrere Produktbilder aufgelistet sind, wie z. B. Detailseiten von Online-Shops, Portfolio-Galerien oder bildzentrierten Blogbeiträgen. Bei der herkömmlichen Methode müssen Sie den Rechtsklick → 'Speichern unter...' bei jedem Bild dutzende Male wiederholen. Durch die Verwendung des Bild-Extraktors wird dieser Vorgang auf einen einzigen Klick komprimiert.

Aus Sicht der Arbeitseffizienz können Sie die Zeit für Web-Scraping und das Speichern von Bildern um über 90 % reduzieren.
Bei urheberrechtlich geschützten Bildern sollten diese natürlich ausschließlich für persönliche Studien- oder interne Referenzzwecke verwendet werden, und für die kommerzielle Nutzung ist die Erlaubnis des ursprünglichen Autors erforderlich.

Vivoldi Web Capture, Was Sie beachten sollten

Obwohl die Web-Capture-Funktion von Vivoldi sicherlich praktisch ist, gibt es Einschränkungen und Vorsichtsmaßnahmen, die Sie vor der Nutzung kennen sollten.

• Seiten, die eine Anmeldung erfordern: Exklusive Inhalte für Mitglieder oder Seiten, die nur nach dem Anmelden zugänglich sind, können nicht erfasst werden. Dies liegt daran, dass der Server im nicht angemeldeten Zustand darauf zugreift.
• Seiten mit dynamischer Interaktion: Inhalte, die nur durch Mouseover oder Klickereignisse (Dropdown-Menüs, Pop-ups usw.) erscheinen, sind nicht in den Erfassungsergebnissen enthalten.
• Stapelerfassung: Der kostenlose Plan kann nur 1 URL auf einmal verarbeiten. Um mehrere URLs gleichzeitig zu verarbeiten, ist ein Tarif-Upgrade erforderlich.
• Vorschauqualität: Die unmittelbar nach der Aufnahme angezeigte Vorschau ist ein verkleinertes Bild zu Anzeigezwecken. Da das Bild beim Herunterladen in der Originalauflösung gespeichert wird, sollten Sie nicht nach der Qualität der Vorschau urteilen.
• Fehlende Hintergrundbilder: Wenn mit CSS background-image eingefügte Hintergrundbilder unsichtbar sind, lässt sich dies oft durch manuelles Einstellen der Browserhöhe beheben.

Im Vergleich zu Browser-Erweiterungen besteht die Stärke von Vivoldi darin, dass es sofort online ohne Installation verwendet werden kann und erweiterte Funktionen wie den Wechsel der Rendering-Engine und die Emulation des mobilen Modus bietet. In Umgebungen, in denen vollautomatische, wiederkehrende Aufgaben oder Massenverarbeitung erforderlich sind, ist jedoch möglicherweise eine API-Integration oder die Nutzung eines kostenpflichtigen Tarifs besser geeignet.

Schritt-für-Schritt-Zusammenfassung: Kurzanleitung für Erstanwender

Für diejenigen, die es zum ersten Mal verwenden, ist hier eine schrittweise Zusammenfassung des schnellsten Einstiegs.

• Schritt 1: Rufen Sie die Seite des Vivoldi Web-Capture-Tools auf.
• Schritt 2: Fügen Sie die Adresse der Webseite, die Sie erfassen möchten, in das URL-Eingabefeld ein.
• Schritt 3: Klicken Sie zunächst mit den Standardeinstellungen auf die Schaltfläche OK.
• Schritt 4: Wenn das Erfassungsergebnis angezeigt wird, überprüfen Sie die Vorschau und klicken Sie auf Download.
• Schritt 5: Wenn der Bildschirm abgeschnitten ist oder der Hintergrund unsichtbar ist, erweitern Sie die Erweiterten Einstellungen, stellen Sie die Browserhöhe manuell ein und versuchen Sie es erneut.
• Schritt 6: Wenn Sie ein mobiles Layout benötigen, ändern Sie den Website-Verbindungsmodus auf Telefon (Mobil) und erfassen Sie erneut.
• Schritt 7: Aktivieren Sie den Retina-Modus, wenn eine hochauflösende Aufnahme erforderlich ist.

Fazit: Befreien Sie sich von Routineaufgaben und konzentrieren Sie sich auf das Wesentliche

Sammlung von Web-Referenzen, Konkurrenzanalyse, Überprüfung von responsivem Design, Content-Archivierung. Die Gemeinsamkeit all dieser Aufgaben besteht darin, dass es sich um vorbereitende Arbeiten und nicht um das Kerngeschäft handelt. Um mehr Zeit für wertvolle Analysen und kreative Arbeit aufzuwenden, ist es vernünftig, sich wiederholende und mechanische Erfassungsaufgaben einem Werkzeug zu überlassen.

Das Web-Capture-Tool von Vivoldi ist ein onlinebasiertes Tool, das direkt in einem Browser verwendet werden kann, ohne dass separate Programme installiert werden müssen. Die grundlegende Nutzung ist einfach genug und erfordert nur eine URL-Eingabe. Durch erweiterte Einstellungen können Sie selbst in schwierigen Situationen die gewünschten Ergebnisse erzielen.

Wenn Sie es noch nicht verwendet haben, probieren Sie es gleich aus. Wählen Sie einfach eine häufig besuchte Webseite aus und fügen Sie die URL ein. So können Sie den Wert dieses Tools sofort erleben.

Wenn Sie diesen Artikel hilfreich fanden, teilen Sie ihn mit Kollegen oder Teammitgliedern, die die gleichen Unannehmlichkeiten erfahren.

Wie bewältigen Sie derzeit Web-Capture-Aufgaben? Lassen Sie es uns in den Kommentaren wissen, damit wir noch bessere Tipps austauschen können.