Use a browser screenshot to capture each craft website, then resize or crop every capture to the same card shape before adding it to your directory. For a repeatable workflow, choose one kind of view—homepage viewport, selected element, or full page—keep the capture environment stable, and make the site name available as text as well as in image alternative text where appropriate.
Plan the directory before capturing
Keep a canonical URL and display name for each craft website. Decide what a directory visitor should learn from its preview: the overall homepage look, a particular hero or brand area, or the layout of a longer page. The reviewed guidance does not prescribe a URL-list format or a policy for choosing which sites to include, so use a simple list or spreadsheet that suits your publishing workflow.
As an Amazon Associate I earn from qualifying purchases.
A screenshot records a rendered page or element. A directory thumbnail is that capture after you resize or crop it to fit a consistent card. That distinction matters: a full-page capture, for example, can be useful for inspection but may become too tall and illegible when squeezed into a small card.
Choose a screenshot view that works at card size
Playwright documents viewport, element, and full-page screenshot targets, with PNG, JPEG, and WebP output options. The right choice depends on what the directory needs to show; no one mode is mandated for Indian craft websites. Playwright’s screenshot documentation describes these capture options.
#1 Best Overall
| Capture mode | Useful when | Watch for |
|---|---|---|
| Viewport | You want a compact preview of the first screen a visitor encounters. | Content below the visible browser area will not appear. |
| Element | A specific hero, logo area, or other selected region best represents the site. | The selected region may not exist or have the same proportions across sites; ensure the chosen content remains legible in the card. |
| Full page | A long-page overview is useful to readers or editors. | The image covers the full scrollable page and can be much taller than a directory card. Crop or resize deliberately, or provide a link to the full-size version. |
For a directory where entries should be easy to compare, use one mode consistently unless a site has a clear exception. Check a sample at the actual card size: if the relevant imagery or text becomes unreadable, choose a tighter element or viewport capture rather than shrinking a very long page into the card.
Capture pages with Playwright
Install Playwright for your chosen language and browser, open each canonical URL, wait for the page’s principal content to render, and capture the same type of view for each entry. The appropriate wait condition depends on the site; a fixed delay can be too short on a slow page and wasteful on a fast one. Where possible, wait for a meaningful element that signals the content you want is ready.
For example, in a JavaScript project with Playwright installed, this script captures a viewport image for each URL. Replace the sample values with your directory entries; it creates one PNG per entry in the current working directory.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →import { chromium } from 'playwright';
const sites = [
{ name: 'craft-site-one', url: 'https://example.com' },
{ name: 'craft-site-two', url: 'https://example.org' },
];
const browser = await chromium.launch({ headless: true });
const page = await browser.newPage({ viewport: { width: 1280, height: 800 } });
for (const site of sites) {
await page.goto(site.url, { waitUntil: 'domcontentloaded', timeout: 60000 });
await page.screenshot({ path: `${site.name}.png`, type: 'png' });
}
await browser.close();This example uses a viewport screenshot. To capture the full scrollable page, pass fullPage: true to page.screenshot(). To capture a chosen element, locate it and call locator.screenshot({ path: 'name.png' }). Use selectors that match the site and verify them; there is no single selector that will identify a suitable hero region on every website.
Rank #3
The sample uses domcontentloaded as a basic navigation milestone, not a guarantee that images, client-rendered sections, fonts, or animations are finished. If the target content appears later, wait for a specific locator to become visible before taking the screenshot. For sites that keep making background requests, waiting for network idle may not be reliable; prefer a target-specific readiness condition and review the output.
Normalize images for consistent cards
Pick one aspect ratio and rendered card size for the directory, then resize and, where necessary, crop each capture to that specification. There is no universal pixel dimension for website thumbnails in the reviewed guidance. Set dimensions based on your own card layout and its display density, and inspect the result in that layout rather than choosing a number in isolation.
- Set the card ratio. Choose a landscape, square, or other shape that suits your directory design; apply it consistently.
- Decide how to fit the capture. A crop fills the card but may cut off page content. A contain-style fit preserves the whole screenshot but can leave empty space. Favor the treatment that keeps the important preview recognizable.
- Retain a larger image if readers need detail. The Indian government website guidance recommends correct image sizing and notes that a thumbnail can link to a full-size image where useful. See GIGW’s best practices for using images.
- Choose and verify the output format. Playwright supports PNG, JPEG, and WebP. The GIGW image guidance identifies GIF as suitable for line art and flat color and JPEG for photographs with many color variations, but it does not establish one best format for website thumbnails. Check visual quality and compatibility in the browsers and publishing pipeline you use.
Keep captures comparable when you regenerate them
Use the same browser version, operating system, viewport, settings, and rendering conditions when updating the directory or comparing captures. Playwright notes that host OS, browser version, settings, hardware, power source, and headless mode can affect screenshot rendering. See Playwright’s visual-comparison guidance. Keep the environment as steady as practical and review changed images before publishing; websites themselves may also change between capture dates.
Make directory previews accessible
Do not rely on words embedded in a screenshot to communicate the site’s name or directory information. Keep the craft site’s name as actual text in the card, and use alternative text that describes the image’s informative purpose when the image adds information. If the adjacent text already identifies the linked site and the image is merely decorative, avoid redundant alt text. GIGW’s accessibility guidance discusses image attributes and alternatives; its image guidance advises against using images to present text when text can convey the information.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
ScreenshotNeo can capture a URL through a single API request instead of requiring you to manage a browser for every page. For example, this cURL request saves a WebP screenshot of a target page:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo documentation for request options. Cookie banners are accepted and removed, along with supported 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 are not billed, and response headers identify the page verdict and billing status. Its MCP server offers take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000, and every feature is available on every plan.
Sign up for ScreenshotNeo’s free plan to start with 1,000 screenshots a month and no card.
Troubleshoot common capture problems
- The screenshot is blank or missing the main content: navigation completion may precede client-rendered content. Wait for a meaningful page element to appear, then capture again.
- A selected-element capture fails or shows the wrong region: the selector may not match that site’s page structure, or the element may not yet be visible. Inspect the rendered page, update the selector for that site, and wait for the target before capture.
- Images or fonts look incomplete: capture may have happened before those resources rendered. Wait for the relevant image or content, and inspect the capture; no single wait strategy is reliable for every site.
- Thumbnails look inconsistent despite using the same dimensions: the underlying capture mode, viewport, browser, OS, or rendering conditions may differ. Standardize those settings and check whether the site itself changed.
- Important content disappears in the card: the crop may be too aggressive, or a full-page image may be too tall to remain legible. Use a better-framed viewport or element capture, or link the thumbnail to a larger version.
Frequently asked questions
What size should website thumbnails be?
Choose dimensions that match your directory’s card layout and display density. The cited GIGW guidance recommends correct sizing but does not set a universal pixel size for website-directory thumbnails.
Can I make a thumbnail from a full-page screenshot?
Yes. Resize or crop the full-page capture for the card, but check that the important content is still recognizable. A link to the larger capture can help when the full page needs to be inspected.
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.
