While building a responsive site recently I experimented with capturing device specific screenshots using Grunt and webkit2png. To make things easy to manage in Grunt I placed all my commands into a simple bash script that accepted one parameter for the website URL.


webkit2png --scale=1 --width 320 -o "iPhone-Portrait" $1
webkit2png --scale=1 --zoom 2 --width 320 -o "[email protected]" $1

webkit2png --scale=1 --width 568 -o "iPhone-Landscape" $1
webkit2png --scale=1 --zoom 2 --width 568 -o "[email protected]" $1

webkit2png --scale=1 --width 768 -o "iPad-Portrait" $1
webkit2png --scale=1 --zoom 2 --width 768 -o "[email protected]" $1

webkit2png --scale=1 --width 1024 -o "iPad-Landscape" $1
webkit2png --scale=1 --zoom 2 --width 1024 -o "[email protected]" $1

I realized that with very little work I could make this into a simple command line script that, through the use of flags and parameter, could be a useful addition to my toolset.

I have open sourced respond2png on GitHub and can be installed with one simple command. respond2png captures both iOS and Android device sizes in both 1x and 2x (retina) formats.

$ respond2png --ios --retina http://localhost/