Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →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 the same viewport, capture timing, image format, and final crop for every shop. For a dependable workflow, keep one canonical URL and output filename per shop, capture a consistent first-screen view, normalize the resulting images to the directory’s dimensions, then review every thumbnail for overlays, blank captures, and awkward crops.
Plan a consistent thumbnail set
Before capturing anything, decide what a directory card should show and how its images will be stored. A repeatable setup matters more than choosing a particular image size: there is no universally correct thumbnail width, height, or quality setting for every directory.
- Keep one canonical URL for each shop and assign it a stable identifier, such as
shop-name, for the output filename. - Choose a consistent browser viewport and scale so each screenshot starts from comparable conditions.
- Decide whether the goal is the initial visible impression, an entire-page record, or a specific region.
- Choose a final aspect ratio and dimensions based on the directory layout, then resize or crop all captures to match.
- Record each source URL alongside its image so you can identify and refresh captures later.
Choose the right capture type
| Capture type | Best for | Tradeoff |
|---|---|---|
| Viewport | A compact card that previews the shop’s initial visible impression | Content below the fold is omitted |
| Full page | A complete page record for review or documentation | The image may become too tall and difficult to read when reduced to thumbnail size |
| Element | A reliably identifiable header, hero, or other meaningful page region | Requires a dependable selector; for a scrollable element, only currently visible content is captured |
Playwright supports page, full-page, and element screenshots, saved either to a file or to an image buffer. Its documentation defines a full-page image as the full scrollable page, so it should not be treated as equivalent to a first-screen directory thumbnail (Playwright Screenshots). A scrollable element screenshot captures only the element’s currently visible content (Playwright Locator API).
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesGenerate thumbnails with Playwright
The following Node.js example captures the viewport for each URL, saves successful results under predictable filenames, and records failures without stopping the rest of the batch. It uses a fixed viewport and CSS-pixel scale; replace the sample URLs and identifiers with your shop list. Install Playwright and its Chromium browser before running it.
#1 Best Overall
- Save the code as
make-thumbnails.mjs. - Run
npm install playwrightandnpx playwright install chromiumin the same project directory. - Run
node make-thumbnails.mjs. Successful images go intothumbnails/; per-shop errors go intothumbnails/results.json.
import { chromium } from 'playwright';
import { mkdir, writeFile } from 'node:fs/promises';
const shops = [
{ id: 'shop-one', url: 'https://example.com' },
{ id: 'shop-two', url: 'https://example.org' },
];
const outputDir = 'thumbnails';
await mkdir(outputDir, { recursive: true });
const browser = await chromium.launch({ headless: true });
const results = [];
try {
for (const shop of shops) {
const page = await browser.newPage({
viewport: { width: 1280, height: 800 },
deviceScaleFactor: 1,
});
try {
const response = await page.goto(shop.url, {
waitUntil: 'domcontentloaded',
timeout: 30000,
});
if (!response) {
throw new Error('Navigation returned no response; the page may have redirected or failed to load.');
}
if (!response.ok()) {
throw new Error(`HTTP ${response.status()} ${response.statusText()}`);
}
// Optional: wait for a selector that indicates the shop's main content is ready.
// await page.locator('main').waitFor({ state: 'visible', timeout: 10000 });
await page.screenshot({
path: `${outputDir}/${shop.id}.png`,
type: 'png',
fullPage: false,
scale: 'css',
});
results.push({ id: shop.id, url: shop.url, status: 'saved' });
} catch (error) {
results.push({
id: shop.id,
url: shop.url,
status: 'failed',
error: error instanceof Error ? error.message : String(error),
});
} finally {
await page.close();
}
}
} finally {
await browser.close();
}
await writeFile(`${outputDir}/results.json`, JSON.stringify(results, null, 2));
console.log(`Processed ${results.length} shops; see ${outputDir}/results.json`);The example checks the navigation response and continues after an individual failure. Some sites redirect, load important content after navigation, or block automated access; the script cannot guarantee that every page will produce a useful image. Inspect the output rather than treating a saved file as proof of a good capture.
Adjust capture timing deliberately
domcontentloaded is a starting point, not a universal readiness signal. For a shop whose main content appears later, wait for a meaningful selector with page.locator('selector').waitFor({ state: 'visible' }). If no stable element identifies readiness, use a defined delay and check whether it works consistently for that site. A longer wait can increase processing time, while a short one can capture incomplete content.
Capture full pages or elements when needed
For a full-page image, set fullPage: true in the screenshot options. For one region, use a locator such as await page.locator('header').screenshot({ path: 'thumbnails/shop-header.png' }). Use an element capture only when the selector identifies the intended region consistently; a selector that changes across shops or page updates can fail or select the wrong content.
Rank #3
Normalize format, scale, and dimensions
Make the final images comparable at the size readers will see them. Playwright’s screenshot API offers format and scale options; CSS scale produces one output pixel per CSS pixel, while device scale reflects device pixels (Playwright Page API; Playwright API parameters).
- Scale: CSS scale is a practical starting point for consistent, smaller output. Device-pixel scale can produce larger images on high-DPI displays.
- PNG: Use it when transparency or crisp interface details matter. The JPEG/WebP quality setting does not apply to PNG.
- JPEG or WebP: Use a configurable quality setting when file size matters; compare the actual output at its final display size before settling on a value.
- Crop and resize: Apply the same target dimensions and crop policy across the set. Cropping after capture can be more predictable than asking pages with different layouts to fill a fixed shape.
Playwright’s documented screenshot options include output format, quality for supported formats, and scale. The appropriate settings depend on the visual detail and compatibility needs of the destination; no single setting is established as best for all shop pages.
Review captures and handle failures
Process each URL separately and retain a result record, as in the example, so one failed shop does not hide which other captures succeeded. Review a sample during setup and then the full set before publishing.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minute- Look for cookie or consent dialogs, newsletter popups, chat widgets, blank pages, and incomplete loading.
- Check that the crop shows a useful part of each shop and that image dimensions and aspect ratios match.
- Confirm that redirects lead to the intended shop and that filenames still map to the correct source URLs.
- Refresh captures when shop content changes enough to make the directory preview misleading.
Common problems
| Symptom | Likely cause | What to do |
|---|---|---|
| Navigation timeout | The site is slow, stalled, or waiting on resources that do not finish | Check the URL in a browser, then consider a longer timeout or a different readiness condition. Avoid waiting for every network request if the site keeps background connections open. |
| Blank or incomplete screenshot | Important page content appeared after the chosen navigation event | Wait for a meaningful content selector or a deliberate delay, then inspect the resulting image. |
| HTTP error recorded | The server returned an unsuccessful response for the requested URL | Verify the canonical URL and redirect behavior. If the site denies automated access, do not assume a different wait setting will resolve it. |
| Consent dialog or overlay covers the page | The shop displays a visitor prompt, popup, or chat widget | Review whether the prompt can be dismissed appropriately and whether your intended use permits publishing the resulting image. Do not silently remove page content in a way that misrepresents the shop. |
| Thumbnails look inconsistent | Different viewport, scale, capture type, or crop rules were used | Use a shared viewport and scale, then normalize all images to the same final dimensions and crop policy. |
| Element capture fails or shows only part of a region | The selector is absent, unstable, or points to a scrollable element | Use a more reliable selector and verify visibility; remember that a scrollable target capture contains only its currently visible content. |
Check permission before publishing
A screenshot tool’s documentation explains how to make an image; it does not grant permission to republish a shop’s page, logo, or product imagery. Check each site’s terms and the rights relevant to your intended use and location. The answer can vary with the material, jurisdiction, and how the thumbnail will be used.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. Its one-request API can return an image or PDF; see the ScreenshotNeo site and API documentation. For one shop, run this cURL request, changing the URL as needed:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpQuick Recap
For a list, call the same endpoint once per URL and use each stable shop identifier to name the output file. ScreenshotNeo accepts the parameter names used by other screenshot APIs, which can make switching easier. It accepts cookie/consent banners like a visitor and removes 60+ known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and responses identify the page verdict and billing status in X-Page-Verdict and X-Billed headers. Its MCP server includes take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Sign up for ScreenshotNeo’s free plan.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
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.
