How to take a screenshot of a website in the command line (with JavaScript and lazy download support)

Brief summary of the article:

1. You can take a screenshot of a website in the command line using a headless web browser – the article describes in detail how to do this
2. If you do not want to bother with installation and configuration, then you can take a screenshot of websites (including JavaScript and lazy download) using the online service: https://suip.biz/?act=screenshot

How to take a screenshot of a website in Linux

If you need to take a screenshot of a website page in the command line, then you need to remember the following:

1) Modern websites heavily use JavaScript and generate DOM web pages already in the web browser. That is, the original HTML may not give an idea of ​​the appearance of the web page if the JavaScript code has not been executed in it

For information on the HTML DOM and how to view and save it without using the command line, see the article: How to save the entire HTML DOM in its current state

2) Some websites use lazy download of images and even parts of a web page – this is a technology that speeds up the initial loading and display of a web page by loading the necessary elements as the user scrolls the web page. That is, you need not only JavaScript support, you also need to emulate the scrolling of the web page

The previous two points suggest that it is much easier to take a screenshot by opening a website in a web browser. If you need a screenshot of the entire page, parts of which may go beyond the monitor (window), then it suddenly turns out that “just opening a website and taking a screenshot” is no longer so easy.

3) So, in addition to what has already been said, we need to ensure that the entire web page is included in the screenshot, including areas outside the window.

4) All sorts of little things, such as waiting for images to load before taking a screenshot (even without lazy download, images do not load instantly – this must be taken into account when automating the creation of screenshots).

How to take a screenshot of a website with lazy download in Puppeteer

Only a headless web browser, such as Puppeteer, can cope with the above technical task.

Install Puppeteer – how to do this is described on the page https://en.kali.tools/?p=1921 (section “How to install Puppeteer”).

Create a file get-screenshot.js and copy the following into it:

puppeteer = require('puppeteer');

name = 'screenshot'; //any name without file extension
t = 'jpg'; //OR png OR jpg OR webp
q = '80'; //1-100

function delay(time) {
	return new Promise(function(resolve) { 
		setTimeout(resolve, time)
	});
}
async function run() {	
	const url = process.argv[2];

	const browser = await puppeteer.launch();
	const page = await browser.newPage();
	const customUserAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36';

   
	await page.setViewport({width: 1440, height: 3440});
	await page.setUserAgent(customUserAgent); 
	await page.goto(url, {waitUntil: 'load', timeout: 0});

	const height = await page.evaluate(() => {
		return document.body.scrollHeight;
	});

	window_h = page.viewport().height
	step = height / window_h + 1
	for (let i = 0; i < step; i++) {
		current_height = window_h * i
		await page.evaluate((current_height) => {
			window.scrollTo(0, current_height);
		}, current_height);
		await delay(500);
	}	
	
	await delay(3000);
	
	file_name = name + '.' + t;
	
	let obj_arguments = {};
	if (t == 'png' || t == 'webp')
	{
		obj_arguments = {path: file_name, fullPage: true};
	}
	else
	{
		obj_arguments = {path: file_name, fullPage: true, quality: q};
	}

	await page.screenshot({...obj_arguments});	

	browser.close();
}

run();

Run it like this:

node get-screenshot URL

For example, the following command will create a screenshot of the page https://zalinux.ru/?p=9820:

node get-screenshot 'https://zalinux.ru/?p=9820'

Example of a created screenshot (click on the image to view the screenshot in full size):

The code above:

1. Loads the web page and runs JavaScript, waits for the DOM to finish forming
2. Smoothly scrolls the web page, while waiting for images to load
3. Waits for all elements to load and saves a screenshot of the website

You can choose one of three image formats: png, jpg, webp. In my tests, the WebP format turned out to be the most problematic – for large pages, an empty file may be saved instead of a screenshot. This problem is not observed with other formats.

See also: What is a WebP file and how is it better than other formats

You can also change the name and path to the file where the screenshot will be saved.

For JPG and WebP formats, you can change the compression level: specify a number from 1 to 100 – the lower the number, the smaller the file size, but the worse the image quality.

For problematic sites that take time to load and generate a page, you can change the timings. For example, by default, the time between screen scrolls is set to 500 (half a second) – you can increase this interval. Similarly, with the pause before creating a screenshot, which is set to 3000 (3 seconds) – you can increase this value. Or, conversely, decrease it if you are taking screenshots of simple and lightweight pages.

You can also experiment with the size of the web browser window (width: 1440, height: 3440).

In fact, there are no ideal parameters that would best suit any web page – you can independently select them to suit your needs.

For example, a real challenge was a screenshot of the following page: https://pattaya-pages.com/baiyoke-sky-and-baiyoke-observation-deck-the-best-observation-deck-on-top-of-a-skyscraper-in-bangkok/

But in the end it worked – the main key to success was significantly increasing the pauses when scrolling the page.

As a result, the following screenshot was created (click on the image to view the screenshot in full size):

An easy way to take a screenshot of the entire website page, even outside the screen

If you do not want to bother with installing and configuring Puppeteer, then you can use a free online service: Creating a full screenshot of websites regardless of the size of the web page, even if the page generates JavaScript

In just a couple of clicks, you can take a screenshot of the entire page of a website, even if it goes far beyond the screen, even if the site uses JavaScript and lazy download. Simply enter the address of the page you want to take a screenshot of.

Go to the service page: https://w-e-b.site/?act=screenshot

You will see the screenshot capture settings – don't worry, everything can be left by default. You just need to enter the address of the web page and click the “Submit” button.

For example, I want to take a screenshot of the page https://suay.site/?p=4680

Creating a screenshot may take some time – be patient.

If you have not changed any settings, then by default the screenshot will be shown on the page. You can click on it to see the full size or to download.

Screenshot example (click on it to see the full size):

You can also check the box next to the “Download?” setting and the screenshot will be immediately downloaded to your computer or phone.

You can change the width and height settings of the web browser window. The thing is that different websites look different on screens of different sizes. By changing the width and height settings, you can change the appearance of the website in the screenshot.

Additionally, you can choose one of three file formats: JPG, PNG, WEBP.

For JPG and WEBP formats, you can set the image quality from 1 (the smallest file size, but also the worst quality) to 100 (the best quality, but a large file size).

In general, everything is quite simple – you do not need to change the settings. If you are not satisfied with the appearance of the screenshot (for example, the screen size is too large compared to the width of the website) or you need an image that takes up less space, you can experiment with the settings – there is no fee and no restrictions on this service.

How to save a site to PDF. Online service for saving a web page to PDF

By the way, if you want to save a web page not as a screenshot, but as a PDF document, then a similar service with a large number of settings can save even dynamically generated websites to PDF:

• Save any web page to PDF (JavaScript support): suip.biz/?act=webpage-to-pdf