How to create website screenshot thumbnails in n8n

To create a website screenshot thumbnail in n8n, connect a trigger to an HTTP Request node that calls a browser screenshot API, then send the returned image to a storage or publishing node. A browser service does the rendering; a plain HTTP fetch from n8n does not render a full webpage. This walkthrough uses Browserless’s documented screenshot endpoint and preserves the response as binary image data.

1. Choose the workflow shape

For a first workflow, use a Manual Trigger → HTTP Request → destination. Once the capture works, replace the manual trigger with a schedule, webhook, or content event. The HTTP Request route is a straightforward documented integration with direct control over the request. Browserless also publishes a community n8n node, which may be convenient if it supports your n8n version; check its compatibility and maintenance before relying on it. For browser interactions or custom browser-side logic, BrowserQL or the Function API may fit better than a simple screenshot request.

Browserless’s [n8n integration guide](https://docs.browserless.io/ai-integrations/n8n) describes the HTTP Request setup, including image-buffer and base64 response handling. Its [Screenshot API reference](https://docs.browserless.io/rest-apis/screenshot-api) documents URL and inline HTML input, authentication, and screenshot options.

2. Configure the n8n HTTP Request node

Add a Manual Trigger.
Add an HTTP Request node after it.
Set Method to POST.
Set the URL to https://production-sfo.browserless.io/screenshot. Browserless documents regional endpoints including SFO, London, and Amsterdam; choose the region closest to your workflow where appropriate.
Add a query parameter named token and enter your Browserless API token through n8n credentials or protected environment configuration. Avoid putting the token in a workflow template or a URL that may be exposed in logs.
Set the request body type to JSON and use a body like the following:

{
  "url": "https://example.com",
  "options": {
    "type": "webp",
    "fullPage": false
  }
}

Replace https://example.com with the page to capture. The API returns PNG by default; its options support JPEG and WebP as well. Use fullPage: true when the thumbnail should include the entire document rather than the visible viewport. Browserless follows Puppeteer-style screenshot options; consult the [API reference](https://docs.browserless.io/rest-apis/screenshot-api) for the available request settings.

To submit inline HTML instead of a URL, provide the HTML input supported by the API and omit url from that request. Do not send both URL and HTML in the same request.

3. Keep the image as binary data

In the HTTP Request node, configure the response to be returned as a file/binary response (the exact control label can vary across n8n versions). Set the binary property name, for example thumbnail, and use that property in the next node. This is the right path when the next step saves, uploads, or forwards an image file.

If the following step specifically requires JSON, configure the request to return the base64-encoded image format described in Browserless’s n8n guide, then pass that encoded string to the JSON consumer. Base64 adds encoding overhead and is easier to mishandle than binary data for ordinary file handoffs.

4. Save or forward the thumbnail

Connect a destination node that accepts the binary property. Depending on the workflow, that can be a file-writing node, an object-storage upload, or an API that accepts multipart file data. Preserve the image’s extension or content type: use .webp for WebP, .jpg for JPEG, and .png for PNG. If you need a stable filename, derive it from the source record or URL, and sanitize path separators and query characters before using it as a filename.

For workflows that create many or large images, account for n8n’s binary-data storage and retention. n8n documents S3-backed external binary storage for eligible self-hosted Enterprise deployments; configure an S3 lifecycle policy if old files should be removed. See [n8n’s external binary storage documentation](https://docs.n8n.io/hosting/scaling/external-storage/).

5. Make captures reliable

Wait for the page to be ready. Pages that render content dynamically can produce blank or incomplete captures if the screenshot happens too early. Use an appropriate wait option for the page or endpoint, such as waiting for a known selector, a delay, or network idle when available. Browserless’s [screenshot guidance](https://docs.browserless.io/browserql/use-cases/screenshots) advises waiting for elements to load before capturing.
Choose the wait condition deliberately. A fixed delay is easy to understand but can waste time on fast pages and still be too short on slow pages. Waiting for a page-specific selector is often more meaningful when the thumbnail depends on a known element.
Set a longer HTTP timeout for slow pages. The n8n integration guide recommends adjusting timeout and retry behavior for slow pages. Set a timeout that allows the browser request to finish, then use limited retries for transient failures.
Keep credentials private. Put the API token in n8n Credentials or protected environment configuration, not in a publicly shared workflow export.
Use a nearby region. Browserless documents SFO, London, and Amsterdam endpoints; choosing a region closer to the n8n instance can reduce network latency.

6. Tune the thumbnail for its destination

Choice	Use it when	Trade-off
Viewport screenshot	The destination needs a compact preview of the page’s first screen.	Content below the fold is excluded.
Full-page screenshot	The entire page must be represented in one image.	Long pages create taller, larger files and may take longer to render.
PNG	You need the API’s default image format or prefer lossless output.	File size can be larger than a compressed alternative.
JPEG	The destination expects a broadly supported compressed photo-style image.	It is a lossy format.
WebP	The destination accepts WebP and smaller compressed image files are useful.	Confirm the destination supports WebP.
Binary response	You are saving or uploading an image file.	Downstream nodes must reference the binary property.
Base64 response	A downstream step requires JSON text.	Encoding expands data and needs correct decoding before file use.

Browserless’s [official example](https://docs.browserless.io/examples/screenshot) shows writing raw response bytes directly to an image file. The n8n integration guide covers both binary-buffer and base64 approaches.

7. Troubleshoot common problems

Symptom	Likely cause	Fix
Authentication failure	The token is missing, invalid, or was not sent as the `token` query parameter.	Check the credential value and query parameter name. Keep the token in n8n credentials or a protected environment value.
The node returns JSON or text instead of an image file	The HTTP Request response mode is not configured for binary/file data, or the request asked for base64.	For file handoff, switch to binary response handling and reference the configured binary property. For JSON workflows, decode base64 in the appropriate downstream step.
The image is blank or missing page content	The capture ran before scripts or dynamic elements finished rendering.	Wait for the relevant selector, an appropriate page condition, or a carefully chosen delay. See the [Browserless screenshot guidance](https://docs.browserless.io/browserql/use-cases/screenshots).
The request times out	The target page is slow, or the timeout is shorter than the page’s load and capture time.	Increase the HTTP timeout, use a suitable wait condition, and add bounded retries for transient failures.
Downstream upload cannot find the image	The upload node expects a different binary property name or a file field.	Match the destination’s binary field to the property configured on the HTTP Request node.
Workflow storage grows quickly	Many or large image binaries are retained.	Review n8n binary-data retention and storage settings. Eligible self-hosted Enterprise deployments can use documented S3 external storage with a lifecycle policy.
Inline HTML request fails	The request includes both a URL and HTML input, or uses an unsupported body shape.	Send one input mode at a time and match the documented Screenshot API request format.

8. Performance, reliability, and cost considerations

Capture time depends on the target page, its dynamic content, the selected wait condition, and the browser service region. Full-page screenshots and unnecessarily long waits can increase time and image size. Use a viewport capture when the destination only needs a thumbnail, request a compressed format the destination supports, and wait for the content the image actually needs.

For reliability, keep credentials out of exported templates, use a timeout appropriate for browser rendering, and retry only transient errors with a bounded retry policy. A successful HTTP response should still be checked as image data before the workflow publishes it; otherwise an error payload could be mistaken for a thumbnail.

The research sources establish that Browserless requires an API token, but they do not establish current pricing, quotas, or capture costs. Check the provider’s current account and plan details before estimating workflow cost. In n8n, also consider binary storage capacity and retention when the workflow creates many or large files.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. A single GET request captures a URL as PNG, JPEG, WebP, or PDF. See the ScreenshotNeo API documentation.

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

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

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

Cookie banners are accepted and removed before the shot, along with known newsletter popups and chat widgets. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed; response headers identify the page verdict and billing status. An MCP server lets AI agents use the take_screenshot, get_page_info, and capture_pdf tools. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

FAQ

Can n8n take the screenshot without a browser service?

The documented pattern uses an external browser screenshot service. A plain HTTP fetch retrieves a response; it does not render the full page like a browser.

Should I use a community node or HTTP Request?

Use HTTP Request for the documented general-purpose setup and direct request control. Consider the community node if its current compatibility and maintenance meet your needs.

Can I use the screenshot in a later JSON API call?

Yes. Request base64 when the downstream step needs JSON, or keep the response as binary and upload it as a file when the destination supports binary data.

Can I make a thumbnail from HTML I generate in the workflow?

The Browserless Screenshot API supports inline HTML input. Send the HTML request mode without also including a URL.