Productivity Updated on: 5 April 2019

7+1 tips for perfect website screenshots

Conceptboard Screenshot Tools

How do you capture an entire website? A large one that scrolls, from top to bottom?

In my job as the founder of a visual collaboration tool, I’ve seen people find quite a lot of different solutions to that question. But very few know all the tricks, and as Google shows a lot of outdated information, I thought it’s time for an update: here are 7+1 tips you should know when working with website screenshots.

1. Windows’ and Mac’s built-in screenshot features

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

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

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

2. Using a website to capture your website

If your operating system doesn’t do full page screenshots, can the internet do it for you? Yes it can! There are many services out there that take full page captures from websites: you type in the URL, the service returns an image.

Customizable snapshots of any website

Here are some examples, and you might want to check out the tool suggestions Code in WP to find a service that works for you:

There are clear advantages to use a service for your screenshot, especially when you want to automate the capturing or check your sites in different browsers.

But there are also clear restrictions: in this case, another computer takes the screenshot and sends you the image, so the actual screenshot may not show what you see. For example, if the header image on your website changes randomly, or if the shop site you want to capture shows recommendations based on a personal profile, then it’s very likely that the screenshot you get will look different as what you see in your browser.

And of course, if you need a screenshot of a page, that is not yet public, the other computer won’t be able to access it. In such a case, these services won’t work for you.

+
  • 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

3. Firefox’s hidden full page screenshot support

If you’re using Firefox, there’s some functionality 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”. From that moment on you will find a small camera icon in your Toolbox’s menu bar, that captures complete websites in your Firefox browser.

Firefox hidden screenshot developer tools

To actually capture a screenshot, you need to open the Toolbox (see the shortcuts above), click the camera symbol, and then find the resulting image in your Downloads folder. A quite cumbersome process, but for some websites it seems to offer very good results.

In fact, taking an entire screenshot of a page that scrolls isn’t always easy: sometimes sticky elements just stay in the middle of the page while the user scrolls, or there are animations triggered by the scrolling. Firefox seems to handle these cases relatively well. If you’re having trouble capturing screenshots with other tools, this is worth trying.

+
  • 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

4. Capturing entire pages in Microsoft Edge

Microsoft’s newest browser generation, the Edge browser, offers some kind of website annotation, bookmarking and sharing functionality that they called Web Note. To offer these functions, Web Note provides a very prominent way of capturing a page, including full page capture support.

Capturing entire pages in Microsoft Edge

Capturing a page is easy: click the “Take a Web Note” button in your browser’s menu bar, and the browser bar switches in 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 create a region of the entire page. Releasing the mouse button automatically copies your capture into the clipboard, and you can paste it into other apps with Cmd + V.

+
  • 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)

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

6. Commercial extensions in the Chrome Web Store

In contrast to the very lean open source variant from before, most extensions in the Web Store offer some annotation and sharing features in addition to the actual screenshot. Whereas this may have advantages, having the need to login might not necessarily be wanted by everyone.

One prominent example is Awesome Screenshot, acquired by Diigo some time ago. The extension has a lot of users, but also a bumpy history: in early 2014 it was one of those that were accused of extensive user tracking. That’s a general threat when using extensions, as they might theoretically record your browsing behavior and even transmit it to 3rd parties without your consent or even knowledge.

Google reacted with a solid investigation, eventually banning more than 200 extensions from the Web Store. Until today, they apply additional measures to increase the security with their extensions, as still some cases of data abuse occur.

Awesome screenshot plugin button

Independently from the privacy discussion, Awesome Screenshot not only captures a screenshot very well, also the annotation works: your screenshots will show up in a new tab, but included in a frame that offers functionality to scribble on it, add text elements, or share in Facebook etc.

+
  • Can do full page screenshots
  • Captures what you see
  • Captures custom areas
  • Works offline / with non-public pages
  • (Partly) No sign-up or login needed
  • (Partly) Free
  • Extension install needed
  • Capture management needs sign up

7. The newcomer for full page screenshots in Chrome

Here at Conceptboard, we’ve got many customers that value the privacy of their screenshots a lot: they capture websites that are not yet public, and work with internal drafts that should not be available on the web. And that has made recommending a screenshot extension a difficult task for us.

In the end, we’ve decided to build and maintain our own simple and efficient screenshot extension, Full Page Screenshot by Conceptboard.

Conceptboard full page screenshot

Full Page Screenshot captures entire websites as well as page snippets. All screenshots are available in a recent captures area. It works without 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 a plus for the real professionals, we’ve included a few customization options that let the user customize the automated capture process. And to make working with it even faster, you can drag or paste the images directly in the apps you already use.

+
  • 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

Bonus: 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

Conclusion

Which tools work best for you depends on your use-case and the way you like to work most. Here are 4 categories you may fit in:

Occasional screenshots:

If you don’t need screenshots a lot in your processes, and full page screenshots only here and then, then going with the short keys of your operation system as well as Peter’s Full Page Screen Capture might work very well for you!

Frequent website captures:

If you’re capturing websites and website details a lot, but you still want to have an easy and straightforward process, try Conceptboard’s Full Page Screenshot extension. Comfort and quality are high, even without sign up or login.

Screenshot and annotation combined:

If you don’t mind signing up for a service to do website screenshots, you may go for extensions like Awesome Screenshot and get annotation and sharing features on top. Just keep an eye on privacy issues, like with all your other extensions.

Automated website captures:

If you want to automate website screenshots, chose one of the services to take screenshots via API.

I hope you’ve found this article helpful. Get in contact with me at @danielbohn_de – I’d love to hear your feedback!

Related

4 thoughts on “7+1 tips for perfect 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 *