Recommended Free Tools
Use a repeatable browser capture, then crop or resize every image to the same dimensions. For a directory or roundup, start with each shop’s visible page rather than a full-page capture: it is easier to scan at thumbnail size. Playwright can capture a viewport, a full page, or a specific element, and lets you save the result to a file or image bytes. Playwright’s screenshot documentation describes those capture modes.
Plan the thumbnail set before capturing
A consistent set depends on making the same choices for every shop: which URL to capture, what browser viewport to use, when the page is ready, and how the output will be cropped and saved. Keep a canonical URL and stable filename identifier for each shop, and retain the URL alongside the image so you can trace a thumbnail back to its source.
As an Amazon Associate I earn from qualifying purchases.
- Choose a destination aspect ratio and dimensions before you begin. There is no universal thumbnail size; match the space in your directory or roundup.
- Use one viewport and scale for the batch so shops are captured under comparable browser conditions.
- Choose PNG, JPEG, or WebP according to transparency, detail, compatibility, and file-size needs. Compare the output at its final display size before fixing a format or quality.
- Decide how to handle redirects, access blocks, failed loads, and pages that do not become ready. Those cases need a policy appropriate to your directory; there is no universal rule.
Choose what part of each shop to capture
| Capture type | Best for | Trade-off |
|---|---|---|
| Viewport | A compact preview of the shop’s initial visible impression | Content below the fold is omitted. |
| Full page | A complete page record for review or documentation | When reduced to thumbnail size, the tall image may be hard to read. |
| Element | Isolating a stable header, hero, or other meaningful region | Requires a dependable selector. A scrollable element screenshot captures only the content currently visible. |
Playwright defines a full-page screenshot as a capture of the full scrollable page, rather than just the first screen. That makes it useful for a page record, but not interchangeable with a compact storefront preview. See the Playwright Screenshots guide and the Locator API documentation.
Capture shop pages with Playwright
The following Node.js example captures the visible viewport for each URL, writing one PNG per shop and a JSON manifest that records the URL and outcome. It assumes you have Node.js installed and have installed Playwright with its browser: run npm init -y, then npm install -D playwright and npx playwright install chromium. Save the script as capture-shops.js, put shop URLs in shops.txt (one URL per line), then run node capture-shops.js.
#1 Best Overall
const fs = require('node:fs/promises');
const path = require('node:path');
const { chromium } = require('playwright');
async function main() {
const urls = (await fs.readFile('shops.txt', 'utf8'))
.split(/r?n/)
.map(line => line.trim())
.filter(Boolean);
const outputDir = 'thumbnails';
await fs.mkdir(outputDir, { recursive: true });
const browser = await chromium.launch({ headless: true });
const results = [];
try {
for (const [index, url] of urls.entries()) {
const filename = `${String(index + 1).padStart(3, '0')}.png`;
const page = await browser.newPage({
viewport: { width: 1280, height: 800 },
deviceScaleFactor: 1
});
try {
const response = await page.goto(url, {
waitUntil: 'domcontentloaded',
timeout: 45000
});
await page.screenshot({
path: path.join(outputDir, filename),
type: 'png',
fullPage: false,
scale: 'css'
});
results.push({ url, filename, status: response?.status() ?? null, outcome: 'captured' });
} catch (error) {
results.push({ url, filename: null, outcome: 'failed', error: String(error) });
} finally {
await page.close();
}
}
} finally {
await browser.close();
}
await fs.writeFile('thumbnails/manifest.json', JSON.stringify(results, null, 2));
console.log(`Processed ${results.length} URLs; see thumbnails/manifest.json`);
}
main().catch(error => {
console.error(error);
process.exitCode = 1;
});This example uses domcontentloaded as a basic navigation milestone, not a guarantee that every shop’s images, animations, or client-rendered content are ready. Where a page has a reliable target element, wait for it with page.locator('YOUR_SELECTOR').waitFor() before taking the screenshot. A fixed delay can help with a known short animation or delayed render, but adds time to every capture and does not ensure readiness across unrelated sites. Choose a readiness condition based on the page and inspect the result.
For a particular element, replace the page screenshot call with a locator screenshot:
await page.locator('YOUR_SELECTOR').screenshot({
path: path.join(outputDir, filename),
type: 'png'
});Use a selector that identifies the same meaningful region reliably. A scrollable target captures only what is visible inside it; it does not create a full-page image of that element.
Normalize, review, and publish the thumbnails
- Crop or resize all captures to the same aspect ratio and destination dimensions. Decide whether to crop, pad, or otherwise fit images consistently so one shop does not appear larger simply because its source page had a different shape.
- Choose the output format. PNG supports transparency and avoids JPEG’s lossy encoding; JPEG and WebP support a configurable quality setting in Playwright. PNG does not use that quality setting. Check how the actual files look at the size readers will see.
- Review the full batch for cookie dialogs, newsletter popups, chat widgets, blank pages, inconsistent crops, and changed content. Keep failures in the manifest rather than silently treating them as successful captures.
- Before publishing, check whether you have the rights needed to republish each shop’s page imagery, logos, or other content for your intended use and location. Screenshot documentation explains capture mechanics; it does not grant republication permission.
Choose screenshot format and scale
Playwright supports screenshot output as a file or as image bytes, along with format and scale controls. With CSS scale, output uses one pixel per CSS pixel; device scale reflects device pixels and can create larger images on high-DPI displays. For consistent, compact directory thumbnails, CSS scale is a useful starting point. Use device scale when the extra pixel density is needed and the resulting file size suits your delivery needs. The Page API and API parameters reference document the options.
Rank #3
Or skip the browser setup
ScreenshotNeo offers a one-request screenshot API and an MCP server for AI agents. Its clean-shot options can accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status in headers.
For example, use this cURL request to capture a shop page as WebP. Replace the URL with the shop you want to capture and provide your API key. See the ScreenshotNeo API documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo supports PNG, JPEG, and WebP output, viewport or full-page captures, element capture by CSS selector, device and viewport settings, and other capture controls. Its MCP tools—take_screenshot, get_page_info, and capture_pdf—let compatible clients such as Claude or Cursor request captures. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month, with no card.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Troubleshoot common capture problems
- The page is blank or missing its main content: The site may render content after the navigation milestone used in the example. Wait for a known page element or an appropriate page-specific condition, then review the capture.
- The capture times out: The site may be slow or may not finish loading. Check whether the URL opens in a normal browser, adjust the timeout for your workload, and record the failure so it does not disappear from the batch results.
- A cookie notice, popup, or chat bubble covers the shop: Review captures and decide whether to accept, close, or remove overlays in a way that matches your intended representation. Do not assume every site’s consent UI can be handled with one universal selector.
- A selector screenshot fails or shows the wrong area: Confirm the selector matches an element on that page and wait until it exists. For scrollable elements, remember that only visible content is captured.
- Some files look much larger than others: Check image dimensions and whether a device-pixel scale or full-page capture was used. Normalize dimensions and use one scale and capture type across the set.
- A shop blocks automated access or shows a bot check: Treat that as a capture failure rather than a valid storefront preview. The available capture documentation does not prescribe a universal way to handle access blocks; follow the site’s rules and your own publication policy.
Keep batch runs useful and predictable
Process URLs one at a time or with a deliberately limited level of concurrency, and save a result for every URL. This makes it clear which shops succeeded if one page fails. The example is sequential for clarity; a larger list can be parallelized cautiously, but high concurrency may increase load on target sites and can make browser memory usage harder to manage. No universal performance or concurrency setting is established for independent shops.
Use predictable filenames tied to stable identifiers rather than relying only on list order if the list changes often. Keep the source URL, capture timestamp, and result alongside each file if you need to refresh or audit the directory later. Viewport images are generally more practical as compact cards; full-page files can take more storage and become difficult to interpret when scaled down. Validate the final crop and file weight in the actual page layout before publishing.
Frequently Asked Questions
Can I use the same thumbnail dimensions for every shop?
Yes. Set dimensions to fit the destination card design, then crop or resize each capture consistently; no single width and height is right for every directory.
Does a screenshot tool give me permission to republish a shop’s logo or page images?
No. Capture features do not establish republication rights. Check the relevant terms and rights for your intended use and location.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →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.
