Capture website screenshots
Latest commit 9c38bd7 Jan 7, 2017 @sindresorhus 4.0.0

pageres-cli Build Status

Capture screenshots of websites in various resolutions. A good way to make sure your websites are responsive. It's speedy and generates 100 screenshots from 10 different websites in just over a minute. It can also be used to render SVG images.

See pageres for the programmatic API and issues tracker.


$ npm install --global pageres-cli

PhantomJS, which is used for generating the screenshots, is installed automagically, but in some rare cases it might fail to and you'll get an Error: spawn EACCES error. Download PhantomJS manually and reinstall pageres if that happens.


Specify urls and screen resolutions as arguments. Order doesn't matter.

If no resolution is specified it will default to 1366x768 which is the most popular resolution.

pageres <url> <resolution>
pageres <resolution> <url>

# <url> can also be a local file path.
pageres <file> <resolution>

List multiple urls and resolutions for pageres to capture all combinations.

pageres <url> <resolution> ...

pageres 1024x768 1366x768 # 2 screenshots
pageres 1024x768 # 2 screenshots
pageres 1024x768 1366x768 # 4 screenshots

Group arguments with square brackets.

pageres [ <url> <resolution> ] [ <url> <resolution> ]
pageres [ <url> <resolution> ... ]

# Mix grouped and single arguments
pageres [ 1024x768 1600x900 ] 1366x768

# Options defined inside a group will override the outer ones.
pageres [ 1024x768 --no-crop ] 1366x768 --crop

Screenshots are saved in the current directory.


# Basic multi-url, multi-resolution usage
pageres 1366x768 1600x900

# Override outer option within group
pageres [ 1366x768 1600x900 --no-crop ] [ 1024x768 480x320 ] --crop

# Provide a custom filename template
pageres 1024x768 --filename='<%= date %> - <%= url %>'

# Capture a specific element
pageres 1366x768 --selector='.page-header'

# Hide a specific element
pageres 1366x768 --hide='.page-header'

# Capture a local file
pageres unicorn.html 1366x768


-v, --verbose

Verbose output to see errors if you need to troubleshoot.

-c, --crop

Crop to the set height.

$ pageres 1024x768 --crop
-d, --delay=<number>

Delay screenshot capture.

$ pageres 1024x768 --delay=3

Custom filename.

$ pageres 1024x768 --filename='<%= date %> - <%= url %>'

Capture DOM element.

$ pageres 1366x768 --selector='.page-header'

Hide DOM element. Can be set multiple times.

$ pageres 1366x768 --hide='.page-header'

Override a global crop option within a group.

$ pageres [ 1366x768 --no-crop ] 1024x768 --crop

Apply custom CSS to the webpage. Specify some CSS or the path to a CSS file.

$ pageres --css='body { background: red; }'
$ pageres --css='style.css'

Browser cookie. Can be set multiple times.

$ pageres --cookie='foo=bar'

Custom HTTP request header. Can be set multiple times.

$ pageres --header='Cache-Control: no-cache'

Username for HTTP auth.


Password for HTTP auth.


Scale webpage n of times.


Image format. Either png (default) or jpg.


Custom user agent.

Config file

You can persist your commands into a file and run it whenever with eg. sh .pageres:

# .pageres
pageres [ 1000x1000 --crop ] [ 500x500 ]
pageres [ 1000x1000 --crop ] [ 500x500 ]

Google Analytics screen resolutions

You can use the most popular resolutions for your site with pageres by following these steps:

  • In Google Analytics go to the site for which you want screen resolutions
  • Select Audience => Technology => Browser & OS
  • Click the Screen Resolution link in the middle of the screen
  • Click the Export button at the top, then Google Spreadsheets, and select yes for importing
  • Select all the resolutions and copy them into a new file and save it
  • In your terminal run: pageres $(awk '{a = $1 " " a} END {print a}' file-from-above-step.txt)


MIT © Sindre Sorhus