Use browser automation to capture each SaaS product’s public landing page with the same browser, viewport, device scale, and color mode. Choose a viewport shot for a compact first impression, a selected element when the product UI or hero is the clearest representation, and a full-page image only when the whole page is useful at the size readers will see it. Review each image for legibility, transient overlays, and permission to use the displayed content.
Choose the page that represents the listing
Start with the product’s public home or product page, not its login screen. Use an app page only when the directory entry is specifically about an application with no useful public product view. The goal is to show a prospective reader what the listing is, rather than merely prove that the site exists.
As an Amazon Associate I earn from qualifying purchases.
Before capturing, open the candidate page and decide what should be recognizable in a small directory card: the product name, a distinctive interface, or a representative hero section. A full landing page may contain all of these, but shrinking a long page into a thumbnail can make its details unreadable.
Free tools Windows power users keep installed
One-click scans. No signup required.
Set a consistent capture standard
Consistency makes a directory easier to scan. Use the same browser engine, viewport dimensions, device scale, and color mode for all listings. Wait for the relevant hero or product region to finish rendering; fonts, images, and animated content may appear after the initial page load.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
- Viewport capture: best for a concise first impression of the top of the page.
- Element capture: best when a specific product UI or hero region represents the product better than the full viewport.
- Full-page capture: best when the long page itself is informative and remains useful at the displayed size.
Playwright’s documentation describes these choices as capturing the viewport, a specific element, or the full scrollable page. See the Playwright screenshot guide and the Page API reference for capture options, including output path, quality, scale, and full-page capture.
Capture images with Playwright
Install Playwright and its Chromium browser, then save this as capture-preview.mjs. It takes one screenshot per URL, using a fixed viewport and PNG output. The example waits for the page load event and then gives client-rendered content a short settling period; for a specific site, replace that delay with a meaningful selector wait where possible.
npm install playwright
npx playwright install chromium
node capture-preview.mjs https://example.com preview.png
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesRank #2
import { chromium } from 'playwright';
const [url, output = 'preview.png'] = process.argv.slice(2);
if (!url) throw new Error('Usage: node capture-preview.mjs <url> [output.png]');
const browser = await chromium.launch();
try {
const page = await browser.newPage({
viewport: { width: 1280, height: 800 },
deviceScaleFactor: 1,
colorScheme: 'light'
});
await page.goto(url, { waitUntil: 'load', timeout: 60000 });
await page.waitForTimeout(1500);
await page.screenshot({ path: output, type: 'png' });
} finally {
await browser.close();
}
For repeatable production captures, configure the browser context identically for every listing and choose an explicit wait condition appropriate to the page. Playwright’s page.screenshot can also capture the full page with fullPage: true; use a locator’s screenshot method when you want one region rather than the viewport. Consult the API reference for the supported options, including image output quality and scale.
Choose and normalize the crop
Decide whether directory cards share a fixed aspect ratio, then crop or letterbox all captures consistently. PNG is a straightforward default for sharp interface text. Retain the original capture if you may want to recrop it later.
Check the result at actual card size, not only in a full-size preview. Confirm that key text and product cues remain legible, and that the image is not dominated by empty space. Full-page images can be useful as a separate detail view, but often become too tall and small to work as the main card preview.
Use a favicon only as a fallback
If a page cannot be captured cleanly, its declared favicon can help identify the product, but it is not a substitute for a screenshot of the product experience. Google Search Central documents the rel="icon" declaration and recommends a square favicon larger than 48 by 48 pixels for appearance across surfaces; see its favicon guidance. Treat that as icon guidance, not a directory screenshot specification.
Review content and usage rights before publishing
Inspect each image for cookie banners, newsletter prompts, chat widgets, accidental login screens, and transient error states. Re-capture or choose another representative region if an overlay obscures what the listing is meant to show.
A screenshot can include third-party text, imagery, interface elements, and marks. Confirm that your intended use is permitted, especially for a commercial directory. Google’s Search Guidelines address approvals for third-party content in screenshots of Google Search and promotional uses; that guidance is specific to Google Search screenshots, not a universal legal ruling for screenshots of other websites.
Rank #4
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. A single GET request can return an image or PDF; the example below saves a WebP capture. See the ScreenshotNeo API documentation for the request options.
Recommended Free Tools
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webp
ScreenshotNeo accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the page verdict and whether it was billed. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents using Claude, Cursor, or another MCP client. 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—no card required.
Quick Recap
Common capture problems
- The screenshot is blank or incomplete: the page may not have finished rendering. Wait for a visible hero or product selector instead of relying only on navigation completion, and check whether the site failed to load.
- Fonts or images differ between captures: keep the browser engine, viewport, device scale, and color mode fixed, and wait for the relevant content before taking the image.
- A banner or popup covers the product: review the page state and use an appropriate capture flow or a cleaner representative element. Do not publish a misleading crop that hides a material part of the page.
- The full-page image is illegible in the card: use a viewport or selected-element shot for the card and reserve the full-page image for a larger view.
- The browser launch fails after installation: ensure the Playwright browser binary is installed for the version used by the project with
npx playwright install chromium.
Build a quality check into the directory workflow
- Choose a public URL that accurately represents the listed product.
- Capture it with the directory’s fixed browser, viewport, scale, and color settings.
- Select viewport, element, or full-page scope based on what readers need to recognize.
- Normalize the crop and output treatment, while keeping the original file if recropping may be useful.
- Inspect the image at card size for clarity, overlays, stale content, and accidental error or login states.
- Confirm permission for commercial use of third-party material before publication.
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.
