How to Make Website Thumbnails for a Tamil Business Directory

To make website thumbnails for a Tamil business directory, first decide whether each tile should preview the business’s live website or show a consistent card designed by the directory. Set the tile dimensions to match your actual listing layout, generate the image by capturing a page or rendering a card, and save it as a derivative associated with the listing. Keep the business name and other essential details as live text beside the thumbnail so they remain readable and accessible.

This guide covers both thumbnail types, a WordPress route, and a custom browser-capture workflow using Playwright. It also explains storage, batch processing, Tamil text checks, failures, and when a hosted screenshot API can simplify capture.

1. Choose what the thumbnail should show

Approach	Good fit when	Trade-off
Live website preview	Visitors benefit from seeing the business’s actual website before opening it.	Sites vary in layout and may change, fail to load, or show overlays. You need a capture and refresh workflow.
Branded directory card	Visitors need a uniform grid that emphasizes the business name, category, or approved listing details.	The image represents the directory’s design rather than the live destination. Keep text as HTML where practical.

You can also use both: a generated card for listings without a usable website and a live preview for listings with an approved, working URL. Record which type was generated so refresh jobs do not replace a manually approved card with a website capture.

2. Set dimensions from the real directory layout

Inspect the listing card at the widths your directory serves, including a narrow mobile layout. Choose a target width and height that fit that card, then decide how to handle source pages with different proportions:

• Exact crop: every tile has the same shape, but a crop can remove important parts of a page.
• Proportional resize: the full source proportions are preserved, but tiles can vary in shape unless you place them in a fixed frame.
• Contain inside a fixed frame: the whole image remains visible, with empty space possible around it.

There is no universal thumbnail size for business directories. Business Directory Plugin, for example, documents both fixed-size cropping and proportional resizing; its documentation gives a 1000 × 500 source resized to 150 pixels wide as 150 × 75 when cropping is off. ScreenshotAPI publishes 1280 × 800 captures with 640 × 400 or smaller serving sizes, and 400 × 250 for grid layouts, as its own examples. Treat those as examples, not a standard or independently validated recommendation. [Business Directory Plugin image settings; ScreenshotAPI’s directory thumbnail guide]

Generate an image close to its displayed size and compress it. ScreenshotAPI gives example sizes at quality 80 of roughly 30–50 KB for JPEG, 20–35 KB for WebP, and 100–200 KB for PNG; actual size depends on page content and compression. Choose JPEG or WebP for photographic and page-preview imagery when supported by your delivery stack. PNG can suit graphics that need lossless edges or transparency. Check how your target browsers and image pipeline handle the format before standardizing it.

3. Keep Tamil names readable and accessible

Use the listing page’s live HTML text for the Tamil business name, category, and other important details. Do not make a screenshot the only place a visitor can read the name. A thumbnail can be unavailable, cropped, or hard to read at small sizes, and text embedded in a raster image cannot adapt like page text.

Check the Tamil font stack, fallback behavior, glyph shaping, and line breaks in the actual browsers and devices your audience uses. This guide does not establish a particular Tamil font or device combination as reliable; visually inspect your chosen stack. Give the image alternative text based on its purpose. For a linked preview, describe the destination or function; for a decorative thumbnail beside an already clear business link, an empty alternative may be appropriate. W3C WAI’s Images Tutorial says, “Images must have text alternatives that describe the information or function represented by them.” [W3C WAI Images Tutorial]

4. WordPress: configure listing images and thumbnails

If the directory runs on WordPress, start with the directory plugin’s listing image controls. Business Directory Plugin documents settings for whether listings can contain images, image limits, thumbnail visibility, main thumbnail size, and gallery dimensions. Its crop setting makes images fit exact dimensions and may cut off part of the source. Without that setting, the image preserves its proportions.

1. Choose the image type you want listing owners to supply or the directory to generate.
2. Set the thumbnail dimensions to fit the card layout you inspected, and choose crop behavior deliberately.
3. Check the active theme’s listing template to confirm it requests the intended image size and displays it at the expected dimensions.
4. Preview listings with wide, tall, and square source images, plus one that includes Tamil text.
5. If you change image dimensions later, regenerate existing derivatives or re-upload as appropriate. Changing settings alone does not resize images already uploaded.

For custom theme sizes, WordPress provides add_image_size(). Set the width, height, and whether to hard-crop; a crop position can also be specified. The registered size can be used by templates and exposed to the media library. [WordPress add_image_size() reference]

// Add to a theme or plugin. This example hard-crops to the directory card ratio.
add_action('after_setup_theme', function () {
    add_image_size('directory-thumbnail', 400, 250, true);
});

// In a listing template, request the registered derivative:
echo get_the_post_thumbnail(
    get_the_ID(),
    'directory-thumbnail',
    [
        'alt' => esc_attr(get_the_title()),
        'loading' => 'lazy',
    ]
);

Choose the example dimensions only if they fit your layout; they are not a universal directory standard. If you register a new size after media already exists, use a suitable thumbnail-regeneration workflow to create the missing derivatives, then check the resulting crops.

5. Custom application: capture pages with Playwright

Playwright can save a viewport screenshot, a full-page screenshot, or a screenshot of one selected element. For directory tiles, a fixed viewport or a selected element is usually easier to make consistent than a full-page capture. Full-page screenshots can be useful when the page section of interest is far below the fold, but they often need a deliberate crop afterwards. This is a workflow recommendation, not a Playwright requirement. [Playwright screenshots documentation]

The following Node.js example captures a consistent viewport for each URL, checks the HTTP result, and saves a PNG. Install Playwright with npm install playwright and install its browser with npx playwright install chromium. Save the code as capture.mjs, then run node capture.mjs https://example.com ./thumbnails/business-123.png.

import { chromium } from 'playwright';
import { mkdir } from 'node:fs/promises';
import { dirname } from 'node:path';

const [url, outputPath] = process.argv.slice(2);
if (!url || !outputPath) {
  console.error('Usage: node capture.mjs <url> <output.png>');
  process.exit(2);
}

const browser = await chromium.launch({ headless: true });
try {
  const page = await browser.newPage({
    viewport: { width: 1280, height: 800 },
    deviceScaleFactor: 1,
  });
  const response = await page.goto(url, {
    waitUntil: 'domcontentloaded',
    timeout: 30000,
  });
  if (response && response.status() >= 400) {
    throw new Error(`Page returned HTTP ${response.status()}`);
  }

  // Give layout and fonts a short settling period. For a specific page,
  // waiting for a stable selector is often more reliable than a fixed delay.
  await page.waitForTimeout(1000);
  await mkdir(dirname(outputPath), { recursive: true });
  await page.screenshot({ path: outputPath, type: 'png' });
  console.log(`Saved ${outputPath}`);
} finally {
  await browser.close();
}

For a chosen element, wait for it and capture its locator instead of the whole viewport:

const card = page.locator('main');
await card.waitFor({ state: 'visible', timeout: 10000 });
await card.screenshot({ path: outputPath, type: 'png' });

Use fullPage: true with page.screenshot() if you need the entire scrollable page. A full-page image can be very tall and costly to store or process; it is rarely a suitable tile without resizing and cropping. To process the returned image buffer instead of writing directly to a file, omit path and retain the buffer returned by page.screenshot(). [Playwright screenshots documentation]

6. Make thumbnail generation reliable at directory scale

For a handful of listings, manual capture and review can be enough. For bulk imports or regular refreshes, generate thumbnails in background jobs instead of during a visitor’s page request. Store each result with the listing record or a stable object-storage key; let listing pages serve the stored derivative. A job workflow makes retries possible and keeps a slow or blocked third-party site from slowing down directory page views.

1. Validate that the listing has an allowed, canonical website URL or an approved listing image.
2. Queue a job containing the listing ID, source URL, target dimensions, image type, and capture settings.
3. Capture or render the image, then check that the result is non-empty and has a plausible image format and dimensions.
4. Store the derivative and record its generation time, source URL, and status.
5. Show a fallback image or branded card when capture fails; do not repeatedly block the listing page while retrying.
6. Retry transient timeouts with a limit and backoff. Record permanent errors for review.
7. Refresh according to your content needs, and provide a way to mark manually approved images that should not be overwritten.

ScreenshotAPI describes a similar vendor workflow: capture a listing URL, store the result, display that saved image, and refresh older captures with a background job. Treat its examples as vendor-published guidance, not as an independent performance benchmark. [ScreenshotAPI directory thumbnail workflow]

7. Self-hosted browser or hosted capture API?

Consideration	Self-hosted browser automation	Hosted screenshot API
Operational control	You manage browser installation, concurrency, updates, and runtime failures.	The provider runs the capture service; you still manage your job queue and stored images.
Customization	You can integrate browser code and post-processing into your application.	Available capture controls depend on the API’s documented options.
Batching and refresh	You build the worker and retry workflow.	You still need to orchestrate listing batches, storage, and refreshes unless the service specifically handles them.
Storage and display	You choose where files live and how your site serves them.	Plan storage and display separately unless the provider’s documented flow covers them.
Cost	Account for compute, maintenance, and engineering time.	Compare current plan limits and billing rules against your expected capture volume.

There is no workload-independent winner. The reviewed research did not benchmark the traffic, capture volume, or operating cost of a Tamil business directory. Estimate how many initial captures and refreshes you need, then compare the total work and current verified pricing.

8. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server for developers. Its API can return a website capture with one GET request. Cookie banners are accepted and removed along with 60+ known consent platforms, newsletter popups, and chat widgets before capture. Each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers identify the page verdict and billing status. Its MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs.

For a thumbnail capture, use the API call below, then store the returned image against the listing and serve a derivative sized for your card. See the ScreenshotNeo API documentation for options and configuration.

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

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
with open("shot.webp", "wb") as image:
    image.write(r.content)

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

Replace the example URL with a listing’s canonical website. Keep the API key on your server, not in browser code. ScreenshotNeo supports PNG, JPEG, WebP, and PDF output, full-page capture with lazy images loaded, CSS element capture, viewport and device presets, resizing, custom CSS and JavaScript, wait conditions, request blocking, custom headers and cookies, caching, signed links, asynchronous jobs, bulk capture of up to 100 URLs per call, and a usage API. Use only the options your directory needs.

ScreenshotNeo includes 1,000 screenshots per month free with no card; paid plans start at $5 for 3,000, and every feature is on every plan. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed; an MCP server lets AI agents take screenshots. Sign up for 1,000 free screenshots a month, with no card required.

9. Troubleshooting common thumbnail problems

Symptom	Likely cause	What to do
Thumbnail is blank or shows an error page	The website failed to load, blocked automation, or returned an error.	Check the URL and HTTP response, inspect the capture, and retain a fallback card or approved image. Retry transient failures with a limit.
Important content is cut off	A fixed crop does not match the source layout.	Use proportional resizing or a different crop position, adjust the capture viewport, or capture a specific element.
Tiles look inconsistent	Source page ratios or capture viewports differ.	Use a consistent viewport and fixed display frame; choose crop or contain behavior based on what must remain visible.
Tamil characters look broken or wrap poorly	The browser lacks the intended font, a fallback differs, or the card is too narrow.	Keep the name as live HTML, load a suitable font stack, and check shaping and line breaks on target devices.
Changing WordPress dimensions has no effect on old uploads	Existing derivatives were not regenerated.	Regenerate image sizes or re-upload as appropriate, then verify the theme requests the intended size.
Directory pages become slow during image creation	Captures run in the visitor’s request path.	Move capture work to background jobs and have pages read stored thumbnails.
Image files are too large	The source or output dimensions exceed display needs, or the format is inefficient for the artwork.	Resize near the rendered size, select an appropriate format, and compress while checking visual quality.
Screenshot request times out	The source site is slow or a wait condition is too strict.	Use an appropriate timeout, wait for a necessary selector or a bounded delay, and record failures for retry rather than blocking the listing view.

10. Performance, reliability, and cost checklist

• Serve the smallest derivative that meets the listing’s displayed dimensions; avoid delivering full-page captures to a small card.
• Use lazy loading for thumbnails below the fold and explicit width and height in the page markup to reduce layout shifts.
• Cache and store generated files so a directory page view does not trigger a new browser capture.
• Run captures with bounded concurrency. Very high concurrency can strain your worker and the websites you are capturing.
• Track success, failure, image size, and capture time by listing so stale or broken thumbnails can be identified.
• Set a refresh policy based on how quickly the directory needs previews to reflect website changes; no reviewed source establishes one ideal interval.
• Budget for capture usage, storage, image delivery, browser compute if self-hosted, and worker maintenance. No independent study in the reviewed research establishes an ideal file-size budget or cost for this use case.

Frequently asked questions

Should every directory thumbnail be a screenshot?

No. Use a live preview when the destination appearance helps visitors decide. Use a branded card when consistent presentation and readable listing details matter more.

What is the best thumbnail size?

Use dimensions derived from your actual card layout and display sizes. There is no single standard size for every directory.

Can I put the Tamil business name inside the thumbnail?

You can, but keep the important name as live page text too. That makes it easier to read, adapt, and provide accessibly.

Should I capture the full website page?

Usually a fixed viewport or selected element is a more manageable starting point for a small tile. Full-page capture is available when the whole page is specifically useful, but you will likely need to resize or crop it.

How often should I refresh previews?

Set the interval according to how current the preview needs to be and how many listings you manage. The reviewed sources do not establish a universally correct refresh schedule.