Webseiten als Screenshot speichern, Responsive Design zeigen & professionelle Website-Mockups erstellen
Du möchtest einen Screenshot deiner Homepage erstellen? Vielleicht sogar die komplette Webseite von oben bis unten? Oder möchtest du dein Webprojekt professionell auf einem PC-Monitor, Laptop, Tablet und Smartphone gleichzeitig präsentieren?
Dann musst du nicht unbedingt selbst Screenshots erstellen, zuschneiden und anschließend in Photoshop oder einem anderen Grafikprogramm bearbeiten.
Mittlerweile gibt es zahlreiche praktische Online-Tools für Website-Screenshots, bei denen du einfach die URL deiner Homepage eingibst. Wenige Sekunden später erhältst du einen fertigen Screenshot deiner Webseite.
Einige Anbieter gehen sogar noch einen Schritt weiter und erstellen aus deiner URL automatisch eine professionelle Website-Mockup-Grafik mit Monitor, Notebook, Tablet und Smartphone.
Auf dieser Seite stellen wir dir interessante Screenshot-Tools für Webmaster vor.
💡 Wofür benötigt man Screenshots einer Webseite?
Ein Screenshot einer Webseite kann für viele verschiedene Zwecke sinnvoll sein.
Besonders interessant sind Website-Screenshots natürlich für Webdesigner und Webagenturen.
Hast du eine Webseite für einen Kunden erstellt, möchtest du das fertige Projekt schließlich auch auf deiner eigenen Agentur-Webseite als Referenz präsentieren.
Statt einfach nur einen Link zum Projekt zu setzen, kannst du einen professionellen Screenshot verwenden.
Typische Einsatzmöglichkeiten sind beispielsweise:
- Referenzen einer Webdesign-Agentur
- Vorstellung eigener Webprojekte
- Portfolio eines Webdesigners
- Präsentation eines neuen Webshops
- Blogbeiträge über interessante Webseiten
- Social-Media-Beiträge
- Dokumentation eines Relaunches
- Vorher-Nachher-Vergleiche
- Dokumentation von Änderungen an einer Webseite
- Präsentationen und Angebote
- Archivierung älterer Versionen einer Homepage
- Überprüfung des Responsive Designs
Gerade für Webdesign-Agenturen und Freelancer sind solche Screenshots eine einfache Möglichkeit, bereits realisierte Projekte ansprechend zu präsentieren.
🖥️ Normaler Screenshot oder Website-Mockup?
Hier solltest du zwischen zwei Arten von Tools unterscheiden.
Klassische Website-Screenshot-Tools
Diese Dienste erstellen aus einer URL eine normale Bilddatei der Webseite.
Du kannst beispielsweise einen Screenshot mit einer Auflösung von
1920 × 1080 Pixel
oder
1080 × 1080 Pixel
erstellen.
Einige Dienste können sogar die komplette Webseite von oben bis unten erfassen.
Website-Mockup-Generatoren
Noch interessanter für Referenzen sind sogenannte Device-Mockups.
Dabei wird der Screenshot automatisch in die Grafik eines Gerätes eingesetzt.
Deine Webseite erscheint dann beispielsweise auf einem:
🖥️ Desktop-Monitor
💻 Laptop
📱 Smartphone
▯ Tablet
Besonders professionell wirken Grafiken, bei denen mehrere Geräte gleichzeitig dargestellt werden.
Damit kannst du deinen Kunden auf einen Blick zeigen:
Diese Webseite funktioniert selbstverständlich auch responsive auf Smartphone, Tablet und Desktop-PC.
🔎 Screenshot-Tools im Überblick
📸 Screenshot Scout
Webseite:
https://screenshotscout.com/tools/website-screenshot
Screenshot Scout ist ein sehr praktisches Online-Tool, wenn du einen sauberen Screenshot einer Webseite in einer bestimmten Auflösung benötigst.
Du gibst einfach die URL ein und kannst anschließend festlegen, wie der Screenshot erstellt werden soll.
Funktionen:
✓ individuelle Breite und Höhe des Browserfensters
✓ Desktop- und mobile Darstellung
✓ komplette Webseite als Full-Page-Screenshot
✓ Cookie-Banner ausblenden
✓ Chat-Widgets ausblenden
✓ Werbung blockieren
✓ verschiedene Bildformate
✓ Screenshots bestimmter Bereiche möglich
✓ Screenshot-API für Entwickler
Besonders praktisch finden wir die Möglichkeit, störende Elemente wie Cookie-Banner automatisch auszublenden.
Wer beispielsweise einen quadratischen Screenshot für Social Media benötigt, kann einfach eine entsprechende Viewport-Größe festlegen.
Unser Tipp: Screenshot Scout eignet sich hervorragend für saubere Screenshots von Webdesign-Referenzen.
Beispiel-Screenshot:
🖥️ The Toolbox – Website Screenshot
Webseite:
https://getthetoolbox.com/website-tools/website-screenshot
The Toolbox bietet ein kostenloses Website-Screenshot-Tool, mit dem du deine Homepage in unterschiedlichen Bildschirmgrößen testen und als Screenshot erfassen kannst.
Interessant ist vor allem die große Auswahl verschiedener Geräte und Auflösungen.
Funktionen:
✓ Desktop-Screenshots
✓ Tablet-Screenshots
✓ Smartphone-Screenshots
✓ individuelle Auflösung
✓ verschiedene Desktop-Auflösungen
✓ iPhone-, Pixel- und Galaxy-Ansichten
✓ Responsive Breakpoints testen
✓ mehrere Darstellungen miteinander vergleichen
Damit eignet sich das Tool nicht nur zum Erstellen von Bildern, sondern auch zur schnellen Kontrolle des Responsive Designs einer Webseite.
🎨 Screenshot + Gerät = professionelle Website-Mockups
Für Webdesigner und Agenturen sind die folgenden Tools besonders interessant.
Hier bekommst du nicht einfach nur einen Screenshot.
Die Webseite wird direkt in einen Monitor, Laptop, ein Tablet oder Smartphone eingesetzt.
⭐ MDWMG – Multi Device Website Mockup Generator
Webseite:
https://mdwmg.com/
Der etwas sperrige Name steht für:
Multi Device Website Mockup Generator
Das Prinzip ist dagegen sehr einfach:
URL eingeben – und die Webseite wird auf verschiedenen Geräten dargestellt.
Verfügbare Geräte:
🖥️ iMac / Desktop
💻 MacBook / Laptop
▯ iPad / Tablet
📱 iPhone / Smartphone
Besonders interessant:
Die einzelnen Geräte können gemeinsam in einer Grafik angeordnet werden.
Du kannst die Geräte verschieben, skalieren oder einzelne Geräte ausblenden.
Die Webseite innerhalb der Geräte ist zunächst sogar interaktiv. Du kannst innerhalb der verschiedenen Geräte scrollen und navigieren und anschließend genau die gewünschte Ansicht exportieren.
Funktionen:
✓ URL direkt eingeben
✓ mehrere Geräte gleichzeitig
✓ Desktop
✓ Laptop
✓ Tablet
✓ Smartphone
✓ Geräte frei positionieren
✓ Geräte skalieren
✓ transparente PNG-Datei möglich
✓ JPG mit Hintergrund möglich
✓ Export in verschiedenen Auflösungen
✓ kein Photoshop erforderlich
✓ keine Anmeldung erforderlich
Unser Tipp für Webagenturen: Mit diesem Tool lassen sich sehr schnell professionelle Referenzbilder erstellen.
⭐ Triport – Website Mockup Generator
Webseite:
https://triport.risewithcode.site/
Auch Triport erzeugt aus einer URL automatisch verschiedene Geräteansichten einer Webseite.
Besonders praktisch:
Das Tool erstellt direkt vier unterschiedliche Darstellungen.
Darstellungen:
✓ Widescreen / 4K
✓ Desktop 1920 × 1080
✓ Tablet / iPad
✓ Smartphone / iPhone
Die einzelnen Mockups können als hochauflösende PNG-Dateien ausgegeben werden.
Noch interessanter ist die Möglichkeit, alle vier Geräte in einer gemeinsamen Komposition darzustellen.
Beispiel:
Damit eignet sich Triport hervorragend, wenn du auf deiner Referenzseite zeigen möchtest, dass eine von dir erstellte Homepage auf allen wichtigen Bildschirmgrößen funktioniert.
🎨 Framly
Webseite:
https://www.framly.pro/
Framly richtet sich insbesondere an Designer, Agenturen und Marketing-Anwender.
Auch hier ist das Prinzip denkbar einfach:
URL eingeben → Gerät auswählen → fertiges Mockup erstellen.
Die Webseite wird automatisch erfasst und anschließend in einem entsprechenden Geräte-Rahmen dargestellt.
Verfügbare Darstellungen:
✓ Laptop
✓ Smartphone
✓ Tablet
✓ mehrere Geräte in einer gemeinsamen Szene
Zusätzlich kannst du den Hintergrund und die Darstellung des Mockups anpassen.
Das Ergebnis lässt sich anschließend als PNG-Grafik verwenden.
Gerade die Möglichkeit, Laptop, Smartphone und Tablet gemeinsam in einer Grafik darzustellen, macht Framly für Webdesign-Referenzen interessant.
🖼️ MockFrame
Webseite:
https://mockframe.app/tools/website-screenshot
MockFrame kombiniert einen Website-Screenshot-Generator mit einem Mockup-Editor.
Du gibst zunächst die URL deiner Webseite ein und lässt einen Screenshot erstellen.
Anschließend kannst du diesen Screenshot direkt in eine passende Darstellung einsetzen.
Möglich sind beispielsweise:
✓ Browserfenster
✓ Smartphone
✓ Tablet
✓ Laptop
Interessant ist auch die Unterstützung von Lazy Loading.
Das Tool scrollt vor der Aufnahme durch die Webseite, damit Bilder und andere Inhalte geladen werden, die erst beim Scrollen erscheinen.
Anschließend kannst du das Ergebnis für verschiedene Seitenverhältnisse und Social-Media-Formate exportieren.
Damit sparst du dir den Umweg über ein zusätzliches Grafikprogramm.
🖥️ Martech Zone Device Mockup Generator
Webseite:
https://martech.zone/mockups/
Auch dieses kostenlose Tool ist speziell darauf ausgelegt, aus einer öffentlichen URL ein fertiges Geräte-Mockup zu erzeugen.
Zur Verfügung stehen unter anderem:
✓ Desktop-Monitor
✓ Laptop
✓ Smartphone
✓ Desktop + Smartphone
✓ Laptop + Smartphone
✓ verschiedene gerade und perspektivische Ansichten
Das ist besonders praktisch, wenn du schnell eine optisch ansprechende Grafik für eine Referenzseite, Präsentation oder einen Social-Media-Beitrag benötigst.
Cookie- und Consent-Fenster versucht das Tool bei der Aufnahme automatisch zu unterdrücken.
📱 ShotWolf
Webseite:
https://www.shotwolf.com/tools/
ShotWolf bietet gleich mehrere interessante Screenshot- und Mockup-Werkzeuge.
Neben normalen Website-Screenshots gibt es beispielsweise einen iPhone-Mockup-Generator.
Darüber hinaus lassen sich Webseiten direkt in verschiedene Social-Media-Darstellungen integrieren.
Angeboten werden unter anderem:
✓ Full-Page-Website-Screenshots
✓ Desktop- und Mobile-Screenshots
✓ verschiedene Geräte-Presets
✓ iPhone-Mockups
✓ Instagram-Post-Mockups
✓ Facebook-Ad-Mockups
✓ LinkedIn-Ad-Mockups
✓ Google-Ads-Mockups
✓ Social-Media-Grafiken
Damit ist ShotWolf besonders interessant, wenn ein Screenshot nicht nur für die eigene Homepage, sondern anschließend auch für Social Media oder Online-Marketing verwendet werden soll.
📱 Responsivly
Webseite:
https://responsivly.dev/
Responsivly konzentriert sich stärker auf die Frage:
Wie sieht meine Webseite auf unterschiedlichen Geräten aus?
Du gibst eine URL ein und kannst anschließend Screenshots für verschiedene Viewports erzeugen.
Funktionen:
✓ Desktop
✓ Laptop
✓ Tablet
✓ Smartphone
✓ zahlreiche Geräte-Presets
✓ individuelle Viewport-Größen
✓ mehrere Bildschirmgrößen gleichzeitig erfassen
✓ Responsive Design kontrollieren
Das Tool ist damit insbesondere für Webmaster und Entwickler interessant, die eine Webseite vor der Veröffentlichung noch einmal auf verschiedenen Bildschirmgrößen überprüfen möchten.
🏆 Welches Screenshot-Tool empfehlen wir?
Das hängt davon ab, was du mit dem Screenshot machen möchtest.
Du möchtest einfach einen sauberen Screenshot deiner Webseite?
Besonders praktisch sind die frei wählbare Auflösung und das automatische Entfernen störender Cookie-Banner.
Du möchtest deine Webseite auf mehreren Geräten präsentieren?
👉 Triport
Desktop, Laptop, Tablet und Smartphone lassen sich gemeinsam zu einer professionellen Grafik zusammenstellen.
Du möchtest schnell ein schönes Referenzbild für eine Webagentur erstellen?
👉 Framly, Triport oder MockFrame
Hier steht die optische Präsentation stärker im Vordergrund.
Du möchtest dein Responsive Design überprüfen?
👉 The Toolbox oder Responsivly
Hier kannst du verschiedene Bildschirmgrößen und Geräte miteinander vergleichen.
Du brauchst Screenshots für Social Media?
👉 ShotWolf
Neben normalen Screenshots stehen verschiedene Social-Media-Mockups zur Verfügung.
💡 Unser Tipp für Webdesigner und Agenturen
Wenn du regelmäßig Webseiten für Kunden erstellst, solltest du von jedem abgeschlossenen Projekt einen Screenshot für dein eigenes Archiv anlegen.
Warum?
Eine Kundenwebseite bleibt schließlich nicht unbedingt so, wie du sie ursprünglich erstellt hast.
Der Kunde ändert Texte, tauscht Bilder aus, installiert Plugins oder lässt einige Jahre später einen anderen Webdesigner an der Seite arbeiten.
Mit einem Screenshot dokumentierst du den Stand der Webseite zu dem Zeitpunkt, an dem du das Projekt abgeschlossen hast.
Für die eigene Referenzseite würden wir sogar zwei Varianten speichern:
1. Einen normalen Screenshot der Webseite
und
2. Ein professionelles Responsive-Mockup mit Desktop, Laptop und Smartphone
Damit hast du später genügend Material für deine Referenzseite, Blogbeiträge und Social Media.
📐 Welche Screenshot-Größe ist sinnvoll?
Das hängt vom Verwendungszweck ab.
Für die Dokumentation einer kompletten Webseite eignet sich ein Full-Page-Screenshot.
Für eine Referenzseite reicht dagegen häufig ein Ausschnitt des sichtbaren Bereiches.
Für Social Media sind quadratische oder hochformatige Bilder interessant.
Beispiele:
1920 × 1080 Pixel
klassisches 16:9-Format
1200 × 630 Pixel
praktisch für viele Link- und Social-Media-Grafiken
1080 × 1080 Pixel
quadratische Darstellung
1080 × 1350 Pixel
hochformatige Social-Media-Grafik
Wichtig ist vor allem, dass du bei mehreren Referenzen möglichst immer dieselbe Größe und denselben Bildausschnitt verwendest.
Dadurch wirkt eine Referenzübersicht wesentlich ruhiger und professioneller.
🍪 Achtung: Cookie-Banner auf Website-Screenshots
Ein häufiges Problem bei automatischen Website-Screenshots sind Cookie- bzw. Consent-Banner.
Das Ergebnis sieht dann beispielsweise so aus:
Du möchtest deine wunderschöne neue Startseite präsentieren – und die Hälfte des Screenshots besteht aus einem riesigen Fenster mit der Überschrift „Wir respektieren Ihre Privatsphäre“. 😉
Für professionelle Referenzbilder ist das natürlich nicht besonders schön.
Achte deshalb bei der Auswahl eines Screenshot-Tools darauf, ob sich
Cookie-Banner, Consent-Layer, Werbung und Chat-Fenster
vor der Aufnahme automatisch ausblenden lassen.
Screenshot Scout bietet hierfür beispielsweise entsprechende Funktionen.
📸 Screenshot-Tools gehören in die Werkzeugkiste eines Webmasters
Egal ob du eine private Homepage betreibst, Webseiten für Kunden erstellst oder eine komplette Webdesign-Agentur führst:
Ein gutes Website-Screenshot-Tool kann dir viel Arbeit ersparen.
Für einen einfachen Screenshot reichen kostenlose Online-Tools vollkommen aus.
Möchtest du dagegen deine eigenen Webdesign-Projekte professionell präsentieren, solltest du dir insbesondere die Multi-Device-Mockup-Generatoren ansehen.
Eine Webseite gleichzeitig auf Desktop-PC, Laptop, Tablet und Smartphone zu zeigen, vermittelt schließlich auf einen Blick eine wichtige Eigenschaft moderner Webseiten:
Gutes Webdesign funktioniert nicht nur auf dem großen Monitor, sondern auf allen Geräten.