Using webkit2png to generate responsive screenshots

Terminal3 min readView on GitHub

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"

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 ""

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 ""

-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.


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


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.

If you found this article useful, why not support the upkeep of this website?

Get the articles

It’s my aim to help you be a better designer. Join my monthlyish email list and I’ll send new tutorials to help you design & code beautiful websites. You can unsubscribe anytime.

Also, as a subscriber I can provide critique on your designs—send something through after you confirm your subscription.