How to Make Website Thumbnails for a Directory of Indian Craft Websites
Build a consistent directory of Indian craft websites with browser screenshots, standardized crops, accessible previews, and a repeatable capture workflow.
To make website thumbnails for a directory of Indian craft websites, capture the same kind of page view from each site, then resize or crop every capture to one consistent card ratio and display size. Use a browser automation tool such as Playwright to capture a viewport, a selected element, or a full page. Review the results at their actual card size, preserve the site’s name as text outside the image, and provide useful alternative text.
A screenshot records a rendered page or element. A directory thumbnail is that capture after it has been resized or cropped to fit the directory’s card. Keeping those steps distinct makes it easier to recapture source pages without changing your card layout.
1. Choose what each craft site preview should show
Before capturing anything, decide what visitors need to recognize at a glance. A consistent first-screen homepage preview is usually easiest to compare across entries. A selected hero or brand region can work when the sites use very different page layouts. A full-page capture is useful for review or as a larger linked preview, but it is usually too tall to use directly in a small card.
| Capture type | Use it when | Trade-off |
|---|---|---|
| Viewport | You want a compact preview of the first screen. | Content below the fold is omitted. |
| Element | A specific hero, logo area, or product feature best identifies the site. | Selectors may differ from site to site and can break after redesigns. |
| Full page | You need to inspect the whole page or offer a larger page overview. | The output can be very tall and requires more cropping or scaling to fit a card. |
Playwright documents viewport, element, and full-page screenshot capture. Its full-page option captures the full scrollable page, which can be much taller than a directory card. See the Playwright screenshot documentation.
2. Prepare a canonical list of directory entries
Keep one canonical URL and display name for each craft website. A simple JSON array is enough to drive a repeatable script:
[
{ "name": "Craft Site One", "url": "https://example.org/" },
{ "name": "Craft Site Two", "url": "https://example.com/" }
]Replace the example entries with sites you have selected for your directory. Keep the URL you want the reader to visit, and decide whether the screenshot should represent the homepage, a collection page, or a particular editorial feature. The directory’s selection criteria are an editorial decision; there is no source-established URL list format for craft sites.
3. Capture previews in a controlled browser with Playwright
Install Playwright and its Chromium browser, save the following as capture.mjs, and run it with Node.js. This runnable example captures the same viewport for every entry, writes PNG source files, and limits concurrency so a large list does not open every page at once.
npm install playwright
npx playwright install chromium// capture.mjs
import { chromium } from 'playwright';
import { mkdir, readFile } from 'node:fs/promises';
const sites = JSON.parse(await readFile('sites.json', 'utf8'));
const outputDir = 'captures';
await mkdir(outputDir, { recursive: true });
const browser = await chromium.launch({ headless: true });
const context = await browser.newContext({
viewport: { width: 1440, height: 900 },
deviceScaleFactor: 1,
colorScheme: 'light',
});
async function capture(site, index) {
const page = await context.newPage();
try {
await page.goto(site.url, { waitUntil: 'domcontentloaded', timeout: 30000 });
await page.locator('body').waitFor({ state: 'visible', timeout: 10000 });
// Allow a short settling period for client-side rendering and layout.
await page.waitForTimeout(1000);
const filename = `${String(index + 1).padStart(3, '0')}.png`;
await page.screenshot({ path: `${outputDir}/${filename}`, type: 'png' });
console.log(`Captured ${site.name}: ${filename}`);
} catch (error) {
console.error(`Failed ${site.name} (${site.url}): ${error.message}`);
} finally {
await page.close();
}
}
for (let i = 0; i < sites.length; i += 3) {
await Promise.all(sites.slice(i, i + 3).map((site, offset) => capture(site, i + offset)));
}
await context.close();
await browser.close();Create sites.json alongside the script with the entries described above, then run:
node capture.mjsThe script uses a fixed viewport and device scale factor to make the source captures comparable. It waits for DOM content and a visible body, then allows a brief settling period. That is a practical starting point, not a universal readiness test: sites that render important content later may need a site-specific selector wait or a longer delay.
4. Normalize screenshots to the directory card
Choose one aspect ratio and rendered size based on your actual directory design. There is no universal pixel size for website thumbnails. Make the source capture large enough for the display slot, crop with a consistent rule, and review the result at its final card size so navigation or craft imagery remains recognizable.
The Indian government’s image guidance recommends using the correct image size and describes linking a thumbnail to a full-size image where useful. For a directory, that can mean showing a compact crop in the card and linking it to a larger screenshot or the website itself. The guidance does not prescribe a universal directory-thumbnail dimension. See GIGW best practices for using images.
Playwright can emit PNG, JPEG, and WebP screenshots. Choose based on visual quality and compatibility in your delivery pipeline, then verify the result: the reviewed sources do not establish one format as best for every thumbnail. GIGW notes that JPEG suits photographs with many color variations and GIF can suit line art and flat areas of color; do not infer a universal format rule from that guidance.
5. Keep regeneration consistent
If you regenerate thumbnails to compare design changes, keep browser version, operating system, browser settings, hardware, power source, and headless mode as steady as you can. Playwright notes that these conditions can affect screenshot rendering. Small rendering differences can otherwise look like changes to a site when they come from the capture environment. See Playwright visual comparisons.
- Use the same viewport, device scale factor, color scheme, and capture mode.
- Record capture dates so readers and maintainers know when a preview may be stale.
- Review failed or unusually blank captures instead of silently publishing them.
- When a site redesign breaks an element selector, update that entry’s capture target and recapture it.
6. Make directory previews accessible
Give informative preview images alternative text that describes their purpose, or ensure each image is paired with the craft site’s name as ordinary text. Do not bake a site’s name, menu labels, or other navigation text into the screenshot as a replacement for accessible text. The GIGW accessibility guidance explains that images should add value and advises against using images to present text when text can convey the information. See GIGW accessibility guidelines and attributes.
<a href="https://example.org/">
<img src="/thumbnails/craft-site-one.webp" alt="Homepage preview of Craft Site One">
<span>Craft Site One</span>
</a>Write concise alt text for informative previews. If the image adds no information beyond the adjacent linked site name, use empty alternative text (alt="") to avoid repeating the same label for screen reader users.
7. Troubleshooting captures
| Symptom | Likely cause | What to try |
|---|---|---|
| Navigation times out | The site is slow, unreachable, or waiting on resources indefinitely. | Check the URL manually, increase the timeout selectively, and avoid waiting for every network request to finish when analytics or long polling keep connections open. |
| Screenshot is blank or mostly empty | The page has not rendered its main content yet, or the site returned a bot check or error page. | Wait for a meaningful page selector, inspect the page title and visible content, and flag the capture for review instead of treating it as a valid thumbnail. |
| Images are missing | Images load lazily or after the screenshot point. | Scroll the page or wait for the relevant image selector before capturing; verify the resulting image rather than relying only on a navigation event. |
| Element selector is not found | The site has a different layout, or the selector changed. | Inspect the rendered page, use a stable CSS selector for that site’s target, or fall back to the standard viewport capture. |
| Cards have inconsistent framing | Source captures or crop rules differ. | Normalize all outputs with the same target ratio and crop positioning, then review them in the actual card component. |
| Recaptures differ without a visible site change | Browser, OS, settings, hardware, or headless rendering conditions changed. | Pin the browser and keep the capture environment stable; Playwright documents these as possible screenshot rendering variables. |
8. Performance, reliability, and cost
For a directory with many URLs, capture in small batches rather than opening every page simultaneously. This reduces local resource spikes and makes failures easier to identify. Use a finite navigation timeout, log the URL and error for each failure, and allow a rerun of only failed entries. The example uses a concurrency of three as an adjustable implementation choice, not a benchmark or recommended universal limit.
Playwright is a do-it-yourself browser workflow: account for the time to install and maintain a browser runtime, manage recaptures, and store normalized output. The research sources provide no benchmark or universal cost comparison. Keep source images only as long as they are useful, and size the delivered thumbnail for its real display slot to avoid serving unnecessarily large files.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. A single GET request returns a screenshot as PNG, JPEG, or WebP, or a PDF. 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.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Adapt the target URL for each craft website. ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Only clean shots are billed, and response headers report the page verdict and billing status.
Create a free ScreenshotNeo account and get 1,000 screenshots a month with no card.
Frequently asked questions
How do I take screenshots of multiple websites?
Put each canonical URL and display name in a list, then loop through it with a browser automation script. Limit concurrent pages, save each result under a predictable filename, and log failures so you can retry them separately.
What size should website thumbnails be?
Use the dimensions and aspect ratio of your actual directory card. No universal pixel size is established by the reviewed guidance, so choose a size that looks sharp in your layout and test it on the devices you support.
Can I make a thumbnail from a full-page screenshot?
Yes. A full-page capture can be cropped or reduced to make a thumbnail, but its tall layout may make small content hard to read. A viewport or element capture is often easier to frame for a compact card.
How do I keep website thumbnails the same size?
Capture with a consistent viewport and normalize every image to one fixed card ratio and output size. Use the same crop positioning rule and check the final images in the directory layout.
