7 ways to easily capture perfect full page website screenshots
Capturing a screenshot of your screen is a simple way of sharing ideas, IT problems or documents with anyone who can’t see your screen. Remote workers and distributed teams especially rely on screenshots to communicate on a range of design or development projects.
Taking and sharing screenshots is also vital for gathering stakeholder feedback and sharing progress on website development before it’s available publicly. In this instance, a simple screenshot is not enough, and you need to capture the entire webpage- above and below the fold. Luckily, it’s not as hard as it used to be. In this article we’ll show you seven ways you can capture perfect website screenshots.
Once you’ve captured your screenshot, you can paste the image into Conceptboard and share a link with your team. You can then collect ideas, scribble or annotate directly on the image, saving time and effort, and reducing never-ending email chains.
Option 1: Full Page Screenshot by Conceptboard
Here at Conceptboard, our customers continually tell us that the privacy of their screenshots is paramount, whether it be because they hold sensitive internal information, or perhaps the websites they wish to capture are not yet public.
But as we can never be 100% sure of the security of external providers, we decided to build our own simple and efficient full page screenshot Google Chrome extension, Full Page Screenshot by Conceptboard.
This extension can capture entire websites as well as page snippets. All screenshots are saved in the recent captures folder. It works without any additional sign up or login and ensures privacy on enterprise level: all data is processed and saved only on the user’s device, and there’s no user tracking or any other communication to our servers.
As an added bonus, we’ve included a few customization options that let the user customize the automated capture process. Plus, you can drag or paste the images directly into any apps you already use such as Conceptboard, Word or Photoshop.
Discover the power of visual collaboration
Option 2: Single page screenshots
The operation systems offer a lot of screenshot functions. Sadly, none of them can capture a full website or a scrolling window, but when taking a single snapshot of some part of a website, they can come in handy.
How to take a screenshot on Mac
On Mac, the most useful – but also quite unknown – short key combination for screenshots is Cmd + Ctrl + Shift + 4. It lets you select an area of your screen. If you press the Space key afterwards, you’ll get the option to capture one of your current windows. In both cases, the images are copied into the clipboard, so you can paste them directly into Photoshop or other apps by pressing Cmd + V.
If you’re not into keyboard shortcuts, you can access the same functionality with Mac’s Preview app: Open Preview and find the same options in the File menu. Screenshots taken like this will show up in a new Preview window. From here you can either save it to a file, or copy it into the clipboard via the edit menu: first click Select All, then Copy.
How to take a screenshot on Windows
On Windows, the key combination Alt + PrtSc (Print Screen) captures the currently active window.
Like on Mac, the screenshot will be copied into the clipboard, so you can insert it into other software by pressing Ctrl + V.
The non-shortcut way on Windows is called Snipping Tool. This is a small app only for screenshots: click New to capture one of your windows, then save your capture as an image or use the Edit menu to copy it into the clipboard.
Option 3: Using a website to capture your website
There are many services out there that take full page screenshots from websites: you simply type in the URL and the service returns an image.
Try them out and choose one that works for you:
This option may be advantageous when you want to set up automatic screen capturing or check your sites in different browsers. But there are also some disadvantages, as another computer actually takes the screenshot and sends you the image, so the actual screenshot may not be exactly what you see based on different accessibility, paywalls, geo-locations or screen sizes. Plus, if you need a screenshot of a page that is not yet public, the other computer won’t be able to access it.
Option 4: Firefox’s hidden full page screenshot support
If you’re using the Firefox browser, there’s some functionality that allows you to take a full page screenshot without installing additional software, although it’s hidden in the developer tools.
First, you need to enable the functionality: open the Toolbox by pressing Ctrl + Shift + I on Windows, or Cmd + Opt + I on Mac. Next, open the Toolbox Options by clicking the small cogwheel, and check the option “Take a full page screenshot”. Then you will find a small camera icon in your Toolbox’s menu bar, that captures complete websites – when viewing them on Firefox.
To actually capture a screenshot, you need to open the Toolbox, click the camera symbol, and then find the resulting image in your Downloads folder. It’s quite a cumbersome process, but for some websites it offers a very good output.
Option 5: Capturing entire pages in Microsoft Edge
Microsoft’s newest Edge browser offers website annotation, bookmarking and sharing functionality called Web Note.
To capture an entire page, simply click the “Take a Web Note” button in your browser’s menu, and the browser bar switches to a mode with pens for annotation, as well as a Clip tool. Select the Clip tool and drag on your screen to define a region to copy.
If you select your region from the top left corner and then move your mouse to the bottom of your browser window, the page scrolls down and lets you capture the entire page. Releasing the mouse button automatically copies your capture onto the clipboard.
Option 6: Open source screenshot extensions for Chrome
Other than Firefox and Edge, Google’s Chrome browser doesn’t offer any screenshot support by itself. Instead, it allows companies and developers to deliver such add-ons via its Web Store.
If you want to search the Web Store on your own, please keep in mind that you will need an “Extension” (the “Apps” that promise screenshot support will require you to install an extension afterwards), and make sure to choose a provider you trust (see my next tip).
One safe choice is to rely on open source material, like Full Page Screen Capture by Peter Coles, a software engineer from NYC.
The extension is pretty straightforward: clicking the screenshot icon captures a full website, and while the capturing is running, a small pac-man shows progress – very nice!
The capture opens in a new tab, and you can copy it into your clipboard or save it locally. If you are interested in the code, you can find it here.
Option 7: Capture full page screenshots on mobile devices
Nowadays, tablets and mobile phones are responsible for more than 50% of web traffic. As many websites look very different on these devices, restricting the screenshot question to only Mac and Windows won’t help us much. In addition, for many websites there’s not only one version for mobile, and one for desktop. Instead the page adapts responsively to the device’s width, for example, resizing elements on orientation changes from portrait to horizontal.
That means, when you want to check your website in a mobile browser, you actually need to have multiple devices in mind. The question is how does the page look in the iPhone 6, the Nexus 7, and the iPad Pro – just to name a few? And as handling all these devices seems impractical, there’s little incentive for suppliers to equip them with screenshot capabilities that go beyond a simple snapshot.
One way to resolve this is to use a screenshot service (see tip number 2). Here you can define the mobile device you like to take your screenshot from, and you’re done.
The other more flexible way is simulating a mobile device in your own desktop browser: this lets you dynamically interact with the websites as if you were using your phone or tablet, but always gives you the possibility to use all regular browser features and especially your extensions (see tip 5, 6, and 7).
To use the device simulation in Chrome, first open the Developer Tools in your Chrome browser by pressing Ctrl + Shift + I on Windows, or Cmd + Opt + I when using Mac. In the Developer Tools, click the button in the top left corner of the menu: Toggle Device Toolbar.
Then your actual website will be included in an additional frame, giving you the possibility to select the mobile device you want to simulate. As your extensions will still work, using them to capture a full page screenshot from the mobile device you’ve selected is easy.