Tips for taking screengrabs of websites

22 September 2019

I end up taking a lot of screengrabs of websites (or parts of websites) for use here on Technicallyproduct.co.uk, and I've learned a few things while doing so. Here are my hints and tips.

1. Thinking big

If you are going to be editing your screengrab at all before using it, you will want the original to be as large as possible. This will give you more flexibility when cropping or resizing, for example.

Where you are taking a screengrab of part of a website, considering using the browser zoom to help you with this. Although this will not improve the quality of photographs, it can help text or vector images look less pixelated if you subsequently have to blow up the image.

In Google Chrome on a PC, the keyboard shortcut to zoom in is Ctr + (or Command +, I believe, on a Mac). Ctr 0 will resize to the original size (or Command 0 on a Mac).

2. Taking the grab

In most instances I use the 'Print Screen' key, paste the grab into Microsoft Paint, and save it from there.

However if I need to capture an entire (scrolling) web page, I use a free Chrome plugin called FireShot. It also has a 'save as PDF' option which can come in handy.

There's also a paid-for 'Pro' version of FireShot available which I have not tried.

3. Editing the image

Although I do have access to Adobe PhotoShop, this can be a little too overpowered for some simple cropping and resizing. So my current tool of choice is Pixlr's new online photo editor, Pixlr X. This is also free to use, though it has a paid-for stablemate called Pixlr Pro which more closely resembles Photoshop.

After cropping away unneeded parts of the image, I try to resize the screengrab down to standard dimensions that I can use in multiple contexts. I have settled on 1200x630px, my preferred size for a WordPress 'Featured Image' (as it generally works well with the main social media channels).

If I also need to use the same image on the body of a WordPress post, and do not need to change the aspect ratio, I will then rely on WordPress's 'Size' option to display it at a smaller size. This saves me from having to save off multiple versions of the same image in Pixlr.

4. Applying CSS

Many of the screengrabs that I take are of websites with a white background. These are then used on Technicallyproduct.co.uk, which also has a... white background. So the screengrab can be lost somewhat.

To counter this, I have created a CSS class that I can selectively apply to screengrabs. This applies a keyline (thin border) around the image, as well as a subtle grey drop shadow to the bottom and right side. In effect, it turns a screengrab like this:

GAIQ all of the above

Into this:

GAIQ all of the above

 

I have called the class .screengrab so that I can easily remember it! The CSS is currently:

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © James Clark
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram