How to take a website screenshot: online tools and APIs

Website screenshots are useful for social media previews, documentation, change monitoring, and layout testing. This guide covers ways to take screenshots, from simple online tools to programmatic APIs and headless browsers. You can quickly take a screenshot of any website with the Screenshot Tool on reChecker.

Why take website screenshots

• Social media previews — Open Graph and Twitter Card display an image when a link is shared
• Documentation — illustrations in guides, help materials, and reports
• Monitoring — visual checks of availability and correct rendering
• Testing — visual regressions and layout comparisons before and after changes
• Archiving — saving a page as it appeared at a particular point in time

Online tools

Screenshot Tool on reChecker

The reChecker Screenshot Tool lets you take a screenshot of any public URL. Enter an address to get an image of the page. It is convenient for one-off tasks without installing software.

Features of online services

• No installation required
• Limits on the number of requests (often on free plans)
• Dependence on service availability
• An API is needed for automation

Check whether the service supports the options you need: full-page screenshots, a mobile viewport, and a loading delay (for SPAs).

Screenshot APIs

Paid and free APIs provide programmatic access to screenshots.

Typical API parameters

Request example (hypothetical API)

GET https://api.example.com/screenshot?url=https://example.com&width=1920&full_page=true

The response is a binary image or a URL to a saved file.

Popular services

• Screenshotone — API with viewport, delay, and ad-blocking settings
• Urlbox — screenshots, previews, and PDFs
• ApiFlash — based on headless Chrome

Each service has its own pricing and limits. For high-load scenarios, consider a self-hosted solution.

Headless browsers

You can have full control over the process using headless Chrome or an equivalent. The screenshot is taken programmatically, without external services.

Installing Puppeteer

npm install puppeteer

Puppeteer automatically downloads Chromium. To use system Chrome, install puppeteer-core and specify the path to the executable.

Puppeteer (Node.js)

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.setViewport({ width: 1920, height: 1080 });
  await page.goto('https://example.com', { waitUntil: 'networkidle0' });
  
  await page.screenshot({ 
    path: 'screenshot.png',
    fullPage: true 
  });
  
  await browser.close();
})();

Options for screenshot:

• path — file path
• fullPage — the whole page or just the viewport
• type — 'png' | 'jpeg' | 'webp'
• quality — for jpeg/webp (0–100)
• clip — the { x, y, width, height } area

Playwright (Node.js, Python, etc.)

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  await page.goto('https://example.com');
  await page.screenshot({ path: 'screenshot.png', fullPage: true });
  
  await browser.close();
})();

Playwright supports several browsers (Chromium, Firefox, WebKit). It is useful for cross-browser testing.

Mobile viewport

Emulating a mobile device:

await page.setViewport({
  width: 375,
  height: 812,
  isMobile: true,
  hasTouch: true,
  isLandscape: false
});

Or emulate a specific device:

const iPhone = puppeteer.devices['iPhone 12'];
await page.emulate(iPhone);

Loading delay

SPAs and pages with deferred content may not finish rendering in time. Add a delay:

await page.goto('https://example.com');
await page.waitForTimeout(3000);  // 3 секунды
await page.screenshot({ path: 'screenshot.png' });

Or wait for a specific element:

await page.waitForSelector('.main-content', { timeout: 10000 });
await page.screenshot({ path: 'screenshot.png' });

Handling lazy-loaded content

Images with loading="lazy" and content below the fold may not load. Scroll the page before taking the screenshot:

await page.evaluate(async () => {
  await new Promise((resolve) => {
    let totalHeight = 0;
    const distance = 500;
    const timer = setInterval(() => {
      window.scrollBy(0, distance);
      totalHeight += distance;
      if (totalHeight >= document.body.scrollHeight) {
        clearInterval(timer);
        resolve();
      }
    }, 100);
  });
});
await page.screenshot({ path: 'screenshot.png', fullPage: true });

Output formats

JPEG at 80–90% quality is usually sufficient for social media previews. Use PNG for documentation and tests.

Limitations and pitfalls

1. Authorization — pages behind a login require cookies or tokens
2. CAPTCHAs and protection — services may block automated requests
3. Timeouts — slow pages may not load in time
4. Image rights — using screenshots of other people's websites may be subject to restrictions
5. Resources — a headless browser consumes memory and CPU

Usage recommendations

• For one-off screenshots — use the Screenshot Tool on reChecker
• For automation in a project — use Puppeteer or Playwright
• For a high-load production service — use a dedicated pool of workers with headless browsers or a paid API
• For visual regressions — integrate with CI (Percy, Chromatic, custom scripts)

You can take a website screenshot online with the Screenshot Tool on reChecker.

Comparing tools

Blocking resources to speed things up

To speed up a screenshot, you can block images, fonts, and ads:

await page.route('**/*', (route) => {
  const type = route.request().resourceType();
  if (['image', 'font', 'media'].includes(type)) {
    route.abort();
  } else {
    route.continue();
  }
});

The screenshot will have no images—just the layout. Use this for structural tests.

Screenshots with authorization

For pages behind a login, pass cookies:

await page.setCookie({
  name: 'session_id',
  value: 'xxx',
  domain: 'example.com'
});
await page.goto('https://example.com/dashboard');
await page.screenshot({ path: 'dashboard.png' });

Or use the saved browser state (Puppeteer userDataDir).

Summary

For one-off tasks, use the Screenshot Tool. For automation, use Puppeteer or Playwright. For a production service, use a paid API or a self-hosted worker pool. Account for delays with SPAs and the need for authorization on private pages.