How to Generate Website Thumbnails for a Marathi Web Design Portfolio

A reliable way to make a thumbnail for a Marathi web design portfolio is to capture each finished page in a consistent browser and viewport, choose a viewport, element, or full-page capture based on what the preview needs to show, then crop and resize it for the portfolio card. Before exporting, verify that Devanagari glyphs and vowel marks render correctly at the final display size. Playwright supports viewport, element, and full-page screenshots, with PNG, JPEG, and WebP output options. Playwright’s screenshot guide documents the capture choices.

1. Prepare the page and capture environment

Start with the finished live page or a locally running project. Use the same browser, viewport dimensions, zoom, and page state for each project in the portfolio. Browser, operating system, fonts, and other environment factors can affect rendering, so keeping the capture environment consistent helps make previews easier to compare. Playwright’s visual comparison guide discusses rendering differences across environments.

Open the exact page you want to feature and wait for its main content to appear.
Allow the page’s web fonts and images to load. If you control the site, confirm that the intended fonts have finished loading before capture.
Move the pointer away from menus and buttons so the screenshot does not accidentally show a hover state.
Dismiss or account for overlays, such as consent banners, dialogs, and chat widgets, if they obscure the design.
Use one repeatable viewport for the portfolio set. Choose a viewport that shows the composition you want viewers to notice.

For a local site, start its development server first and use the local URL in the capture script. Keep any required login or test data available. Avoid including private customer information or credentials in portfolio screenshots.

2. Choose the right capture area

Capture scope	Use it for	Watch for
Viewport	A compact card that communicates the page’s first impression.	It may omit sections below the fold.
Element	A specific hero, product panel, or other section that best represents the design.	The selector must match the intended element and the element should be visible.
Full page	A long-form layout, landing page, or page whose overall structure matters.	A tall image shrunk into a small card can make text and details unreadable. Consider using a separate full-page presentation image and a tighter card thumbnail.

Playwright documents these screenshot scopes, including capture of a page element and full scrollable page. See the screenshot options.

3. Generate a thumbnail with Playwright

The following runnable Node.js example opens a page, waits for fonts, captures a full-page WebP, and makes a second viewport capture. It uses Playwright’s browser automation API. Install Playwright and its Chromium browser before running it:

npm init -y
npm install playwright
npx playwright install chromium

Save this as thumbnail.mjs, replace the URL, then run node thumbnail.mjs:

import { chromium } from 'playwright';

const url = 'https://example.com';
const browser = await chromium.launch({ headless: true });
const page = await browser.newPage({
  viewport: { width: 1440, height: 1000 },
  deviceScaleFactor: 1,
});

try {
  await page.goto(url, { waitUntil: 'networkidle', timeout: 60000 });
  await page.evaluate(() => document.fonts.ready);

  await page.screenshot({ path: 'portfolio-full.webp', fullPage: true, type: 'webp' });
  await page.screenshot({ path: 'portfolio-card.webp', type: 'webp' });
} finally {
  await browser.close();
}

networkidle waits for network activity to settle. Some sites keep analytics, polling, or other connections active, so this condition may take too long or time out. If that happens, wait for a meaningful page selector instead, then wait for fonts:

await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 60000 });
await page.locator('main').waitFor({ state: 'visible', timeout: 30000 });
await page.evaluate(() => document.fonts.ready);
await page.screenshot({ path: 'portfolio-card.png' });

Replace main with a selector that reliably identifies the page’s finished content. For a specific region, use a locator screenshot:

await page.locator('.hero').screenshot({ path: 'portfolio-hero.png' });

Use a selector that is unique and stable for the intended section. If it matches multiple elements, choose the intended one explicitly or refine the selector.

Playwright’s screenshot API supports PNG, JPEG, and WebP, as well as full-page capture and device-pixel scaling. Check the current documentation for exact API details and options: Playwright screenshots.

4. Check Marathi text and font loading

A screenshot records what the browser rendered. If the page uses a font without the needed Devanagari glyphs, the browser can fall back to another font. Inspect the actual Marathi page rather than relying on a Latin-only sample. Look closely for missing glyphs, inconsistent fallback, clipped vowel marks, and text that becomes too small after resizing.

When you control the page, load a font source that covers the characters you use and keep a fallback family in the CSS font stack. Google Fonts documents loading a stylesheet and applying its font through CSS; its general documentation does not certify that a particular family covers Marathi, so verify the family metadata and rendered page yourself. Google Fonts API setup and Google Fonts explain the loading process.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=YOUR_VERIFIED_FAMILY&display=swap">

<style>
  body {
    font-family: "YOUR_VERIFIED_FAMILY", sans-serif;
  }
</style>

Replace YOUR_VERIFIED_FAMILY only after confirming that the current family metadata and the rendered page cover the Marathi text you need. A generic fallback helps when the requested font is unavailable, but the fallback’s glyph appearance may differ. Wait for document.fonts.ready before capture when using browser automation.

5. Crop, resize, and export for the portfolio

Choose the crop around the part of the page that best represents the design: often the hero, navigation, and a small amount of supporting content.
Use the destination platform’s supported dimensions and file formats. There is no universal thumbnail size that fits every portfolio.
Resize the image to the card’s actual display size and inspect it there. Check that Marathi text remains legible and that important details are not lost.
Apply a consistent crop and presentation treatment across projects. Google’s style guidance recommends cropping images to relevant information and keeping them consistent. Google’s image guidance has more detail.
Keep a larger source capture if you may need a different crop later, but export a suitably sized image for the published portfolio.

PNG, JPEG, and WebP are available capture formats in Playwright. Choose the format that your portfolio destination accepts and that looks good at the final size. A screenshot’s output scale can use CSS-pixel or device-pixel sizing; higher pixel density can preserve detail when the image is reduced, but it also creates a larger file. Inspect the result rather than assuming one format or scale is best for every page.

6. Troubleshooting

Symptom	Likely cause	Fix
Marathi characters are missing or inconsistent.	The chosen font lacks the needed glyphs, has not loaded, or is falling back.	Verify Devanagari coverage, retain a fallback stack, wait for fonts to load, and inspect the rendered capture.
Vowel marks or text appear clipped.	The page layout or line height does not accommodate the rendered glyphs, or the crop cuts the text.	Inspect the live page at the capture viewport, adjust the page’s layout if you control it, and widen the crop.
The capture is blank or shows a loading state.	The page was captured before its content rendered, or navigation did not reach the intended page.	Check the URL and navigation result, wait for a meaningful selector, and confirm the page works in the same browser environment.
The script times out waiting for navigation.	The site may keep network requests active, making `networkidle` unsuitable.	Use `domcontentloaded` followed by a visible content selector and a font-loading wait.
The screenshot has an unwanted menu or overlay.	A hover state, dialog, consent banner, or widget obscures the target.	Move the pointer away, dismiss the overlay when appropriate, or capture a more specific element.
The page is cut off at the bottom.	The script captured only the viewport.	Enable full-page capture, or deliberately use the viewport capture for a compact card.
The full-page image looks unreadable as a card.	A tall page has been reduced to fit a small preview.	Use a focused crop for the card and keep the full-page image as a separate detail view.
Images are missing in the screenshot.	Images had not loaded, were lazy-loaded, or failed to load.	Wait for the relevant image or content selector, scroll the target into view if needed, and verify image loading before capture.

7. Performance, reliability, and cost

For a small portfolio, capturing pages manually may be enough. For a larger set, automate capture with a fixed browser version, viewport, and capture script so that changes in the environment do not create unrelated visual differences. Browser-based rendering still depends on the page’s network resources and rendering environment, so keep the inputs consistent and review output when those inputs change.

Full-page captures and high pixel density can produce larger images and take more time to render and store than a compact viewport capture. Use the smallest capture scope and output dimensions that preserve the information the portfolio card needs. Browser automation has no screenshot API charge by itself, though it does use the machine and infrastructure where it runs; hosting, storage, and bandwidth costs depend on that setup.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. A single request can return a screenshot as PNG, JPEG, or WebP, or a PDF. Its capture flow accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before the shot; each step can be turned off. Only clean shots are billed: bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response includes X-Page-Verdict and X-Billed headers. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. Plans include 1,000 screenshots per month free with no card, then paid options from $5 for 3,000. Every feature is on every plan.

Use the ScreenshotNeo API documentation for parameters and setup. This cURL example saves a WebP capture:

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

Python:

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()
open("shot.webp", "wb").write(r.content)

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}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await import('node:fs/promises').then(({ writeFile }) => writeFile('shot.webp', Buffer.from(await res.arrayBuffer())));

Replace the example target URL with the Marathi project URL. ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed; its MCP server lets AI agents take screenshots; and 1,000 screenshots a month are free with no card, with paid plans starting at $5 for 3,000. Learn about ScreenshotNeo or sign up for 1,000 free screenshots a month with no card.

FAQ

Should every portfolio thumbnail show the whole website?

No. A thumbnail should communicate the project at card size. Use a full-page image when the complete layout matters, and a focused crop when the first impression is more useful.

Is there one best image format for Marathi text?

No universal choice follows from the browser screenshot options. Use a format accepted by your portfolio platform, then inspect the resized image for sharp text and manageable file size.

Does Google Fonts confirm that a specific font supports Marathi?

The general setup guidance explains how to load fonts, not whether every family covers Marathi. Check the current family metadata and verify the actual rendered page.

What should accompany the thumbnail?

For context, include the project name, your role, and a link to the live project or case study when available.