How to Make Website Thumbnails for a Nonprofit Resource Directory

To make website thumbnails for a nonprofit resource directory, first measure the image slot in your directory card at mobile and desktop widths. Choose a permission-cleared image that accurately represents the linked resource, crop or contain it consistently, compress it until it remains clear at its displayed size, and add alt text based on the image’s purpose. There is no universal thumbnail size for directory cards: the right dimensions depend on your site’s layout.

“Thumbnail” can mean three different things: an image inside a directory card, a CMS featured image, or a social sharing preview. They may use different dimensions and crops. Set up the directory card first, then handle featured images and sharing previews separately.

1. Measure the directory card before choosing an image size

Inspect the actual card component at the widths your site supports. Record the displayed image width and height, the aspect ratio, and whether the card expands, stacks, or changes shape on small screens. If your design uses a square slot on mobile and a landscape slot on desktop, decide whether to use separate crops or a single image with a responsive crop.

Decide how the image should fit:

Fill and crop: the image covers the complete frame, but may cut off edges. This works when the important subject can stay near the center or when you can set a focal point.
Show the full image: the whole image remains visible, though empty space may appear around it if the source and frame ratios differ.

In WordPress, the Image block lets you set an aspect ratio and adjust how an image fits; the Cover block fills its area and can crop. Check the crop at the card’s small rendered size, not only in the editor. See the WordPress Image block documentation.

2. Choose a source image that helps identify the resource

A screenshot of the destination website can help a reader recognize a service or guide. A representative photograph or original illustration can also work if it is accurate, cleared for use, and still distinguishable when reduced. Avoid generic imagery that suggests a service or topic the linked page does not provide.

For a large directory, settle on a repeatable approach: for example, destination screenshots for web services, organization-provided images where permission is clear, and a consistent fallback graphic when no suitable image exists. Keep the treatment consistent, but do not force every resource into an image that misrepresents it.

Before using an image, check its license or get permission. If you use an image hosted by another organization, it can disappear if that file is moved, deleted, or no longer shared. Where your permissions allow, keep a durable copy in your own media library.

3. Create and crop the thumbnail

Start with an image large enough for the largest rendered slot and any high-density display you support.
Resize proportionally if you want to retain the full source image. Crop deliberately if the card needs a fixed ratio.
Keep the focal subject visible in both narrow and wide layouts. Make separate crops if one crop cannot work for both.
Preview the result at the actual card size. Small text inside a website screenshot may become unreadable; the thumbnail should still communicate the site or resource visually.
Export in an image format supported by your site and compare clarity and file size after resizing and compression.

WordPress documents default image size examples of 150 × 150 pixels for thumbnail, 300 × 300 for medium, 768 pixels wide for medium-large, and 1024 × 1024 for large. These are examples of WordPress-generated sizes, not universal recommendations for a resource directory; themes and site configuration affect which sizes are generated and displayed. See WordPress featured images and post thumbnails.

4. Add thumbnails in WordPress or another CMS

In WordPress, a theme must support featured images for the relevant post type before the featured-image control appears. Your theme can register named or custom image sizes, including sizes intended to crop. Choose a size appropriate to the card rather than serving a needlessly large original to every listing.

For an Image block in a page or resource entry, upload or select the image, set the display ratio and fit, and inspect the result at responsive widths. For a featured image, set it on the resource post and verify that the theme’s card template uses the intended generated size and crop. Other CMSs have different field names, but the same checks apply: find the card image field, set its crop behavior, and inspect the rendered listing.

If the directory is generated from code, store the source image and its alternative text with the resource record, then render the image with explicit dimensions so the browser can reserve space. A minimal HTML pattern is:

<article class="resource-card">
  <a href="https://example.org/service">
    <img
      src="/media/service-thumbnail.webp"
      width="640"
      height="400"
      alt="Visit the community food assistance service"
      loading="lazy"
    >
    <h3>Community food assistance</h3>
  </a>
</article>

Replace the example URL, image, dimensions, and alt text with values appropriate to your resource and layout. For a decorative or redundant image whose link text already communicates the destination, use alt="" so assistive technology does not repeat the same information.

5. Write alt text for the image’s role

There is no single alt-text phrase that works for every thumbnail. Ask what the image contributes in context:

Functional linked image: if the image is the only link content, describe the destination or action the link provides.
Informative image: briefly describe the meaningful information the image adds.
Redundant image: if adjacent link text already gives the same destination and the image adds nothing, use empty alt text.
Decorative image: use empty alt text when the image is purely visual and communicates no additional information.

W3C’s alt decision tree explains that the right choice depends on context and that a linked image may need to communicate the link’s destination or action.

6. Keep thumbnails clear without making the directory heavy

Larger image files can take longer to load. Resolution, visual clarity, and file size trade off, so compare actual resized and compressed outputs rather than applying a universal file-size target. WordPress’s image size and quality guidance describes this tradeoff; its older approximate file-size examples should not be treated as current performance targets.

Serve an appropriately sized derivative for the card instead of the full-resolution source.
Use responsive image candidates when your CMS or site stack supports them, so small screens need not download the largest variant.
Set width and height attributes, or an equivalent aspect ratio, to reserve layout space while the image loads.
Lazy-load below-the-fold card images where appropriate; avoid delaying an image that is immediately visible if that harms the initial render.
Check the directory on a slower connection and on a narrow screen, and inspect whether the thumbnail remains legible and the page layout stable.

For consistency at scale, automate generation of the required crops when adding a resource, but keep a way to review exceptions where the subject gets cut off or the source image is unsuitable.

A directory card thumbnail does not automatically make a good social preview. Social platforms read page metadata and may apply their own display rules. Open Graph defines og:image for the share image and says that a page specifying it should also specify og:image:alt. See the Open Graph protocol.

For Facebook sharing previews, WordPress.com’s guidance lists a 1.91:1 ratio, a 200 × 200 pixel minimum, 600 × 315 pixels as a larger image, 1200 × 630 pixels for high-resolution displays, and an 8 MB maximum. These are Facebook-specific recommendations, not requirements for directory cards. A platform may cache a previous preview for days or weeks; WordPress.com points readers to Facebook’s Sharing Debugger to request a refresh. Check the current preview guidance for the platform you use.

8. Generate a destination screenshot for a thumbnail

If a destination screenshot is the right image, capture it in a browser or use a screenshot API, then review it, crop it for the card slot, and save an optimized derivative. A browser-based capture is useful when you need to control viewport, wait for the page, or capture a particular element.

For a browser workflow, open the destination at the intended viewport, wait for the content that matters, capture the page or selected element, then crop and compress the output. Use a stable test URL and review the image before adding it to the directory. Be aware that pages may show consent prompts, chat widgets, login walls, or bot checks; a screenshot may reflect those states instead of the resource.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request returns a PNG, JPEG, WebP, or PDF. Its capture can accept cookie and consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets before the shot; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response reports the page verdict and billing status in headers. AI agents can use its MCP tools for screenshots, page information, and PDF capture.

Example using cURL (replace the URL with a resource destination you are permitted to capture):

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

Equivalent Python:

import 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)

Equivalent Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

These examples use the API’s default capture behavior. The ScreenshotNeo API documentation covers the available options, including full-page or selector capture, viewport and device presets, output format, custom CSS or JavaScript, waits, request blocking, headers and cookies, caching, resizing, asynchronous jobs, bulk capture, and signed links. Review each screenshot and prepare a card-sized crop; a captured page image is not automatically a well-composed directory thumbnail.

ScreenshotNeo includes all features on every plan. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots. Sign up for 1,000 free screenshots a month, with no card.

Troubleshooting common thumbnail problems

Problem	Likely cause	What to do
The subject is cut off	The crop fills the frame, but the focal point is near an edge or the source ratio differs from the card.	Adjust the focal point, choose a different crop, use separate mobile and desktop crops, or show the full image with empty space.
The thumbnail looks blurry	The source is too small for the rendered size, or repeated resizing/compression reduced detail.	Start from a larger permitted source, resize once to the needed derivatives, and compare the exported result at display size.
The directory loads slowly	Cards may be downloading oversized originals or uncompressed files.	Generate appropriately sized variants, compress and compare them, and use responsive images where available.
There is a blank gap or the page jumps as images load	The layout has no reserved image dimensions or aspect ratio.	Set width and height attributes or an aspect ratio on the image container.
The WordPress featured-image control is missing	The active theme may not support featured images for that post type.	Check theme support and the post type configuration; see the WordPress developer documentation.
An image hosted elsewhere stops appearing	The original file may have moved, been deleted, or stopped being shared.	Use an image you have permission to retain and store a durable copy in your own media library when allowed.
The linked image is announced twice	Alt text repeats adjacent link text or the resource title.	Use empty alt text if the image adds no information beyond the adjacent text; otherwise describe its distinct purpose.
A social share still shows an old image	The platform may have cached the earlier preview.	Verify the page’s Open Graph image and alt metadata, then use the platform’s preview refresh tool if available.
A captured screenshot shows a consent banner or bot check	The destination presents that state to the capture request or blocks automated access.	Confirm you have permission to capture the page, try an appropriate browser session or wait configuration, and do not publish an image that misrepresents the resource.

Frequently asked questions

Can I use a screenshot of another organization’s website?

Use screenshots only when you have the necessary permission and the image represents the destination accurately. Keep the source stable and review it again if the destination changes.

Do all resources need a thumbnail?

No. If a suitable image would be misleading, inaccessible, or too difficult to maintain, a clear resource title and description can serve readers better than a forced image.

Is a design tool required?

No. A consistent crop can be made with your existing image workflow. Canva says eligible nonprofits can access Canva Pro for free through Canva for Nonprofits; eligibility depends on country and verification, and Canva says review is usually communicated within 72 hours, with some cases taking longer. See Canva for Nonprofits.

Launch checklist

Measure card slots at representative mobile and desktop widths.
Choose imagery that identifies the destination and is cleared for use.
Pick a consistent crop or fit behavior and check focal points.
Generate appropriately sized files and compare clarity with file size.
Add contextual alt text, or empty alt text for decorative or redundant images.
Reserve layout space and check loading behavior on the real directory page.
Set social preview metadata separately if resource pages are shared.