7+1 tips for perfect website screenshots
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.
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.
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.
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.
Here are some examples, and you might want to check out the great comparison on http://freescreenshotapi.com 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.
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.
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.
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 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.
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).
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.
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.
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.
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.
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.
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.
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.
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:
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 @danielb0hn – I’d love to hear your feedback!