How to Make Website Thumbnails for a Curated List of Design Links

To make website thumbnails for a curated list of design links, capture each destination at the same browser viewport, save the screenshot, and display it in a consistently cropped card. For a short list, capture pages manually. For a list you will update or regenerate, automate captures with a browser such as Playwright. Review every image for failed loads, overlays, and crops that hide the page’s identity.

Use a genuine screenshot of each destination so the thumbnail represents the link. Choose a card ratio and output format that fit your directory, and apply them consistently. A first-viewport screenshot is usually the simplest preview; use a full-page image only when the content below the fold matters to your readers.

1. Decide what each thumbnail should show

Before capturing, settle three editorial choices. Consistency across the directory matters more than choosing one universally correct size or format; there is no universal website-card standard.

Viewport or full page: A viewport capture shows the first impression in a compact image. A full-page capture represents more of a long site, but can make individual details smaller when fitted into a card. Use it when below-the-fold content is central to the link.
Card ratio and crop: Pick one aspect ratio for the grid and use it throughout. The screenshot itself can use the same ratio, or your page can crop screenshots into uniform cards. Figma’s recommendation of 1920 × 1080 is for Figma file thumbnails, not a universal requirement for website previews.
Format and scale: PNG, JPEG, and WebP are options with Playwright. Choose a format supported by your page and image-processing workflow. Screenshots with text or sharp interface edges may need a different format or quality setting than image-heavy pages; review the actual result at card size.

A real capture is more useful than an unrelated decorative image. Preserve the destination’s recognizable visual identity, and make the image link to the same destination as the card title.

2. Prepare and validate the URL list

Collect one destination URL per design link. Keep the URL paired with its title and any metadata you plan to show.
Check that each URL is a complete, valid address, including its scheme, such as https://.
Decide whether your directory should follow redirects to the final page or preserve a particular landing page. Review redirects during quality control.
Use the same viewport, wait strategy, and capture type for every URL unless a specific page needs a documented exception.

Pages can load differently depending on their behavior and the browser environment. A completed screenshot operation does not by itself establish that the page rendered as intended, so inspect the images before publishing or refreshing a batch.

3. Capture a page manually for a short list

For a one-off list with only a few links, open each page at your chosen browser window size and save a screenshot. Keep the visible viewport consistent, use the same crop for every image, and name files so they remain paired with their destinations—for example, design-studio-a.webp.

Manual capture is straightforward, but repeating it makes consistency harder: window dimensions, scroll position, and timing can vary. If you expect to add links or refresh thumbnails, use an automated workflow.

4. Generate thumbnails locally with Playwright

Playwright can capture the viewport, a full page, or a selected element, and can save screenshots to disk or return image data for further processing. The example below uses Node.js, visits each URL with the same viewport, and saves viewport screenshots as PNG files.

npm install playwright
npx playwright install chromium

// capture-thumbnails.mjs
import { chromium } from 'playwright';
import { mkdir } from 'node:fs/promises';

const entries = [
  { slug: 'design-studio-a', url: 'https://example.com' },
  { slug: 'design-studio-b', url: 'https://example.org' },
];

const outputDir = 'thumbnails';
const viewport = { width: 1440, height: 900 };

await mkdir(outputDir, { recursive: true });
const browser = await chromium.launch({ headless: true });

try {
  const context = await browser.newContext({ viewport });

  for (const entry of entries) {
    const page = await context.newPage();
    try {
      const response = await page.goto(entry.url, {
        waitUntil: 'load',
        timeout: 30000,
      });

      if (!response || !response.ok()) {
        console.warn(`Review HTTP response for ${entry.url}: ${response?.status() ?? 'no response'}`);
      }

      await page.screenshot({
        path: `${outputDir}/${entry.slug}.png`,
        fullPage: false,
        animations: 'disabled',
      });
    } catch (error) {
      console.error(`Capture failed for ${entry.url}:`, error.message);
    } finally {
      await page.close();
    }
  }
} finally {
  await browser.close();
}

Replace the example URLs and slugs with your own list. Install the browser binary for the browser you use before running the script. The script records an image when navigation succeeds far enough to capture; it warns about a missing or unsuccessful HTTP response and logs navigation or capture errors. Inspect outputs because a response status or screenshot file cannot tell you whether the page is visually complete.

Change the capture type or output

For a full-page capture, set fullPage: true. For a single region, locate it and capture the element:

const hero = page.locator('main');
await hero.screenshot({ path: `${outputDir}/${entry.slug}-main.png` });

Choose a selector that identifies the intended region on the destination. Selectors vary between sites, so an element-capture workflow may need per-site configuration. Playwright also supports clipping a region and returning screenshot data as a buffer instead of writing directly to a path. That lets you pass the image to your own processing or storage step.

Playwright’s screenshot options include output type and scale; JPEG quality can be set when capturing JPEG. Check the options for your installed Playwright version in the Playwright screenshot documentation. The example uses PNG so it does not require choosing a JPEG quality value.

The example waits for the page’s load event. Some sites continue rendering content after that event, while others keep network connections open and may not reach a network-idle state promptly. If screenshots are premature, wait for a known selector or add a short delay after navigation:

await page.goto(entry.url, { waitUntil: 'domcontentloaded', timeout: 30000 });
await page.locator('main').waitFor({ state: 'visible', timeout: 10000 });
await page.screenshot({ path: `${outputDir}/${entry.slug}.png` });

Use a selector that is expected on that site; a shared selector may not fit every destination. A fixed delay is simple but can waste time on fast pages and still be too short on slow pages. Choose a wait condition based on what must be visible in the thumbnail.

5. Crop screenshots consistently for the directory

You can capture exactly the card dimensions or capture a larger viewport and crop when rendering. Capturing at a standard viewport preserves more context for review and lets the directory decide how the image fits its card. With CSS, a fixed-ratio image area can crop consistently:

.thumbnail {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Adjust object-position when a site’s logo or defining content is cut off. A centered crop is a useful starting point, not a guarantee that every page’s key content appears in the same place. Review the whole grid together and fix exceptions deliberately.

6. Add thumbnails accessibly and keep them paired with links

Make each preview and title lead to the same destination. If the image is decorative because the adjacent linked title already names the destination, use empty alternative text so screen readers do not repeat it. If the image is the only link label, give it concise alternative text that identifies the destination, not a long visual inventory.

<article class="design-card">
  <a href="https://example.com">
    <div class="thumbnail">
      <img src="/thumbnails/design-studio-a.webp" alt="" loading="lazy">
    </div>
    <h3>Design Studio A</h3>
  </a>
</article>

Use a durable image path under your control if the directory needs previews to remain available. Keep a mapping from each image file to its source URL so captures can be refreshed and failures traced.

7. Pick a workflow for the size of your list

Workflow	Useful when	Trade-off
Manual browser capture	A short, one-off list	Easy to start; repeated captures take manual work and can vary.
Local Playwright automation	You want a repeatable batch and control over browser capture	You manage the browser runtime, script, output files, and failure review.
Hosted screenshot API	You prefer to send URLs to a service instead of maintaining a browser runtime	You depend on an external service and should check its response, formats, and operational details.

The available research documents Playwright’s capture controls and Canva’s design-page thumbnail metadata, but it does not establish comparative provider prices, throughput, image quality, or reliability. Evaluate those against your own requirements rather than assuming one approach is universally best.

8. Review and troubleshoot the generated images

Symptom	Likely cause	What to check or change
Blank or mostly empty image	The page had not rendered its main content, navigation failed, or the destination showed a blank state.	Open the screenshot and page response details. Wait for a visible page-specific element, check the URL and response, then recapture.
Loading placeholders or missing images	Images or other content had not loaded when capture ran.	Wait for the relevant content or a suitable page condition. Review the page at capture time and recapture if necessary.
Cookie banner, popup, or chat widget covers the design	The destination displayed an overlay in the capture.	Decide whether the overlay is part of the destination you want to represent. If not, use a capture setup that can handle or hide it, then inspect the resulting image.
Screenshot is cut off or inconsistent	Viewport dimensions, scroll position, capture type, or card crop varies.	Use the same viewport and capture mode, check whether the page scroll position is at the top, and apply one card ratio consistently.
Navigation times out	The page is slow, keeps connections open, or does not reach the selected wait condition before the timeout.	Check the URL and site behavior. Use a suitable readiness condition and timeout; do not treat a longer timeout as proof the eventual image is correct.
Element screenshot fails	The selector does not match, is hidden, or is not ready.	Confirm the selector exists on that site, wait for it to become visible, and handle site-specific selectors where needed.
Browser launch or executable error	The Playwright package or browser binary is missing from the environment.	Install the package and the matching browser binary, then run the script in an environment that can launch that browser.
Image file exists but will not display	The output extension, actual encoding, MIME type, or delivery path does not match.	Check the generated file and how your server serves it. Keep the extension and content type aligned with the actual image format.

9. Performance, reliability, and cost considerations

Local automation means your workflow must provision and run a browser. For a batch, reusing a browser and browser context—as the example does—is simpler than launching a new browser for every URL. Each page is processed in sequence here, which keeps the example easy to follow; if you run captures concurrently, limit parallel work to what your machine and target sites can handle, and preserve per-URL error handling.

Failed loads and page-specific behavior make visual review part of a dependable workflow. Save filenames and source URLs together, log which captures failed, and regenerate only the images that need it. If you publish output files, consider whether they need to be optimized or resized for your delivery setup; the reviewed sources do not establish a universal best image format, size, or cost for that step.

Manual capture has no browser-script setup but requires hands-on effort for each page. Local automation shifts that effort into script and browser maintenance. A hosted API avoids maintaining a browser runtime but introduces a service choice. No comparative cost, throughput, or reliability figures are available in the research for those approaches.

10. Canva thumbnail URLs are a separate option

If your curated list consists of Canva design pages and you use Canva’s design-pages API, its response includes thumbnail metadata. The returned thumbnail URL expires after 15 minutes, so retrieve or consume it promptly; do not treat it as a permanent asset URL. This is specific to that API’s thumbnail URLs and is not a general rule for screenshots captured from arbitrary websites. See the Canva design-pages API documentation.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. A single GET request can return an image or PDF from a URL. Here is the thumbnail request in cURL:

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

See the ScreenshotNeo API documentation for the request options and setup. For a directory batch, send one request per URL or use its bulk capture option, which accepts up to 100 URLs per call. Review each returned image and store it where your directory expects its thumbnails.

Cookie banners are accepted like a visitor, and 60+ known consent platforms, newsletter popups, and chat widgets are removed before capture; each step can be turned off.
Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing. The response includes X-Page-Verdict and X-Billed headers.
An MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs.
The Free plan includes 1,000 screenshots a month with no card. Paid plans start at $5 for 3,000 screenshots.

FAQ

Should every thumbnail show the whole website?

No. Choose full-page captures when below-the-fold content is central to what the destination offers. Otherwise, a consistent first-viewport preview is a compact way to show the page’s first impression.

Is 16:9 required for website thumbnails?

No. Pick a ratio that suits your directory and apply it consistently. Figma’s 1920 × 1080 guidance concerns Figma file thumbnails, not a universal standard for website cards.

Can I use Canva thumbnail URLs as permanent image files?

Not safely: the Canva design-pages API documentation says those returned URLs expire after 15 minutes. Retrieve or consume them promptly.

Does a screenshot prove that a page loaded correctly?

No. A saved image can still show a blank state, an overlay, or incomplete content. Inspect captures before using them as destination previews.