Recommended Free Tools
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
To make website thumbnails for a curated design-link list, capture each destination at the same browser viewport, then display the images in cards with a consistent crop. For a repeatable batch, automate screenshots with Playwright; for a short list, manual capture may be enough. Review every image for overlays, failed loads, blank pages, and crops that obscure what makes the site recognizable.
Choose the thumbnail style before capturing
Decide what each card should communicate, then use the same capture and display rules across the directory. Consistency matters more than choosing one universally correct size or format; there is no universal website-card standard in the cited guidance.
Use a viewport capture for a first impression
A screenshot of the initial browser viewport is a compact preview of what visitors see first. It is usually a sensible starting point for a grid of links. Choose full-page capture only when content farther down the page is central to the link’s purpose.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteChoose one card ratio and crop consistently
Set an aspect ratio for the card component and apply it throughout the list. Figma recommends 1920 × 1080 for thumbnails of its own files to reduce awkward cropping; that is platform-specific advice, not a required size for website previews. Canva’s guidance emphasizes retaining the source media’s aspect ratio and representing it accurately. Applied to a link directory, the useful principle is to show a genuine destination capture and avoid a crop that misrepresents it.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Select a format your site supports
Playwright can create PNG, JPEG, and WebP screenshots and offers scale and quality options. Choose based on the page content and what your directory can serve; there is no single best format established for every use. Use the same format and image-processing rules where practical so the grid behaves predictably.
Pick a capture workflow
Manual capture for a short, one-off list
Open each link at the chosen viewport and save a screenshot. This avoids automation setup, but requires repeating the same viewport, browser conditions, and crop decisions for every page. It becomes less convenient as the list grows or needs regular updates.
Local automation for repeatable batches
Playwright can navigate to pages and save screenshots to files or return image buffers for later processing. Its screenshot options cover viewport, full-page, and element captures, along with clipping, output type, and scale. This is a good fit when you want to control the browser workflow and integrate captures into your own scripts or asset pipeline.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Hosted screenshot API to avoid maintaining a browser runtime
A hosted API can capture pages without requiring you to manage a local browser runtime. Providers differ, and no provider price, throughput, reliability, or image-quality comparison is established here. ScreenshotNeo is an option to consider first: it removes consent banners, newsletter popups, and chat widgets before capture, and bills only clean shots. See ScreenshotNeo for product details.
Capture thumbnails locally with Playwright
The following Node.js example captures the first viewport of each URL into a PNG file. It uses a fixed viewport and device scale factor so the browser capture conditions stay consistent. Install Playwright and its browser before running it:
npm install playwright
npx playwright install chromiumSave this as thumbnails.mjs and replace the sample URLs with your curated destinations:
Rank #2
import { chromium } from 'playwright';
import { mkdir } from 'node:fs/promises';
const sites = [
{ name: 'example-design-site', url: 'https://example.com' },
{ name: 'example-studio', url: 'https://example.org' },
];
await mkdir('thumbnails', { recursive: true });
const browser = await chromium.launch();
try {
const page = await browser.newPage({
viewport: { width: 1280, height: 720 },
deviceScaleFactor: 1,
});
for (const site of sites) {
try {
await page.goto(site.url, { waitUntil: 'networkidle', timeout: 45000 });
await page.screenshot({
path: `thumbnails/${site.name}.png`,
type: 'png',
});
console.log(`Saved ${site.name}`);
} catch (error) {
console.error(`Could not capture ${site.url}:`, error.message);
}
}
} finally {
await browser.close();
}The sample waits for network idle, which can be unsuitable for sites that keep requests open; if a page never reaches that state, use a different navigation wait condition and, if needed, a deliberate short delay before capture. The example catches a failure per URL so one problematic destination does not prevent later URLs from being attempted. It does not guarantee that every site renders correctly.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Capture a full page or a particular element
For a full-page image, change the screenshot call to include fullPage: true. For a specific element, locate it and capture that element rather than the whole page:
const card = page.locator('main');
await card.screenshot({ path: `thumbnails/${site.name}.png`, type: 'png' });Element capture is useful when a page has a stable section that represents the destination better than the whole viewport. A selector can fail if the site changes its markup, so include that possibility in your review and rerun process.
Render the images as useful link cards
Store the capture alongside the destination URL and a readable title. Link the image and title to the same destination so the card has a consistent target. Provide alternative text that describes the destination or preview meaningfully; do not use a filename as the only accessible description.
Use the card’s chosen aspect ratio consistently in your site styles. A fixed-ratio image container with an intentional crop can keep the grid aligned, but check that the crop still shows the identifying part of each page. If the image is a genuine screenshot, avoid adding decorative artwork that could make the destination look unlike the linked site.
Quality-check and maintain the thumbnail set
- Validate that each URL points to the intended destination and can be opened by your capture environment.
- Capture every page at the same viewport and with the same first-viewport or full-page policy.
- Inspect the images for consent overlays, newsletter popups, chat widgets, bot checks, blank states, incomplete loads, and unwanted crops.
- Replace captures that do not represent the destination clearly; browser rendering can vary with page behavior and environment.
- When a link changes or the site’s design changes, recapture the corresponding image and check its card again.
For Canva’s design-pages API specifically, the returned page thumbnail URL expires after 15 minutes. Retrieve or consume that URL promptly instead of treating it as a permanent asset URL. This expiration detail applies to that API, not to screenshots you save as your own files.
Or skip the browser setup
ScreenshotNeo can return a screenshot from one GET request. The response can be a PNG, JPEG, WebP, or PDF; the example below saves a WebP for a design-link card. See the ScreenshotNeo 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.webpFor this directory workflow, the service accepts cookie or consent banners as 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 each response identifies the page verdict and billing status in headers. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots, and yearly billing gives two months free. Every feature is on every plan. Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
Common problems and fixes
The screenshot is blank or incomplete
Check that the URL is correct and that navigation completed before capture. Some pages load content after the initial document response; test a suitable wait condition or wait for a page-specific selector. Inspect the browser output rather than assuming the capture call guarantees a complete render.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11The script waits indefinitely or times out
Pages with ongoing network activity may not reach networkidle. Try waiting for the page’s main content or for the load event instead, or use a bounded delay where the site needs time to render. Keep a timeout so one slow page cannot stall the batch indefinitely.
A banner or popup obscures the design
Review the capture manually. A consent overlay, newsletter prompt, or chat widget may appear depending on the destination and its behavior. With a local browser workflow, handle such overlays only where your implementation can do so reliably; do not assume every site uses the same controls.
Rank #4
The grid crops important content
Compare the source screenshot with the rendered card. Adjust the card’s crop position or use a different capture target, such as an element screenshot or a full-page image when below-the-fold content matters. Keep the directory’s aspect-ratio rule consistent, but do not preserve consistency at the expense of showing the wrong part of a site.
A thumbnail URL stops working
If you obtained it from Canva’s design-pages API, its thumbnail URL is documented to expire after 15 minutes. Fetch or consume it promptly, or store a durable image asset under your own workflow rather than relying on the temporary URL indefinitely.
Frequently asked questions
Do website thumbnails increase clicks?
The reviewed official documentation does not establish a measurable click or engagement increase for website thumbnails. Use them to help readers visually identify destinations, not as a guaranteed engagement tactic.
Can I use Figma’s recommended thumbnail dimensions for website cards?
Figma’s 1920 × 1080 recommendation concerns Figma file thumbnails. You can choose that ratio for your directory, but it is not a universal requirement for website previews.
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.
