D.r Web seit 1997 print.
  • Beste Agenturen
  • Agentur-Städte 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Städte 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Magazin
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
D.r Web seit 1997 print.
  • Agentur finden
  • Magazin
Agentur eintragen →
Dr. Web » Tools » Praktisch: Ganzseitige Screenshots deiner Website mit Firefox, Chrome & Safari

Praktisch: Ganzseitige Screenshots deiner Website mit Firefox, Chrome & Safari

Wer kennt das nicht? Du willst von einer ganzen Website ein Abbild erstellen, kannst aber im Regelfall nur den sichtbaren Bereich virtuell ablichten. Dabei ist es eigentlich ziemlich einfach, einen Screenshot einer Website zu machen, wobei auch die Bereiche erfasst werden, die du erst durch Scrollen erreichst. Hier zeige ich dir kurz & knapp, wie das geht.

Sozial sein
Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 3 Minuten
  • von Markus Seyfferth
  • 24. Mai 2019

Total easy: Screenshots mit Firefox

Firefox macht es meines Erachtens mit Abstand am einfachsten, solch einen ganzseitigen Screenshot zu erstellen. Der Vorgang ist überaus benutzerfreundlich, und du brauchst keine Extensions, um ganz bequem die Website abzufotografieren:

1. Hierzu benutzt Du den Tastatur Shortcut Strg + ⇧ + S (in Windows) bzw. ⌘ + ⇧ + S (iMac) du auf die drei Pünktchen in der URL-Leiste und gehst auf “Take a Screenshot”:

2. Im nächsten Schritt kannst du dann wahlweise die einzelnen Elemente einer Seite virtuell ablichten lassen, indem du mit dem Mauszeiger drüber fährst und den jeweiligen Bereich anklickst.

In diesem Fall willst du aber die ganze Seite abfotografieren, und hierfür gehst du dann auf “Save full page” und lichtest so die Seite ab.

3. Im allerletzten Schritt tut sich dann ein Fenster auf, in dem du eigentlich nur noch den blauen “Download” Knopf betätigst. Die Datei wird dann im Regelfall in den Downloads-Ordner verfrachtet und dort abgespeichert. Es sei denn, du hast einen anderen Standard-Ordner definiert.

Und das war es auch schon. Operation gelungen, Patient lebt. Nun schauen wir uns als nächstes den Vorgang in Chrome an.

Weniger easy: Screenshots mit Chrome

In Chrome geht das Ganze leider nicht ganz so einfach wie in Firefox. Für Entwickler wird das sicher kein Problem sein, da diese sich meist schon mit Chromes DevTools auskennen. Für nicht ganz so versierte Nutzer hingegen ist es wohl eher etwas unzugänglich, und man muss sich erst an den Vorgang gewöhnen. Und der geht so:

1. Du rufst das DevTools Menü in Windows per STRG + SHIFT + I auf, (im Mac per CMD + ALT + I). Es erscheint folgende Übersicht:

2. In einem zweiten Schritt gibst d nun in Windows STRG + Shift + P ein, was ein Eingabefeld aufruft, das so aussieht:

3. Zu guter Letzt schreibst du nun das Wort “Screenshot” in das Eingabefeld, wodurch einige Optionen angezeigt werden. Was du brauchst, ist “Capture full-size screenshot”.

Das klickst du nun also an, und nach wenigen Sekunden wird ein Abbild der gesamten Website in den Downloads-Ordner heruntergeladen. Fertig. Wenn dir das zu kompliziert ist, gibt es für dich die Screenshot-Funktionalität auch als Chrome Extension.

Der Vollständigkeit halber werfe ich noch einen Blick auf den Safari-Browser.

Auch ganz okay: Screenshots mit Safari

Im Safari kannst du ebenso einen Screenshot über den “Web Inspector” tätigen, welchen du per CMD + ALT + I im Mac aufrufst. Hier braucht es nur noch einen weiteren Mausklick auf “Capture Screenshot”, und im Nu liegt die Datei im Downloads-Ordner. Wenn du solche Entwickler-Werkzeuge nicht magst, kannst du auch eine Extension à la Awesome Screenshot verwenden.

Was sind deine Lieblings-Extensions oder Tricks, um solche Screenshots zu erstellen? Schreib es doch unten in die Kommentare! Die besten Tipps nehmen wir dann in den Artikel auf.

Frohes Fotografieren!

Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer & WordPress-Entwickler bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.
Sponsor. Du bist auch interessiert? Kontaktiere uns →
Kostenloses SEO-Tool. Werbung für die OSG Performance Suite.

Jobs

Lead Entwickler Mobile mit Fokus iOS-Entwicklung

Karlsruhe

Grafik-Designerin

Freiburg im Breisgau

Sprachtalente

Volkach oder Würzburg

Zum richtigen Job

Agenturpartner

SEOlist.IO Frankfurt – SEO-Spezialist & SEO-Freelancer

Frankfurt am Main

BIZ Digital Marketing

Nürtingen

NETZhelfer GmbH

Ostfildern

VABELHAVT

Innsbruck

Online Solutions Group

München

Alle Agenturpartner

Lust auf mehr? Wir empfehlen folgende Artikel:

SEO Tools im Test: Das kann die OSG Performance Suite

Jedes SEO-Tool hat seine Berechtigung, Stärken und Schwächen. Manche Tools decken nur einen kleinen Bereich ab, andere verfolgen den All-in-One-Anspruch. Die OSG Performance Suite ist sehr umfangreich, wie unser Test ergab. Doch schau selbst:

 →   

Die 10 besten HTML-Editoren für Webentwickler

HTML-Editoren sind das vielleicht wichtigste Werkzeug für Webentwickler, denn HTML ist die Basis aller Webseiten. Wir haben für dich 9 HTML-Editoren ausgewählt und getestet:

 →   

10 phantastische Photoshop-Alternativen, fast alle kostenlos

Adobe Photoshop ist der Platzhirsch, doch es gibt kostenlose Photoshop-Alternativen, die je nach Bedarf dem großen Bruder in nichts nachstehen. Zeit zu wechseln?

 →   

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Bad Nauheim
  • Agenturen in Basel
  • Agenturen in Bayreuth
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Bad Nauheim
  • Agenturen in Basel
  • Agenturen in Bayreuth
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.