Easy Ways to Take a Browser Screen Capture
November 28, 2012
Taking a browser screen capture is a common task for anyone on a team responsible for managing a website. Let’s explore a few recommended ways to take a browser screen capture using your OS, browser and blogging software. We’ll also look at some advanced tools and techniques that allow you to annotate screenshots, save temporary copies online, and more.
Browser Plugins & Addons
Taking a browser screen capture from within your browser is often the easiest and fastest way to get the job done. Browser plugins, add-on’s and extensions make this possible. These tools add features directly to your web browser, making it easy to take a browser screen capture. Many of these extensions allow you to selectively choose what you want to take a screenshot of: A selected portion of the screen, the visible page, or the entire length of a site including the portion that you would normally have to scroll to see.
Awesome Screenshot for Firefox, Chrome & Safari
This is my #1 recommended tool of choice. With over 1 million downloads in the Google Chrome web store alone, Awesome Screenshot is one of the best browser tools out there for taking a browser screen capture.
Awesome Screenshot browser extension for Firefox, Chrome and Internet ExplorerThe tool will allow you to take a screenshot of an entire website, annotate sections, and store the photo online temporarily for 3 days. I use the annotate feature to provide easy to understand support and training through email.
The ability to take a screenshot of an entire website, including anything that is buried beneath the fold, makes this tool one of the best options for taking a browser screen capture.
Fireshot
Fireshot is another great browser extension for taking snapshots of a website. With Fireshot, it’s easy to capture web page screenshots in Firefox, Chrome, or Internet Explorer. You can easily perform quick edits to your shots, adding text annotations for example.
You have the option to save the web page screens as a PDF or image file, send them via e-mail, print, copy to clipboard, export, share on the web or upload to FTP.
Blipshot
Blipshot is another great tool with a focus on simplicity. If you want to add a fast, reliable, dead simple screenshot tool to your browser then consider this a great option.
Unfortunately, this extension is available for Google Chrome only at this time.
Desktop Applications & Programs
There are many software applications that aim to simplify the process of taking a browser screen capture. Some cost money, but many are free. The applications I’ve chosen to feature below are completely free, and to be honest, are just as good as many of the premium options out there.
WebShot for Windows
WebShot allows you to take screenshots of web pages and save them as full sized images or thumbnails.
Screenshots images can be saved in many different formats including JPG’s, GIF’s, PNG’s, and BMP’s. The freeware version comes with a demo of the command line interface, which can be purchased, and used to streamline the screenshot process on whole websites.
There is also a server edition of WebShot that comes with a DLL, allowing software engineers to embed WebShot technology into website applications. If you need to add screenshot capabilities to your website application then this website snapshot tool is a good option to explore.
Paparazzi for Mac OS X
Paparazzi is a small utility for Mac OS X that makes screenshots of webpages. It’s simple, free and easy to use with no bells, whistles or added thrills. Consider using this if your want a stand-alone application that is easy to use on a Mac.
InstantShot! for Mac OS X
InstantShot! is a solid freeware option with many advanced features.
InstantShot! offers classical screenshot functionality for capturing the whole screen, a portion of it or a window and also the option to make timed screenshots or to make delayed captures over time. It offers a wide range of preferences and options to fit everyone’s needs.
Built-in Operating System Methods
Believe it or not, there are many ways to take screenshots built-in to your operating system, without the need for additional software. These OS actions can easily be used to take a browser screen capture.
Windows Print Screen
The old school Print Screen button on your Microsoft Windows keyword will take a screenshot anything on the current screen and store it in your clipboard, allowing you to paste the screenshot into a graphics editor like Windows Paint or Photoshop.
Windows Snipping Tool
Since the release of Vista, Windows has a built-in Snipping Tool that makes screenshot grabbing simple. To use the tool follow these steps:
- Click the Start button to open the menu.
- Click the All Programs menu option.
- Click the Accessories group
- Select the Snipping Tool icon [img]
The Vista snipping tool provides an easy way to capture a portion of your screen, including anything inside of a web browser.
Mac OS X Screenshots
There are several keyboard shortcuts that will take screenshots in Mac OS X.
- Command-Shift-3: Take a screenshot of the screen, and save it as a file on the desktop
- Command-Shift-4, then select an area: Take a screenshot of an area and save it as a file on the desktop
- Command-Shift-4, then space, then click a window: Take a screenshot of a window and save it as a file on the desktop
- Command-Control-Shift-3: Take a screenshot of the screen, and save it to the clipboard
- Command-Control-Shift-4, then select an area: Take a screenshot of an area and save it to the clipboard
- Command-Control-Shift-4, then space, then click a window: Take a screenshot of a window and save it to the clipboard
Mac OS X Leopard introduced the following shortcuts that can be held down while selecting an area (via Command-Shift-4 or Command-Control-Shift-4):
- Space: to lock the size of the selected region and instead move it when the mouse moves
- Shift: to resize only one edge of the selected region
- Option: to resize the selected region with its center as the anchor point
I use these shortcuts all the time to quickly take screenshots of a specific application, a browser window, or a selection.
iOS Screenshots
If you’re using a mobile device that is running iOS (Apple Safari) you can take a screenshot by pressing the Home and Sleep buttons at the same time. The screen will flash white and if your sound is enabled, you’ll hear the photo snap sound.
Website Development Methods & Plugins
Browser Shots WordPress Plugin
This plugin allows you to easily add a browser screen capture to your website by adding new functionality to the visual editor inside of WordPress.
In Conclusion
There are many ways to create a browser screen capture. You can use features built-in to your operating system, try adding extensions to your web browser, install stand-alone software, and even integrate plugins directly with your website. Whatever method you choose, hopefully this information makes the process of taking a browser screen capture much easier.