Productivity Updated on: 11 May 2020

7 ways to easily capture perfect full page website screenshots

Conceptboard Screenshot Tools

Highlights

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.Conceptboard full page screenshot

 

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.

 

+
  • Can do full page screenshots
  • Captures what you see
  • Captures custom areas
  • Works offline / with private pages
  • Recent captures library
  • No sign-up or login needed
  • Free
  • Extension install needed

Discover the power of visual collaboration

Centralize projects and communication on our shared, visual workspace

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 a Mac

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 a PC

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.

 

+
  • No additional software needed
  • Captures exactly what you see
  • Captures custom areas
  • Works offline / with private pages
  • No sign-up or login needed
  • Free
  • Cannot do full page screenshots
  • No capture management

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.

Customizable snapshots of any website

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.

+
  • No additional software needed
  • Can do full page screenshots
  • (Partly) no sign-up or login needed
  • (Partly) free
  • Capture may differ from what you see
  • Doesn’t work with private pages
  • Doesn’t capture custom areas
  • Capture management needs sign up

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.

Firefox hidden screenshot developer tools

 

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.

+
  • No additional software
  • Can do full page screenshots
  • Captures what you see
  • Works offline / with private pages
  • No sign-up or login needed
  • Free
  • No capturing of custom areas
  • No capture management

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.

Capturing entire pages in Microsoft Edge

 

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.

+
  • No additional software
  • Can do full page screenshots
  • Captures what you see
  • Captures custom areas
  • Works offline / with private pages
  • No sign-up or login needed
  • Free
  • Capture management needs additional software (OneNote)

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).

Chrome full page screenshot extension

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.

+
  • Can do full page screenshots
  • Captures what you see
  • Works offline / with non-public pages
  • No sign-up or login needed
  • Free
  • Extension install needed
  • No capturing of custom areas
  • No capture management

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.

Device simulation in Chrome

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.

Mobile device full page screenshot

 

Related

4 thoughts on “7 ways to easily capture perfect full page website screenshots

  1. Daniel, interesting, and useful; thank-you. One topic not directly covered is intellectual property related to screenshots. Assuming I am capturing images from my product’s UI as rendered on a browser, do I need permission from the creator of the browser, do I have full range of permission to cut, subset, resize, etc, or are there restrictions on what I must include from the browser (identification and tool bar image)? Additionally assume I am also testing a 3rd party product that uses a browser for configuration and I wish to include screenshots from a browser of their configuration. Do the same ‘rules’ apply relative to the browser (assume I have the permission and cooperation of the 3rd party application)? I note that Microsoft seems to restrict me from using 3rd party content in their images and a subset of the image. How about chrome and firefox; do they have similar restrictions?

    https://www.microsoft.com/en-us/legal/intellectualproperty/permissions
    Screenshots
    Do not use portions of screenshots.
    Do not use screenshots that contain third-party content.

Leave a Reply

Your email address will not be published. Required fields are marked *