Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use a browser automation script to open each reviewed NGO homepage URL and save a screenshot as an image. With Playwright, you can capture the initial viewport for consistent directory previews or the full page when a longer visual record is needed. Keep a name-to-URL mapping, use the same capture settings for every site, and record failures so they can be checked rather than silently omitted.
Prepare the NGO URL list
Start with canonical homepage URLs you have reviewed, and keep each URL paired with the organization name. This makes filenames identifiable and gives you a reliable way to trace a thumbnail back to its source.
- Use one URL per organization, including the scheme such as
https://. - Choose whether redirects should be followed to the final page or whether the listed address itself is important to your directory.
- Choose one viewport size, image format, and scale for the set. The right thumbnail dimensions depend on the layout where images will appear; there is no universal size established by the screenshot documentation.
Playwright’s Page API shows how to navigate to a URL and save a screenshot, and its screenshot guide describes viewport, full-page, element, and buffer capture: Page API and Screenshots guide.
Generate thumbnails locally with Playwright
The following Node.js example reads a JSON list, visits each homepage sequentially, and writes one viewport PNG per site. Sequential capture is a conservative starting point: it is easier to diagnose than launching many pages at once, and avoids imposing unnecessary load on NGO sites. The loop, naming, retries, and logging are application logic built around Playwright’s documented single-page navigation and screenshot operations.
#1 Best Overall
1. Install Playwright
- Install a current Node.js release if it is not already available.
- In a new project directory, run
npm init -y. - Install Playwright with
npm install playwright. - Install its browser with
npx playwright install chromium.
2. Create the URL file
Save this as ngos.json in the project directory. Replace the examples with the reviewed URLs and names you want to capture.
[
{ "name": "Example NGO", "url": "https://example.org" },
{ "name": "Another NGO", "url": "https://another-example.org" }
]3. Save and run the capture script
Save the following as thumbnails.js. It creates a thumbnails directory, sanitizes names for filenames, uses a consistent viewport and PNG format, waits for the page’s load event, and makes one retry after a navigation or screenshot error. Failed URLs are reported at the end.
const fs = require('node:fs/promises');
const path = require('node:path');
const { chromium } = require('playwright');
const INPUT = path.resolve('ngos.json');
const OUTPUT_DIR = path.resolve('thumbnails');
const VIEWPORT = { width: 1280, height: 800 };
const MAX_ATTEMPTS = 2;
function safeFilename(name) {
return name
.normalize('NFKD')
.replace(/[\/:*?"<>|]/g, '-')
.replace(/[^p{L}p{N}._-]+/gu, '-')
.replace(/^-+|-+$/g, '') || 'ngo';
}
async function capture(browser, item) {
let lastError;
for (let attempt = 1; attempt <= MAX_ATTEMPTS; attempt++) {
const page = await browser.newPage({ viewport: VIEWPORT, deviceScaleFactor: 1 });
try {
await page.goto(item.url, { waitUntil: 'load', timeout: 45000 });
const filename = `${safeFilename(item.name)}.png`;
await page.screenshot({ path: path.join(OUTPUT_DIR, filename), type: 'png' });
return { name: item.name, url: item.url, file: filename };
} catch (error) {
lastError = error;
} finally {
await page.close();
}
}
return { name: item.name, url: item.url, error: String(lastError) };
}
(async () => {
const items = JSON.parse(await fs.readFile(INPUT, 'utf8'));
if (!Array.isArray(items)) throw new Error('ngos.json must contain an array');
for (const item of items) {
if (!item || typeof item.name !== 'string' || typeof item.url !== 'string') {
throw new Error('Each entry must have string name and url properties');
}
const parsed = new URL(item.url);
if (!['http:', 'https:'].includes(parsed.protocol)) {
throw new Error(`Unsupported URL scheme for ${item.name}: ${parsed.protocol}`);
}
}
await fs.mkdir(OUTPUT_DIR, { recursive: true });
const browser = await chromium.launch({ headless: true });
try {
const results = [];
for (const item of items) results.push(await capture(browser, item));
await fs.writeFile(
path.join(OUTPUT_DIR, 'results.json'),
JSON.stringify(results, null, 2)
);
for (const result of results) {
if (result.error) console.error(`FAILED ${result.name} (${result.url}): ${result.error}`);
else console.log(`SAVED ${result.name}: ${result.file}`);
}
if (results.some(result => result.error)) process.exitCode = 1;
} finally {
await browser.close();
}
})().catch(error => {
console.error(error);
process.exitCode = 1;
});Run it with node thumbnails.js. Successful PNGs and a results.json record will be in thumbnails/. Playwright’s screenshot API also supports JPEG and other capture choices documented in its Page API.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose viewport or full-page capture
A viewport thumbnail shows what a visitor sees without scrolling at the chosen window size. It is usually the more comparable format for a visual directory because pages do not produce dramatically different image heights. Full-page capture includes the scrollable page and is better when the goal is a longer visual record rather than a compact card image. Playwright supports both modes; see its screenshot guide.
To capture the full scrollable page instead, add fullPage: true to the screenshot call:
await page.screenshot({ path: path.join(OUTPUT_DIR, filename), type: 'png', fullPage: true });For a specific part of a site, Playwright can capture an element by locator rather than the entire viewport. This is useful only when the same meaningful element can be identified reliably across the sites; layouts and selectors vary, so it is not a general substitute for homepage thumbnails.
Rank #3
Keep the thumbnail set consistent and useful
- Viewport: Hold width and height constant so sites are shown on the same canvas.
- Scale: Playwright’s device scale factor affects pixel density. Choose one value and keep it fixed; scale 1 is adequate for many previews, while a higher value produces more pixels.
- Format: PNG is straightforward for image previews. If file size matters, choose a supported compressed format and use it consistently.
- Page state: A homepage may still be loading dynamic content after the load event. If a known element marks readiness, wait for it; otherwise a modest delay can help, but adds time to every URL.
- Full-page size: Long pages can create very tall images, which are awkward in thumbnail grids. Prefer viewport captures for comparable directory cards.
- Names and records: Preserve the organization name, input URL, output filename, and any failure in a manifest such as the example’s
results.json.
Handle failures, slow pages, and consent overlays
Results can differ from site to site. A URL may redirect, take too long, fail to load, show a browser error, or display a consent overlay. These are operational possibilities, not measured outcomes for Indian NGO websites. Inspect failures and a sample of successful images before treating the batch as complete.
Recommended Free Tools
Common problems and fixes
- Navigation timeout: The server or page may be slow, or may never reach the selected load condition. Check the URL in a normal browser, increase the navigation timeout selectively, or use a less strict wait condition such as
domcontentloaded. A less strict condition can capture before later content appears. - Browser executable missing: Run
npx playwright install chromiumfor the project environment and confirm the install completed for the user running the script. - Invalid URL: Check for missing
https://, whitespace, or a malformed address inngos.json. - Blank or incomplete screenshot: The page may render important content after the initial load event. Wait for a stable selector or a short, bounded delay; avoid an unbounded wait for network idle on pages with persistent connections.
- Consent banner obscures the page: A locally captured screenshot reflects the browser state unless your script explicitly handles the banner. Follow the site’s consent choices and applicable policies; do not assume a banner was accepted or removed automatically.
- Filename collision: Two names may sanitize to the same filename. Add a stable identifier, such as a list index or domain, to the filename scheme.
- Site blocks or challenges automation: A bot check or access restriction may prevent a useful capture. Do not attempt to bypass access controls; record the result and use an authorized alternative if available.
Scale the workflow without losing control
For a modest list, sequential local capture is simple to monitor. For larger lists, limited concurrency can reduce wall-clock time, but it also increases simultaneous requests and resource use. Start with a small concurrency, preserve per-URL timeouts and error records, and verify that the target sites are not being burdened. The browser, retries, output storage, and retention are your responsibility when running locally.
A hosted screenshot API can remove the need to maintain the browser stack, and a vendor documents a batch endpoint. That documentation establishes the endpoint’s existence, not its capacity, reliability, regional behavior, pricing, retention practices, or suitability for these particular websites. Before sending URLs or page content to a third party, check its current limits, terms, URL handling, retention, and logging.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Or skip the browser setup
ScreenshotNeo is a website screenshot API with a single-request workflow. Its clean-shot process accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Only clean shots are billed: bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, with the result indicated in X-Page-Verdict and X-Billed headers. It also offers an MCP server for AI agents, with take_screenshot, get_page_info, and capture_pdf tools. Plans include 1,000 screenshots per month free with no card, and paid options starting at $5 for 3,000 shots.
Example request for one NGO homepage (replace the URL and API key):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.org -o shot.webpFor authentication, output settings, and other request options, see the ScreenshotNeo API documentation. For a list, repeat the request for each URL or use the service’s bulk capture option, which accepts up to 100 URLs per call.
Sign up for ScreenshotNeo to get 1,000 screenshots a month free with no card.
Frequently Asked Questions
Can I use the same thumbnail dimensions for every NGO site?
Yes. Choose dimensions that fit your directory or report, then keep the viewport and scale the same across the capture set.
Should I save a screenshot of the homepage or the full page?
Use the viewport for compact, comparable previews; use full-page capture when a longer visual record is more useful than a grid-friendly thumbnail.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
