Take High Resolution Web Page Screenshots From Command Line

Most of us take screenshots of web pages (or some parts of it), every now and then. There are many applications and plugins that can aid in this. But the screenshot becomes complicated when you try to grab a complete webpage. The webpage may scroll horizontally, vertically or both, and there are not many apps that can help you take those screenshots perfectly.

To add to the problem, no app (I tried many apps and browser extensions) could take scrolling screenshots of some websites like CodePen.

Taking High Resolution Scrolling Screenshots of Webpages Using pageres-cli

We will be installing node.js and pageres-cli tool to accomplish this task.

1. First install Node.js and NPM (automatically installed with Node.js). The installation instructions are pretty straightforward on their website for most operating systems, including (and not limited to) Windows, macOS and Linux.

2. After installing the Node.js and NPM, run Terminal / Command Prompt or any other command line interface your operating system provides.

3. Run the below command in your command line interface. You should use sudo on Mac/Ubuntu, and run Command Prompt as Administrator on Windows.

   npm install -g pageres-cli

4. During the installation, you will see something like below. If prompted, accept the installation of the pageres-cli tool.

5. Once the installation is complete, you can use the tool as shown below.

   pageres google.com

   The above code will create a screenshot of Google’s home page in your current working directory.

Take it to the Next Level

The tool is completely customizable and comes with many great and useful features. We have explained the most common ones below, you can check all the features at pageres-cli’s GitHub page.

1. pageres google.com 1366x768

   Adding 1366×768 instructs the tool to take the screenshot of the webpage with the resolution of 1366 pixels in width and 768 pixels in height

2. pageres google.com 1366x768 --delay=3

   –delay=3 adds a 3 second delay to the screenshot. You can use any number instead of 3. This is particularly useful when you are not getting required screenshot because the website loads slowly, and the tool grabs the screenshot before the website is fully loaded.

3. pageres google.com 1366x768 --delay=3 --overwrite

   Adding –overwrite will overwrite older files with the new screenshot. If this is not specified, the tool will add screenshot number at the end of the file name.

4. pageres google.com --format=jpg

   Adding –format=jpg will save the file in jpg format. If not specified, png will used as default.

5. pageres google.com --transparent

   Adding –transparent will keep the transparency where no color is set. If not specified, white color will be used. This is really useful in saving webpage screenshots where logos are present.

6. pageres google.com yahoo.com

   Adding multiple links will create multiple files with a single command.

7. pageres google.com 1366x768 1600x900

   Adding multiple resolutions will create multiple files of the same webpage with multiple resolutions with a single command.

8. pageres google.com yahoo.com 1366x768 1600x900

   Adding multiple webpages with multiple resolutions will create multiple files of all the webpages in all the resolutions. The above command will create 4 screenshots in total.