Free tools Windows power users keep installed
One-click scans. No signup required.
Start with the directory card as it appears on your site: its proportions, responsive sizes, and how much of an image it should show determine the right thumbnail. There is no universal website-thumbnail size. Choose a meaningful image you have permission to use, crop and compress it for the actual display, add context-appropriate alt text, and check the result on the published page.
A “thumbnail” might mean an image inside a directory card, a WordPress featured image, or a social-sharing preview. These are different uses; social-preview dimensions do not automatically suit on-site cards.
As an Amazon Associate I earn from qualifying purchases.
How do I make website thumbnails for a nonprofit resource directory?
- Define the display slot. Measure the directory card at the responsive breakpoints your site uses. Note whether the image area is square, landscape, or another shape, and decide whether it should show the whole image or fill and crop the frame.
- Choose a useful image. Use a screenshot of the destination or a representative image that actually helps distinguish the resource. Confirm you have permission to use it. Avoid generic imagery that could mislead visitors about the linked content. For a large directory, use a repeatable visual approach.
- Resize or crop for the card. Keep the source proportions if you want the full image visible, or deliberately crop to the card ratio. Check the result at the small size people will see; meaningful text or subjects can disappear in a crop.
- Balance clarity and file size. Compare the resized and compressed output at its actual display size. Larger files can take longer to load, while aggressive compression or undersizing can make an image unclear. WordPress’s image guidance discusses this trade-off; its older approximate file-size advice should not be treated as a current performance target. WordPress image size and quality.
- Add the image through your CMS or site components. If using WordPress, check that the theme supports featured images for the relevant content type before looking for the featured-image control. Use an appropriate registered size or configure a custom size. For an image hosted elsewhere, consider that it may disappear if its source is moved, deleted, or no longer shared; use authorized imagery and consider keeping a durable copy in your own media library. WordPress featured images and post thumbnails.
- Write alt text according to the image’s job. If a linked image is needed to explain a link or action, its alternative text should communicate the destination or action when that is not already clear. Describe informative images briefly; use empty alt text for decorative or redundant images. The right choice depends on context, not a single formula. W3C WAI alt decision tree.
- Review the published layout. Check representative cards on narrow and wide screens for cropping, clarity, text contrast, and alt text. Where possible, reserve the image’s dimensions in the layout to reduce unexpected movement as it loads.
What size should a website thumbnail be?
Use the dimensions and shape of your own directory component, rather than treating a platform default or social-preview size as universal. WordPress Developer Resources documents default-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 sizes, not recommendations for every directory; generated and displayed behavior can depend on the site configuration and theme. WordPress featured images and post thumbnails.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteFor WordPress sites, the Image block can change the displayed aspect ratio without editing the source. Cover fills its frame and may crop; Contain keeps the full image visible and may leave unused space. Set a focal point if cropping could cut off the important subject. WordPress Image block.
#1 Best Overall
How should directory thumbnails differ from social previews?
A directory card is governed by your site’s component and responsive layout. A social-sharing preview is governed by the platform displaying the link, so check those requirements separately. Open Graph provides image metadata for link previews and says that a page specifying og:image should also specify og:image:alt. Open Graph protocol.
For Facebook sharing previews, WordPress.com’s guidance reviewed August 12, 2026 lists a 1.91:1 ratio, 200 × 200 pixels minimum, 600 × 315 pixels for a larger image, 1200 × 630 pixels for high-resolution displays, and an 8 MB maximum file size. These are Facebook-preview recommendations, not directory-card requirements. Facebook may retain cached images for days or weeks; WordPress.com points to Facebook’s Sharing Debugger to request a refresh. WordPress.com Facebook image thumbnail guidance.
How do I choose the right source image and crop?
Compare candidate images by whether they accurately signal the resource, remain legible at card size, are cleared for use, can be cropped consistently, and still look clear at a reasonable file size. Also consider whether the image communicates information that needs to appear in its alt text. A screenshot can help identify a destination, but small webpage text may become unreadable; a representative, permission-cleared image may work better if it genuinely describes the resource.
- Full image visible: preserve the image’s proportions or use a contain-style presentation; expect possible empty space inside the card.
- Frame filled: crop intentionally or use a cover-style presentation; check that the crop does not remove the subject or important meaning.
- Many listings: settle on a consistent visual treatment, while choosing images that remain specific to each resource.
How do I add a thumbnail in WordPress?
- Confirm the theme supports featured images for the directory’s post type. If it does, open the listing editor and use its featured-image control; the exact control placement depends on the site’s WordPress setup.
- Select an image you are allowed to publish. Upload it to the site’s media library if you need a durable copy rather than relying on a source URL that could later stop working.
- Choose or configure an image size suited to the directory layout. WordPress supports named and custom featured-image sizes, but the theme and site configuration affect what is generated and displayed. See the WordPress featured-image documentation.
- In the page or template, set the display shape and crop behavior. With the Image block, adjust aspect ratio; choose Cover if filling the frame matters more than showing every edge, or Contain if showing the full image matters more. Set the focal point when needed. See the Image block documentation.
- Enter alt text based on the image’s function, then preview the listing at the relevant responsive widths before publishing.
How do I write accessible thumbnail alt text?
Decide first whether the image conveys information, performs a link or action, merely repeats nearby text, or is decorative. W3C WAI advises using alt text to communicate a linked image’s destination or action when that information is needed to understand the link or button. If a thumbnail simply repeats a resource title already presented as adjacent link text, a screen reader may not need the same words again; decorative or redundant images can use empty alt text. W3C WAI alt decision tree.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.How do I capture consistent website screenshots for directory thumbnails?
For a small directory, you can capture each destination with your browser, then crop and optimize the images to match your card. For repeatable captures across many resources, use the same viewport and visual treatment, and review screenshots for consent overlays, popups, or other content that obscures the page. Confirm you have permission to publish the resulting images.
Or skip the browser setup:
ScreenshotNeo can return a website screenshot in one GET request. Its API documentation covers the request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.org -o shot.webp
ScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. An MCP server offers take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. See ScreenshotNeo for details and sign up for 1,000 free screenshots a month with no card.
How do I check thumbnails before and after publishing?
- Inspect the card at the narrow and wide responsive layouts your site actually uses.
- Check whether the crop preserves the meaningful subject and whether any text inside the image remains legible.
- Confirm the image is authorized for use and the hosted file will remain available.
- Check alt text in context, including whether nearby link text already communicates the destination.
- If you also rely on link sharing, verify the Open Graph image and alt metadata, then inspect the platform preview separately from the directory card.
Common problems and fixes
- The thumbnail is cropped badly: the display frame’s ratio or focal point does not suit the source. Re-crop for the card, adjust its focal point, or choose a better-fitting image.
- The featured-image control is missing in WordPress: the theme may not support featured images for that content type. Check the theme or site configuration before changing the image itself.
- An externally hosted image disappears: its source may have been moved, deleted, or become unavailable. Use an authorized copy in your own media library when appropriate.
- The thumbnail looks blurry or loads slowly: compare the resized, compressed output at the actual display size. WordPress notes the clarity and file-size trade-off, but there is no universal compression target established here. WordPress image size and quality.
- A new social image does not appear: the platform may still be using a cached preview. For Facebook, WordPress.com identifies the Sharing Debugger as a way to request a refresh. Facebook image thumbnail guidance.
Canva for nonprofit teams
Canva is optional, not required. Canva says eligible nonprofits can access Canva Pro for free through Canva for Nonprofits; applicants must check eligibility for their country, apply, and complete verification. Canva says review is usually communicated within 72 hours, though some cases take longer. Canva for Nonprofits.
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.
