How to Capture and Edit Website Screenshots with URL2PNG

URL2PNG captures a webpage through an API request, while editing the resulting image—such as cropping, resizing, or adding a border—is a separate step. Configure the capture first with viewport, full-page, CSS, and readiness options; then transform the image if the destination needs it. URL2PNG describes itself as a service for capturing website snapshots inside applications and workflows. See its official site and current quickstart and API documentation for exact request signing and parameter syntax.

1. Decide what the screenshot should contain

Before constructing a request, choose the result you need:

• Viewport capture: captures the browser area at the selected viewport dimensions. This is the documented default mode.
• Full-page capture: URL2PNG documents fullpage=true as an attempt to capture the entire document canvas. Treat it as an attempt, not a guarantee: long pages, lazy content, or unusual layouts can affect the result.
• Thumbnail: set thumbnail_max_width when the output should fit a constrained display width.

Also identify whether the page needs a particular language, user agent, injected CSS, or extra time to render. Add only the controls that address a real requirement; each can change the page or timing represented in the screenshot.

2. Build a signed URL2PNG request

URL2PNG’s quickstart describes a request using an API key, a security token generated from the request parameters and a secret, and the target page URL. Use the current official quickstart for the precise signing algorithm, parameter encoding, and language-specific examples. The signing details matter: do not expose the secret in browser-side code or send an unsigned request if the API expects a signed token.

After creating the signed request according to the docs, send it from a server-side application and save the returned image bytes. Keep credentials in environment variables or a secrets manager, and avoid logging full signed URLs if they contain credentials or tokens.

Request and output checklist

1. Choose the target URL and desired viewport.
2. Set full-page or thumbnail behavior if needed.
3. Add readiness, delay, CSS, language, or user-agent overrides only when needed.
4. Generate the API token exactly as the official quickstart specifies.
5. Request the capture from server-side code and check the response before treating it as an image.
6. Store or transform the image after capture if the destination requires different dimensions or composition.

3. Configure capture options

Need	URL2PNG setting	Practical guidance
Control visible browser area	Viewport dimensions	The documentation lists 1480x1037 as the default. Set dimensions to match the target layout or destination instead of relying on that default.
Capture beyond the first screen	fullpage=true	Attempts to capture the whole document canvas. Check the result on pages with long content or lazy-loaded sections.
Limit output width	thumbnail_max_width	Use this for a narrower screenshot output. If you need a specific crop or composition, post-process the image too.
Refresh a cached result	unique	Use a varying value when you need URL2PNG to generate a fresh screenshot. The docs describe a 30-day default cache TTL.
Change page styling before capture	Custom CSS URL	Inject CSS to hide or restyle page elements in the rendered page. This affects the capture process; it is not an edit to the saved image.
Wait for a page element	say_cheese	Use the documented element-readiness option when the page needs a particular element to exist before capture.
Allow delayed content to appear	Additional delay	The docs describe an extra delay after document readiness and asset loading. Use it for delayed rendering that element readiness alone does not cover.
Represent another locale or client	Language and user-agent overrides	Set these only when the target page should render for a different language or client identity. They may change page content.

URL2PNG’s feature list also advertises graph, canvas, webfont, CSS3, SVG, and video rendering support. These are vendor-stated capabilities, not independent compatibility findings; verify the actual output for pages important to your workflow.

4. Capture from an application safely

Use the official quickstart’s code for your language to generate the signed request. A safe integration has three parts: construct and sign the parameters on a trusted server, request the capture, then validate the response and store or return the image. Keep the secret out of client-side JavaScript. Check status and content type before saving bytes, and handle timeouts and non-image responses explicitly.

The exact signing and encoding syntax can change, so copy the current official example rather than adapting an old snippet. For an application, also set a sensible request timeout, retry only transient failures, and avoid retrying invalid credentials or malformed parameters unchanged.

5. Edit the image after capture

First ask whether the change belongs in the browser render or in the image file:

• Use viewport size, full-page mode, CSS injection, readiness, or delay when changing what the page renders into the screenshot.
• Use image transformations after capture for crop, resize, borders, shadows, overlays, and compositing.

Cloudinary documents an optional URL2PNG add-on workflow that creates a screenshot and then applies image transformations, including crop and resize examples. Its documentation says add-on URLs are normally signed or eagerly generated unless an account setting is changed. This is an adjacent workflow, not a prerequisite for URL2PNG. See Cloudinary’s URL2PNG documentation for its current setup and transformation syntax.

A practical edit sequence

1. Capture at a viewport appropriate to the page layout.
2. Choose full-page mode only if the output needs content below the initial viewport.
3. Use capture-time CSS to remove or alter rendered page elements when that is the desired result.
4. Crop to the focal area and resize to the display dimensions after capture.
5. Add borders, shadows, or overlays only if the destination design calls for them.
6. Keep the original capture when later edits may need a different crop or size.

6. Cache freshness, performance, and cost

URL2PNG’s documentation describes a 30-day default cache TTL, and its plans page says cached screenshots do not count against a plan while freshly generated screenshots count as renders. A changing unique value is the documented way to force a fresh screenshot. These are service terms and settings, not performance guarantees; check the current plans page before estimating usage or cost.

For efficiency, reuse cached captures when the page has not changed and freshness is not required. Avoid adding long delays globally; use element readiness or a delay only for pages that need them. For workflows with frequent captures, track whether each request is expected to be fresh or cacheable, and monitor actual usage against the current plan.

7. Troubleshooting

Symptom	Likely cause	What to try
Authentication or token error	Wrong secret, signing input, parameter encoding, or stale sample syntax.	Rebuild the request from the current official quickstart. Check parameter ordering and encoding as specified, and keep the secret server-side.
Screenshot shows the wrong layout	Viewport dimensions trigger a different responsive breakpoint.	Set the viewport to the intended browser size and capture again.
Content is missing	It loads after the capture point, appears only after scrolling, or depends on page scripts.	Use the documented readiness option or an additional delay; for long pages, try full-page mode and inspect the result.
Full-page image is incomplete	Full-page capture is an attempt and page behavior may prevent a complete document capture.	Check whether lazy content needs more time, use a suitable readiness condition, and consider multiple viewport captures if the workflow requires controlled sections.
Old page version appears	A cached capture is being served.	Use a varying unique value to request freshness, and account for the plan’s render rules.
Injected CSS has no effect	The CSS URL or rules do not load or do not match the rendered DOM.	Check the CSS URL and selectors, then verify the intended page state independently. Remember this changes the rendered page, not the file afterward.
Output is the wrong size	Viewport and thumbnail width control capture dimensions differently from a post-capture crop.	Set viewport and thumbnail_max_width appropriately, then apply an image crop or resize for exact destination dimensions.
Saved file is corrupt or not an image	The application saved an error response as image bytes.	Check HTTP status and response type before writing the file; surface the response error and retry only if transient.

8. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request with a URL returns PNG, JPEG, WebP, or PDF. Its clean-shot flow accepts cookie and consent banners like a visitor and removes 60+ known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. Every plan includes every feature; 1,000 screenshots per month are free with no card, and paid plans start at $5 for 3,000.

See the ScreenshotNeo API docs. Example cURL request:

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)
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}`);

Start with 1,000 free screenshots a month, with no card.

FAQ

Does URL2PNG edit the screenshot image?

URL2PNG controls webpage capture. Crop, resize, borders, shadows, and overlays are image transformations applied after capture, for example through an optional Cloudinary workflow.

Can I capture a whole webpage?

The documented fullpage=true option attempts to capture the entire document canvas. Inspect the output for pages with lazy-loaded or unusually structured content.

How do I make sure the screenshot is current?

The docs describe a 30-day default cache TTL. Use a varying unique value when a fresh render is needed, and review current plan terms for billing treatment.

Can I use a screenshot in a public webpage?

URL2PNG is designed for embedding captures in applications, websites, and business processes. Follow its current quickstart for secure request construction and credential handling.