Taking Website Screenshots Using Screengrab!

I used to take screenshots of websites with Print Screen and then in Photoshop crop the part that I wanted to keep, but I always figured that there had to be a better way. So after I installed Firefox 3 I went looking for good extensions and I came upon Screengrab! created by Andy Mutton. This excellent Firefox extension lets you take a screenshot of a selected portion of the page, what is visible on the screen, or the whole page scrolled down all the way to the bottom. This last option is fantastic when you need a screenshot of the entire page, which might be several screenfuls all the way to the footer, and there is no cutting and pasting involved. The extension automatically removes all of the browser chrome from the image so you will not see the navigation bar and tabs at the top or the scrollbar to the right. You have the option of either saving the screenshots as PNG or JPG images, or copy the image to the Clipboard so that you can paste it in your favorite image editing application.

I often want my screen shots to be really neat so I go above what Screengrab! is capable of. The resolution of my laptop screen is 1680×1050 pixels and when I take a screenshot of the visible area of the screen with Screengrab! the end result is 1663×893, which, to be perfectly honest, bugs me; I like my numbers to be even. So I have created a standard size that I use for my screenshots: 1200×800. However, you cannot just crop the image from 1663×893 to 1200×800 or you will lose information on fluid-width websites, and you have to take into consideration if the design is left-aligned, centered, or right-aligned. So what I did was to create a few bookmarklets that resize my browser window so that the screenshot will automatically be 1200×800 in size. The code that I use is: javascript:window.resizeTo(1233,943); but if you want to use it you will have to adapt it to your browser since there is a small variation between operating systems, and the look and feel of the Firefox browser can be changed with customization.

The first step is to create the bookmarklet, and you do this is by creating a bookmark, but instead of a website link you add the code from above. The simplest way to personalize this code to your browser is by running my code and taking a screenshot with Screengrab!. Then you investigate the file dimensions; e.g. if you were to get 1205×770 you would change the code to: javascript:window.resizeTo(1228,973); (i.e. subtract 5 from the first number and add 30 to the second number). However, there are some variations depending if the website is taller than the screen, which makes the scrollbar pop up, or if you only have one tab open, which leads to no tab bar appearing at all, so it might be a good idea to create a few different bookmarklets for the different cases. Furthermore, you might prefer a different size for your screenshots, so please make changes to the code so that you get your preferred size. Of course you can still take screenshots of the complete page, in these cases you will get a predetermined width but the height will be decided by the web page content.