Quick Tip: How to Take Screenshot of a Complete Webpage

Today I want to tell you about how to take screenshots of a webpage (I know I've just repeated the post title). So, for this, you have to have Mozilla Firefox installed in your computer because to take screenshots of a webpage there's a plugin in Firefox named Abduction (not sure if it is available for Chrome or Safari) that I'm going to tell you about.

Anyway, to install this plugin, just go to Google and type Abduction plugin in the search box. Most probably the page we want to visit will be displayed at the first position in the search results (refer to the screenshot below). Visit this page.

Search Google for Abduction Plugin

After you visit the webpage, you'll see a big green Add to Firefox button. Just click on it to install this plugin to Firefox. At the time of this post, its current version is 3.0.18. 

Firefox Add-On page

After you click on the Add to Firefox button, a pop-up window will appear. Just click on the Install Now button.

Installation Window for the plugin

After clicking on the Install Now button, a tool-tip will appear at the top of the page asking you to restart Firefox to complete the installation of this plugin. Just click on Restart Now button.

Restart Firefox to complete installation

After you'll restart Firefox, your plugin will be ready to use. To test it, visit any website you want to save as an image. Let me take a screenshot of one of Tuts+ websites, in this case its WebDesign Tuts+. 

To save its screenshot, right-click on an empty space (make sure you don't right click on an image otherwise It'll save only that image) and select Save Page As Image option from the Context Menu.

Select Save Page As Image option

The moment you'll click the Save Page As Image option, the whole webpage gets selected and a bar will appear at the top of the page where you'll see three different options.

Selected area of a webpage

Let me tell you about these options very briefly.

1. X-Ray
When you click this option, wherever you take your mouse pointer on the screen, it'll highlight sections of that page (in yellowish-green color) which you can save by left-clicking on your desired section (which will highlight that portion in blue color) and then click on the Save Selection option in the pop-up bar at the top. Just give it a name and click Save. 

How to use X-Ray option of Abduction plugin

2. Select all

This option is self explanatory. After clicking on the Save Page As Image option, this option is selected by default. And quite obviously it selects the whole webpage. All you need to do is click on the Save Selection option in the pop-up bar at the top and it'll save the whole webpage.

How to use Select all option of Abduction plugin

My output is like this:

Whole webpage is saved as an Image

Note: All images that you save using this plugin is in PNG format. I don't know how to save these images in other formats so don't ask.

While the X-Ray option limits you in selecting only some specified portions, with the Select all option, it is possible to custom select a portion (of any size) of a webpage. Here's how you can do this. 

After selecting the Save Page As Image option, Select all option is selected by default so no need to click on it again. All you need to do is to move your mouse pointer to a location that is not selected (not blue). 

When your mouse pointer is on any selected area, it turns into a four-sided arrow icon and when you move it outside the selected area it turns into a cross-hair icon. Cross-Hair icon is an indication that now you can select any area of the webpage with any size you want.

Four-Arrowed Cursor when hovered over a selected region

Cross-Hair Cursor when hovered over a non-selected region

After your mouse is turned into a Cross-Hair icon, just click and drag anywhere on the webpage and make a selection area. (see the screenshot below)

Use Cross-Hair to custom select an area

After making the selection, click on the Save Selection button in the pop-up bar at the top of the page. Name the file and Save it.

Final output is shown below

Final output after Custom Selection

3. Save selection

This option is used to save a selection, either made from the X-Ray option or the Select all option.

Well this Quick Tip became rather Slow-Long Tip but anyhow I hope that this post will prove to be beneficial for you guys. Till next time. Don't forget to comment.