How to Take Website Screenshots with Chrome Browser
Did you know that you could take screenshots of websites from within your web browser easily? In this tutorial, I will demonstrate how to take website screenshots in Google Chrome with the help of a simple extension.
(If you are also a Firefox user, you can check our tutorial about taking screenshots of websites in Firefox.)
You may need to take a screenshot of a website or web application for a number of reasons. For example, you may be a web designer and you may want to collect a number of beautiful website screenshots to get inspiration, in addition to checking their HTML source code. Or, you may have an issue with a website or web application you are using and take a screenshot of it and send it via email to the support. Or, you may want to capture a part of a Facebook conversation for future reference or as evidence. Maybe you want to take a screenshot of your website and use it as the YouTube banner on your channel.
The simplest way of taking a screenshot on your computer screen is to use the Print Screen button, which captures what is visible on the screen at the instant of pressing the button and stores it in clipboard, from where you can then paste into an image editing software.
You can use the print screen method to take screenshots of anything you want including the Windows interface, software applications and files. You can also take website screenshots while viewing them within your web browser via the print screen button. However, this screenshot will be limited in a number of ways. For example, it will contain the top navigation bar of the browser, the bottom navigation bar of Windows and even if you view it in Fullscreen (F11), you may still have the scrollbars visible in the screenshot. Besides, you will be able to capture only the visible area of the website, i.e. not the whole site.
As a better solution for taking website screenshots, you can use browser extensions that offer this feature. This tutorial will show you how to install and use such an extension for taking screenshots in Chrome.
Also Check: You may also find the following Chrome tips to be useful:
Make Chrome the Default Browser
Reopen Closed Tabs in Chrome
Bookmark All Tabs in Chrome
Add Custom Userstyles to Chrome
Chrome Extensions for Web Designers
Take Screenshots of Websites in Chrome
The extension we will be using is named Awesome Screenshot and it has over 2 million users with lots of great feedback. In a way, this tutorial will also explain how to use the Awesome Screenshot extension on Chrome. Our first task is to find it on the Chrome Web Store and install it.
STEP 1: Open Chrome browser and go to the Chrome Web Store using the following link:
STEP 2: Type "awesome screenshot" into the search box at the top left corner and press Enter.
Filter the search results to Extensions by clicking on the Extensions radio button below the search box.
You should now see the Awesome Screenshot: Screen capture, Annotate extension listed at the top of the search results page.
You can either click on the extension entry to open the details window and learn more about the extension features and user reviews or simply click on the Add to Chrome button to directly install the extension.
STEP 3: Click on the Add to Chrome, which will ask your confirmation and then install it on your browser.
Once the extension is installed, a button will be added to the top menu of Chrome. Depending on how frequently you will be using this extension, you can either hide or display the button.
From now on, whenever you want to take a website screenshot, you will use this button.
STEP 4: Open any website that you want to take a screenshot of and then click the Awesome Screenshot extension button.
A dropdown menu with a number of options will appear.
As you can see from the dropdown menu, Awesome Screenshot allows you to take website screenshots in a number of ways including capturing the entire page, capturing the visible area, capturing the selected area on the page, and even capturing the desktop.
STEP 5: If you want to take a screenshot of the whole web page, select Capture entire page option.
The active web page will be prepared for the screenshot. This may take a few seconds depending on the height of the page. On the next page, you will see a number of (optional) image editing options that you can use before saving your screenshot.
STEP 6: Once ready, click Done button.
On the final page, you will see the Local Save section at the center of the right sidebar. From here, you can either save the screenshot image as a file, copy it to clipboard or print it.
STEP 7: Click the first button in the Local Save section, which will save the screenshot to your computer.
You can also change the options for capturing and saving screenshots on Awesome Screenshots Options panel, such as the output image format -JPG or PNG- (see common image formats), keyboard shortcuts and delays.
This concludes our tutorial about how to take screenshots in Chrome and hopefully it will help you in your work from this point forward.
TIP: You can also take screenshots on Android, which may be quite handy in certain occasions.
More Chrome Tips