The Easiest Way to Take a Webpage Screenshot – Smart Web Developer

Skip to the content

Do want to take a screenshot of an entire webpage, not just the part the webpage that fits on screen? This article describes how to take a full webpage screenshot using free software. This method will take a screenshot of a webpage, including the part below the fold. This method is automatic, and does not require manual scrolling.

This automatic method is much better than a manual scroll, shoot and stich process that many people still use:

1. Take a screenshot of the visible part of the webpage.
2. Scroll to the next part of the webpage.
3. Take another screenshot.
4. Repeat until there’s a screenshot of every part of the webpage.
5. Manually stitch the shots together in Photoshop or Gimp.

The automatic solution is to use the Screengrab add-on for Firefox.

Here is an example screenshot I created using Screengrab:

Screenshot of a full webpage

Screengrab can either copy the screenshot to the clipboard, or save the screenshot as an image file. Screengrab can screenshot a complete page, a complete frame, the visible portion of a page, selection of a page, or a window.

For more information about Screengrab, or to install it in FireFox, go to the Screengrab plugin page. Once Screengrab installed, just click the little icon at the bottom right of the FireFox window to take a screenshot.

If the page is very, very tall, when you save a screenshot image, it has happened to me that the PNG could be squashed vertically. Here is a workaround I use get the very tall screenshot in the right proportions on Mac:

1. Screenshot the entire web page to the clipboard (instead of saving it to an image file).
2. Open the Preview application.
3. Choose File | New from Clipboard.
4. The image will appear in the right proportions in Preview.
5. Save screenshot from Preview in the image format of your choice.

Tested with Firefox 3.5 on Mac OS X 10.6 Snow Leopard, and FireFox 4.0 (4.0.1) on Windows 7.

- Tags
  Mac, Take Screenshots