In monitoring my SEO work, I have to capture webpages not as saved html but as an image. Simply clicking on the ‘print screen’ button won’t capture the whole web page.
To capture web page usually involves screen capturing software or screen capture download (browser extensions), which may or may not be free. But most of the free ones are as good as the paid ones. My favorites are of course, you guessed it, the free ones. Freeloaders!
When I say, capture web page, I don’t mean save a webpage as html. I meant to capture web page as an image. There are several reasons why you might want to capture a web page as an image. Some of them are the following:
- Save a webpage as an image for presentation purposes, e.g. powerpoint slideshow, reduced size image for presentation in an article.
- Capture web page as an image because it can not be saved as an html file.
- Capture various states of a webpage in a sequence of changes.
You can add more. In my website design process, I sometimes capture different web pages for comparison in choosing the best looking arrangement of elements and design. In my SEO monitoring of my sites, I find I can save more exact information by capturing the whole google search result page as an image than saving it as an html file. Sometimes, in checking the possible adsense ads that get generated for a particular article, you can only save the result if is captured as an image. If you save the page as html, you’ll never see the adsense ads when you open it offline, or if you open it again online, you may not see the same ads which you saw before. I am sure I’m going to find some other purposes for capturing webpages as I progress in this ‘career’.
Capture web page using Aviary.com
You found a remarkable page, say, ‘http://moralde.com/capture-webpage-my-3-favorite-methods/’ and you want to save it as an image. All you need to do is to click on the url box of the browser and type ‘aviary.com’ before the current url address. So, the url now becomes ‘aviary.com/http://moralde.com/capture-web-page-my-3-favorite-methods/’. Then, press enter.
You will then be presented with an online graphics editor on which the page is presented for editing. Now, you can draw lines, arrows, free-hand scribbles, eyedropper, etc on the captured webpage. If you opt to use the ‘advanced editor’, you’ll get photoshop-like capabilities and features.
In the regular editor, you either save the image in .PNG format, or ‘save & host’ online by copying the url of the images hosted in the aviary site which you can then embed on your page. In the advanced editor, it is saved in the aviary.com site as an .egg extension file which you can embed on your own page for presentation. There are choices for image size, but choosing ‘full’ does not necessarily deliver a full size image. Instead, you get a reduced representation of the whole image. As an alternative to the need to type in the url box, there is a firefox extension which you can install instead.
This one requires you to install an extension, say, in firefox. On first use, it prompts if you want to make it available in IE too. If yes, it installs the plugin in IE automatically.
You’ll find the fireshot button on the top-rightmost corner of your browser. Clicking on the right side of the button (the part with the down arrow icon) drops down a menu from which you can choose (among other choices) whether to capture only the visible area or the entire page. Whatever option you choose, you’ll be again given another set of options, some of the most useful are:
- capture & edit: The fireshot window appears and you can then edit the captured image with a lot of editing features, e.g. add lines, arrows, scribbles, text, etc..
- capture & open in external editor: You will be prompted to choose your favorite image editor on which to edit the captured image.
- capture & copy to clipboard: You can then use the image copied to the clipboard as you please, e.g. paste it on your document.
- capture & save: You will be prompted to save directly to your chosen directory (as .bmp, .jpg, png, or .jpg).
I kind of like fireshot better than aviary. If I switch to Fireshot Pro, which however requires payment (~$34), it becomes even way better with a lot of cool features. For my purposes however, the free version is good enough. You can add fireshot to firefox by clicking here.
Snapper (firefox plugin)
This is a screen capture download (a firefox plugin) that works just like fireshot but without the editing features. Once installed, you’ll find red snapper fish icon at the status bar area of your firefox browser. Right click on it and you can set your preferences like:
- Simple – Click, drag, snap: Capture a portion of a page by clicking and dragging your mouse over the area you want captured.
- Full Page – Snap the entire page: This means the whole page is captured automatically.
- View Pane – Snap the portion of the page that is currently visible.
It’s then very easy to capture webpage with snapper. All you do is right click on any part of the page and click on the pop up menu entry ‘Start Snapping‘. Then you can save the captured image as either jpg or png. If you wish to cancel and not proceed with the snapping, you just right click and select ‘cancel snapping‘. Note that after you ‘start snapping’, you can no longer navigate the page like a normal page. You return to normal browsing after saving the snapped image or cancelling the ‘snapping’.
Snapper differs from the above 2 by the absense of an editing feature. However, this shortcoming makes snapper the lightest among the rest. You can add snapper to firefox here.
Have you also used some kind of software that also capture web page? I’m sure there are a number of other screen capturing software out there. These just happens to be my favorites. If you find or is already using something which you feel is better than the above mentioned screen capturing software, drop me a line and I’ll check it out.