How to Create Website Thumbnails for a University Resource Directory

To create useful website thumbnails for a university resource directory, first measure the directory card at its responsive sizes, then capture each destination consistently, crop the capture to the card’s aspect ratio, and review it at the size readers will see. Use a page screenshot when context matters and an element screenshot when a specific region is more representative. Write alternative text that works with the adjacent resource link.

There is no verified universal thumbnail size or university-specific specification. Derive export dimensions from your actual card component and its responsive layouts.

1. Set the thumbnail requirements

Before capturing sites, document the display context. This prevents inconsistent crops and oversized files from accumulating in the directory.

Card dimensions and ratio: Record the image container’s rendered width and height at each relevant breakpoint. If the design uses a fixed ratio, use that ratio for every thumbnail.
Image role: Decide whether the preview is informative or decorative. If it helps identify the destination, provide concise alt text. If it adds no information beyond the nearby link, use empty alt text (alt="").
Capture view: Decide whether readers need the whole page’s context, the initial viewport, or a specific page region.
Refresh policy: Decide how often to regenerate previews and what should happen when a destination is unavailable or changes its layout.
Local constraints: Check CMS image requirements, authentication needs, rights to reproduce destination imagery, and any institutional review requirements.

Google Search Central recommends choosing images that are relevant and representative, and cautions against generic logos and extreme aspect ratios. Google’s style guide recommends cropping screenshots to the relevant information and keeping screenshot presentation consistent. Apply those principles to the directory’s actual card design rather than assuming a particular pixel size is best. Google image guidance · Google image style guide

2. Choose page capture or element capture

Approach	Use it when	Trade-off
Page screenshot	The page’s overall identity and layout help a reader recognize the resource.	Different sites may place useful content at different positions; a uniform card crop may include irrelevant space.
Element screenshot	A stable, identifiable region is more useful than the whole page, such as a resource’s main content panel.	Third-party layouts and selectors vary, and a region may move or disappear after a redesign.

Puppeteer documents both page and element screenshots. The choice depends on how much context a directory reader needs and how reliably the selected region can be identified; the available sources establish no benchmark that makes one method best for every directory. Puppeteer screenshot guide

3. Capture thumbnails with Puppeteer

This runnable Node.js example captures the first viewport of each URL at a consistent viewport size. It writes PNG files into a local thumbnails directory. The viewport is an example configuration, not a recommended universal thumbnail dimension; adjust it to your page layout and capture needs.

import puppeteer from 'puppeteer';
import { mkdir } from 'node:fs/promises';

const resources = [
  { id: 'library', url: 'https://www.example.edu/library' },
  { id: 'archives', url: 'https://www.example.edu/archives' },
];

const outputDir = './thumbnails';
const viewport = { width: 1280, height: 800, deviceScaleFactor: 1 };

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

try {
  for (const resource of resources) {
    const page = await browser.newPage();
    await page.setViewport(viewport);

    try {
      await page.goto(resource.url, {
        waitUntil: 'networkidle2',
        timeout: 45_000,
      });
      await page.screenshot({
        path: `${outputDir}/${resource.id}.png`,
        type: 'png',
        fullPage: false,
      });
      console.log(`Saved ${resource.id}`);
    } catch (error) {
      console.error(`Could not capture ${resource.id} (${resource.url}):`, error);
    } finally {
      await page.close();
    }
  }
} finally {
  await browser.close();
}

Replace the example URLs with directory destinations. Install Puppeteer in a Node.js project using the package manager and installation instructions in the official Puppeteer documentation. The script intentionally records per-URL failures and continues through the list.

Capture a specific element

When a page region is a better preview, wait for a selector and screenshot that element. Replace .main-content with a selector appropriate to the target site.

const selector = '.main-content';
await page.goto(resource.url, { waitUntil: 'domcontentloaded', timeout: 45_000 });
await page.waitForSelector(selector, { timeout: 15_000 });
const element = await page.$(selector);
if (!element) throw new Error(`Element not found: ${selector}`);
await element.screenshot({ path: `${outputDir}/${resource.id}.png` });

Element capture can produce different image shapes and sizes across destinations. Crop or fit its result into the same directory card ratio, and check that the chosen region does not omit context a reader needs.

Full-page capture and lazy-loaded content

For a full-page image, use fullPage: true in page.screenshot(). Full-page screenshots can be much taller than a card and may shrink the site’s contents when scaled down, so use one only when the page as a whole is useful. Puppeteer’s screenshot guide documents page and element screenshots; it does not define a universal thumbnail export size.

Some pages load images or other content only as a reader scrolls. If the representative area is below the fold, scroll it into view or wait for its selector before capture. Avoid blindly scrolling every page to the bottom: doing so can trigger long feeds, extra requests, or changing content. Use a bounded wait and handle the case where the content never appears.

4. Crop, scale, and review for directory cards

Use the card’s measured aspect ratio as the crop target.
Choose a representative area that identifies the destination. Avoid cropping away the page feature that makes the resource recognizable.
Keep framing consistent across thumbnails so the directory grid feels coherent.
Generate an output appropriate to the card’s rendered size and responsive variants. Do not assume one export dimension suits every display.
Review the image in the actual card at desktop and mobile breakpoints. Check legibility, cropping, and whether the image accurately represents the linked destination.

These review steps are practical editorial guidance, not a claim that a particular size or crop has been usability-tested. No university-wide thumbnail standard was established in the research sources.

5. Add accessible alternative text

For an informative thumbnail, write a concise description that identifies the resource or relevant destination context. The nearby link may already name the institution or service, so avoid repeating the entire link label without adding useful information. For a decorative thumbnail that adds nothing beyond nearby text, set an empty alt attribute.

<a href="https://www.example.edu/library">
  <img src="/media/library-thumbnail.png"
       alt="University library search and research guides">
  University Library
</a>

<!-- If the thumbnail is decorative and the link text names the destination: -->
<a href="https://www.example.edu/library">
  <img src="/media/library-thumbnail.png" alt="">
  University Library
</a>

Choose the alternative based on the image’s role in context. Google’s guidance covers descriptive alternatives for informative images and empty alternatives for decorative images. Google style guidance on image alt text

6. Automate a directory-sized capture job

For a small set, the sequential script above is easy to understand and troubleshoot. For a larger directory, store each destination’s URL, capture mode, optional selector, output path, and last successful capture in a manifest or database. Then:

Validate URLs and unique output identifiers before launching the browser.
Run a limited number of browser pages at once; unbounded parallel capture can consume memory and overload target sites.
Set navigation, selector, and overall job timeouts. Record failures by URL so staff can review them.
Write captures to temporary files, then publish a new file only after capture succeeds. Keep the prior thumbnail when a refresh fails.
Refresh on a schedule suited to the directory, and provide a way to recapture a single destination after a reported change.
Review a sample after site redesigns and periodically check for stale, blank, or misleading previews.

These are operational recommendations inferred from the browser capture workflow. The cited sources do not establish a required refresh interval, concurrency level, or institutional process.

7. Troubleshoot common capture problems

Symptom	Likely cause	Practical fix
Navigation times out	The site is slow, keeps network connections open, or blocks automated browsing.	Use a bounded timeout, consider waiting for `domcontentloaded` instead of network idle, and capture only after the required element appears. Record the failure for review.
Screenshot is blank or incomplete	The capture ran before the page’s visible content rendered, or the site returned a challenge/error page.	Wait for a meaningful selector or short, bounded delay; inspect the resulting page state and do not publish a blank capture as a thumbnail.
Element selector is not found	The destination has a different layout, selector, or delayed content.	Confirm the URL and selector, wait for the expected element with a timeout, and fall back to page capture only if that view remains representative.
Images are missing	Images load lazily, load slowly, or are blocked.	Bring the representative region into view, wait for relevant images, and check whether the site requires an authenticated or otherwise permitted session.
Crop cuts off important content	The card ratio differs from the captured viewport or the page layout varies.	Adjust the crop per destination or choose a stable element; review the image at actual card size.
Capture differs between runs	Dynamic content, rotating banners, personalization, or changing viewport state.	Use a consistent viewport and capture point, and decide whether a dynamic region should be excluded or whether the preview needs manual review.
Browser process exits or runs out of memory	Too many pages are open, or full-page captures are very large.	Close each page after capture, limit concurrency, and avoid full-page capture when a card needs only a small preview.
Destination requires sign-in	The page is restricted or depends on institutional authentication.	Check local authorization and privacy requirements before automating access. Do not place credentials in public scripts or logs; use an approved secure configuration if capture is permitted.

8. Performance, reliability, and cost

With a self-hosted Puppeteer workflow, the main operational costs are browser compute, storage, maintenance, and staff time spent handling sites that change or reject automated visits. Sequential captures limit resource pressure but take longer; concurrency can reduce elapsed time while increasing memory use and load on destination sites. Full-page captures generally create larger artifacts than a card-focused viewport or element capture.

Reliability depends on the target site and capture state. A successful browser navigation does not by itself guarantee a useful thumbnail: review for blank pages, challenges, unexpected dialogs, stale content, and misleading crops. Keep the previous good image available when a refresh fails, and retain enough per-URL status to diagnose problems without exposing credentials.

Check institutional policy and rights before reproducing external website imagery. The research supports a software workflow; it does not establish a required purchase, university policy, or compliance determination.

9. 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 API accepts the same parameter names used by other screenshot APIs, which can make switching easier. See the ScreenshotNeo website and API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://www.example.edu/library -o library.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://www.example.edu/library"},
    timeout=90,
)
r.raise_for_status()
open("library.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://www.example.edu/library'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('library.webp', image));

Cookie and consent banners are accepted and removed, along with known newsletter popups and chat widgets; each step can be turned off.
Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed. Responses include X-Page-Verdict and X-Billed headers.
An MCP server gives AI agents tools for screenshots, page information, and PDF capture.
The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots.

Create a free ScreenshotNeo account for 1,000 screenshots a month with no card.

FAQ

Should every directory card show the same part of each site?

Keep the crop and presentation consistent, but choose a representative view for each destination. Some sites may need a selected element while others are clearer as a page capture.

Is a thumbnail a substitute for the resource link’s accessible name?

No. Keep the destination link understandable in its surrounding content, and choose image alt text based on whether the thumbnail adds information or is decorative.

How often should thumbnails be refreshed?

Set the interval according to how frequently destinations change and how current the directory needs to be. The sources establish no universal refresh schedule.

Can one thumbnail size serve every university directory?

No universal pixel dimensions were verified. Measure the actual card and responsive layouts, then generate images suited to those contexts.