When you need to take a screenshot, you probably default to keyboard shortcuts - either the ‘Windows + PrtScn’ for Windows or ‘Shift + Command + 3’ for Mac. But what if you want to capture a full webpage?
Nobody wants to take a bunch of individual screenshots and then waste time merging them, right? In this article, you will learn how to take full-page website screenshots with a shortcut.
You’ll also learn how to get them uploaded automatically to Google Drive, add annotations, or even take them directly with in-built browser tools.
Option 1: Bardeen
Do you take screenshots often? If yes, you would want to make the entire process seemless.
Bardeen is the browser extension that will make this possible. Not only can it take screenshots with a shortcut, Bardeen allows for other workflows.
You can take full-page website screenshots periodically, take screenshots in bulk of over 10-20 websites at once, and even automatically upload screenshots directly to the cloud (Drive or Dropbox).
Pick one of the pre-built automations, install the extension, and run them with a shortcut (Option + B)
Option 2: Full-page screenshots with annotations
When taking screenshots, you might want to draw the viewer’s attention to a particular area of the image or share a message with them. For this, you’ll need to annotate the screenshot. That’s not possible in Bardeen yet, but there are other apps you can check out.
Nimbus Screenshot is an excellent free extension for this. It allows you to take full-page screenshots, add annotations, and edit images.
CleanShot is a paid app, and offers more features than just taking full-page screenshots, like text recognition, annotation, and a built-in video editor.
Shottr is free, and it has a built-in ruler for pixel-level accuracy, which makes it suitable for designers and front-end engineers.
If you take screenshots often and need a more in-depth solution, go check both of these out!
Option 3: Capture full-page screenshots right in the browser
If you don’t want to bother with downloading any extensions or desktop apps, you can take a full-page website screenshot in the browser itself! Here’s how to do it.
If you’re using Chrome, you can do this from the Developer Tools.
Click the menu icon at the top-right of the window, select More Tools and then Developer Tools.
Now, you’ll see the Element Inspector Developer menu. Click the three-dot menu on the right and select Run Command.
Type ‘screenshot’ in the window that appears.
Click on it and watch the magic happen.
The screenshot will be available in Chrome's Download Manager.
Sounds like too much work? You can also try to ‘Print’ the page and then save it as a PDF. The same is also possible with Safari. Just open the File section in the Menu bar and select the ‘Export as PDF’ option.
The formatting won’t be the same, but if it’s not a deal breaker, it is an easy option.
Firefox has an in-built feature for taking full-page screenshots too, which you can read more about here.
So, there you have it: these were three ways to take full-page website screenshots! We learned about Bardeen and its useful features, how to take screenshots using Inspector in Chrome, and some other tools like Nimbus Screenshot and CleanShot.
If you want to get structured data from a page (like a table), you may want to learn about web scraping. That can be a very interesting topic (and a rabbit hole for some people), and screenshots only scratch the surface. It will allow you to save LinkedIn contacts to Sheets with a click and so much more.
The scraper can also extract data from almost any website. Check out our guide to read more about it!