How to create website preview thumbnails for Indian ecommerce product pages with ScreenshotOne

To create a website preview thumbnail for an Indian ecommerce product page with ScreenshotOne, send the product page URL to its screenshot API, choose a viewport that produces the layout you want to represent, select a capture scope and output format, and bound the final image with image_width and/or image_height. For a compact card, start with the first viewport; use full-page capture only when the thumbnail needs to include content below the fold.

The same workflow applies to Indian storefronts generally. There is no special India-only capture setting in the cited documentation. Test the target page at the desktop or mobile viewport relevant to your preview, since the width can change the page layout.

1. Get an API key and make a first capture

Create a ScreenshotOne account and use its Screenshot API. The examples below request a 1440 by 1024 browser viewport, capture the first screen, wait three seconds for rendering, and save a PNG. This follows the illustrative settings in ScreenshotOne’s ecommerce screenshot guide; it is a starting point, not a universal setting for every page. See the ScreenshotOne options reference for the current parameter names and supported values.

cURL

curl -G 'https://api.screenshotone.com/take' \
  --data-urlencode 'access_key=YOUR_SCREENSHOTONE_ACCESS_KEY' \
  --data-urlencode 'url=https://example.in/products/example-product' \
  --data-urlencode 'viewport_width=1440' \
  --data-urlencode 'viewport_height=1024' \
  --data-urlencode 'format=png' \
  --data-urlencode 'delay=3' \
  --data-urlencode 'image_width=480' \
  --data-urlencode 'image_height=320' \
  --output product-preview.png

Python

import requests

params = {
    "access_key": "YOUR_SCREENSHOTONE_ACCESS_KEY",
    "url": "https://example.in/products/example-product",
    "viewport_width": 1440,
    "viewport_height": 1024,
    "format": "png",
    "delay": 3,
    "image_width": 480,
    "image_height": 320,
}
response = requests.get("https://api.screenshotone.com/take", params=params, timeout=90)
response.raise_for_status()
with open("product-preview.png", "wb") as image_file:
    image_file.write(response.content)

Node.js

const params = new URLSearchParams({
  access_key: 'YOUR_SCREENSHOTONE_ACCESS_KEY',
  url: 'https://example.in/products/example-product',
  viewport_width: '1440',
  viewport_height: '1024',
  format: 'png',
  delay: '3',
  image_width: '480',
  image_height: '320'
});

const response = await fetch(`https://api.screenshotone.com/take?${params}`);
if (!response.ok) {
  throw new Error(`Screenshot request failed: ${response.status} ${await response.text()}`);
}
const image = Buffer.from(await response.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('product-preview.png', image));

Keep the access key on the server or in a secret store. A browser-based application that exposes the key in client-side code lets visitors copy it. ScreenshotOne’s API base and option details are documented in its options guide.

2. Choose the viewport and capture scope

The viewport determines the browser layout before the image is resized. ScreenshotOne documents a default viewport of 1280 by 1024 pixels. Set dimensions explicitly when you need repeatable output, and generate separate desktop and mobile variants if your preview feature needs to show both responsive layouts.

Choice	Use it when	Tradeoff
First viewport	A preview card should show the navigation, promotion or hero, and initial product presentation.	Fast and compact, but lower page content is absent.
Full page	The preview needs product details or sections below the first screen.	More page content takes longer to capture and can introduce stitching or consistency issues.
Device emulation	You want a specific device-like viewport and associated emulation settings.	This emulates a device; it is not a capture from a physical phone.

For a first-screen preview, omit full_page. To capture the full page, set full_page=true. ScreenshotOne documents that this enables scrolling by default to help trigger lazy-loaded content. Its ecommerce guide recommends the by_sections full-page algorithm for storefronts, where scrolling and capturing sections can work better with lazy-loaded content. Verify the result: sticky headers can repeat, galleries or animations can change between sections, and some sites need adjusted scrolling behavior. See the full-page screenshot guide.

3. Set thumbnail dimensions and format

Use image_width, image_height, or both to set output bounds. ScreenshotOne says resizing preserves aspect ratio and makes the result as large as possible within the requested bounds; it does not stretch the image to fill both dimensions. For instance, a tall mobile page resized within a 480 by 320 box remains tall and may have a width below 480 pixels.

The documented default format is JPG. The options reference lists PNG, JPEG/JPG, WebP, GIF, JP2, TIFF, AVIF, HEIF, PDF, HTML, and Markdown. Choose based on the consuming application’s requirements for transparency, compatibility, and storage. The documentation does not specify a universally best format or thumbnail size for storefront previews.

• Set a consistent output bound for cards in the same feed.
• Use the same viewport and capture scope when you need comparable previews.
• Keep the original screenshot separately if you may need to generate other sizes later.

4. Make the capture more reliable

Product pages can render content progressively. The ecommerce guide’s example uses delay=3 and reduced motion, and includes options to suppress ads, trackers, cookie banners, chat widgets, and heuristic banners. Adapt those settings to the target and the intended preview: a short delay may help deferred content appear, while suppression can produce a cleaner image when overlays obscure the product.

For full-page shots, allow scrolling to reveal lazy-loaded images. If images remain missing, tune the delay, viewport height, and full-page scrolling gradually and inspect the output. Delays and full-page scrolling increase capture time. Avoid assuming one wait value or suppression setting works for every Indian ecommerce site; the dossier contains no site-specific testing or benchmark.

Ensure you have the right to capture the target pages and follow applicable website terms and local laws. ScreenshotOne includes this caution in its ecommerce screenshot guide.

5. Process a collection of product URLs

1. Normalize and validate each product URL before submission.
2. Choose one desktop or mobile viewport profile for the batch, then capture the other profile separately if needed.
3. Request the selected scope, format, and image bounds for each URL.
4. Check the response status before saving bytes as an image. Store failures separately from image files.
5. Use a bounded worker pool rather than firing an unbounded number of simultaneous requests; retry transient failures with a limit and backoff.
6. Record the source URL and capture settings alongside each generated file so you can reproduce a preview.

These are application-side workflow recommendations, not claims about ScreenshotOne rate limits or throughput. Consult the current API documentation for service limits and error behavior before choosing concurrency.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. One GET request with a URL returns an image or PDF. Its consent handling accepts cookie banners like a visitor 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 cost nothing, and the response identifies the page verdict and billing status in headers. AI agents can use its MCP server tools, including take_screenshot, get_page_info, and capture_pdf.

For an Indian product page, replace the URL below with the page you are authorized to capture. See the ScreenshotNeo API documentation for options, including viewport and output controls.

cURL

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

Python

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.in/products/example-product"}, 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://example.in/products/example-product' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status} ${await res.text()}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

ScreenshotNeo’s free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month, with no card.

Common problems and fixes

Symptom	Likely cause	What to try
Screenshot shows a mobile menu or narrow layout unexpectedly	The viewport width crossed the site’s responsive breakpoint.	Set the intended viewport dimensions explicitly; capture separate desktop and mobile variants if both matter.
Product images are missing in a full-page capture	Images load lazily as the page scrolls, or need more time.	Use full-page scrolling, consider the documented section algorithm, then adjust delay or viewport height incrementally.
Cookie consent, chat, or a promotion covers the product	The page displays overlays during capture.	Use the relevant documented suppression options when appropriate, and inspect the result against the intended use.
Output does not fill the requested width and height	The requested dimensions are maximum bounds and aspect ratio is preserved.	Choose bounds with a compatible aspect ratio or crop downstream if your card requires fixed dimensions.
Repeated headers or changing content appear in a tall screenshot	Sticky elements, animations, or galleries changed while sections were captured.	Prefer first-viewport capture for compact previews, reduce motion where supported, and tune full-page behavior.
Request fails or saved file is not a usable image	Invalid key or URL, service error, or an error response was saved as binary data.	Check HTTP status before writing the body; verify credentials and URL, and inspect the error response.

Performance, reliability, and cost

First-viewport capture generally requires less work than a full-page capture, while waits, scrolling, and larger pages add time. Pick the smallest viewport and scope that answer the preview’s purpose. Use a finite request timeout and bounded concurrency in batch jobs. Retry only transient failures, with a retry cap and backoff, so a problematic page does not hold up an entire collection.

The supplied ScreenshotOne documentation gives configuration examples and options but no benchmark, latency guarantee, or price details for this article. Check ScreenshotOne’s current service information for pricing and limits before estimating a production batch. Preview cost depends on the chosen service plan and your capture volume; do not infer performance from the example’s three-second delay.

FAQ

Does the workflow require a camera or scanner?

No. The documented method uses browser rendering through a screenshot API.

Should every product thumbnail be full-page?

No. First-screen capture is a practical default for compact previews. Use a full-page image when below-the-fold content is part of what the preview must communicate.

Does device emulation reproduce an actual phone?

No. ScreenshotOne’s device option emulates a device’s viewport and settings; it does not capture from a physical device.

Is there a recommended pixel size for Indian ecommerce cards?

The cited sources do not define one. Set dimensions to match the requirements of the site, feed, or application that will display the thumbnail.