Using webkit2png to generate responsive screenshots

If you ever have to create screenshots for a website, it can be quite a tedious process. In this post I will show you a way to do it easily with webkit2png. We’ll set up an array, which will generate a full sized screenshot with a unique name from your specified website.

Unfortunately webkit2png is only supported on Mac OS X, as far as I’m aware.

Installing webkit2png

This could be a daunting process and hopefully I can guide you through it. Command line tools are great, but usually come with a little installation overhead.

Install Homebrew

Homebrew is a package manager for OS X. If you’d like more information I recommend visiting the website. It makes it easier to install things like webkit2png from one place.

1. Open up terminal
2. Paste the following line into terminal and press enter

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Install webkit2png

It should only require you to enter the following into a new terminal window:

brew install webkit2png

Generating screenshots

To generate the screenshots we need to use the following code.

array=( 1600 768 320 )

for i in "${array[@]}" do
  webkit2png -Fs 1 -W $i --filename='screenshot-'$(date +%Y%m%d-%H%M%S) --delay=4 "http://iamsteve.me"
done

Command walkthrough

If you find it difficult to understand the command, I’ll explain what each line does.

array=( 1600 768 320 )

Each value within this array contains the width of the screenshot.

for i in "${array[@]}" do

Start the loop using our array.

webkit2png -Fs 1 -W $i --filename='screenshot-'$(date +%Y%m%d-%H%M%S) --delay=4 "http://iamsteve.me"

-Fs 1 means that we want only a full size screenshot, with a scale of 1. This is important webkit2png will generate 3 types of screenshot by default. Without the scale 1 it can lead to screenshots not being generated at the correct width.

--filename

Generating the screenshots with a name with the date added to it. So it will be unique

--delay=4

Will delay it for 4 seconds, I found on occasion it didn’t load fonts for some websites. It could be a little excessive, so tweak as you need.

Hopefully you have found this helpful

It’s something we have to do on occasion and it makes it really easy to do screenshots. It’s quite flexible in the options too. If you enter webkit2png --help into terminal you’ll be returned all of the options.

If you have alfred, there is a workflow that can do it for single screenshots.