Free Website Screenshot Generator

Puppeteer (Node.js)

1. Install: npm install puppeteer.
2. Launch browser: const browser = await puppeteer.launch(); const page = await browser.newPage().
3. Navigate and capture: await page.goto("https://example.com"); await page.screenshot({ path: "shot.png", fullPage: true });.
4. Close browser: await browser.close(). Wrap in try/finally for resource cleanup.

Playwright (cross-browser)

1. Install: npm install playwright.
2. Launch any browser: const browser = await chromium.launch(); (or webkit, firefox).
3. Capture with page.screenshot({ path, fullPage: true }) — same API as Puppeteer.
4. Use page.setViewportSize() for mobile/desktop variants. Built-in retry logic via test runner.

Urlbox API

1. Sign up at urlbox.com and grab your API key.
2. Make a GET request: https://api.urlbox.com/v1/{API_KEY}/png?url=https://example.com&full_page=true.
3. Pass options as query parameters: width, height, delay, full_page, retina.
4. Returns image binary directly. Cache responses for 24 hours via Urlbox CDN.

Bannerbear API

1. Sign up at bannerbear.com and create an account.
2. Use the URL-to-screenshot endpoint: POST /v2/screenshots with body { url, css, full_page }.
3. Bannerbear focuses on template-based image generation; screenshots are one feature.
4. Returns a URL to the generated image, valid for 30 days.

Vercel @vercel/og (for OG images)

1. Install: npm install @vercel/og.
2. Create an Edge function or Next.js API route that returns ImageResponse with custom JSX.
3. Vercel renders the JSX to an image at the edge in 100-300ms.
4. Reference the URL as your og:image meta tag for dynamic per-page OG images.

Screenshot returns blank or skeleton-only image

Cause: Page uses client-side JS rendering and capture happened before scripts completed.

Fix: Increase wait time to 5-10 seconds or use waitUntil: "networkidle". Test with longer delays for SPA frameworks.

Lazy-loaded images missing from full-page capture

Cause: Images use Intersection Observer to load as user scrolls; headless browser does not scroll automatically.

Fix: Programmatically scroll the page from top to bottom before capture. Most APIs support fullPage: true with autoscroll.

Cookie banner overlays the content

Cause: GDPR consent banner displays on first visit and blocks the page.

Fix: Inject CSS to hide banner selectors, or click the Accept button programmatically before capture.

Screenshot shows old cached content

Cause: Browser or CDN cache returned stale version after recent site update.

Fix: Pass cache-busting query parameter (?nocache=timestamp). Some APIs support disable_cache option.

Resolution looks blurry on retina displays

Cause: Default deviceScaleFactor of 1 produces low-DPI image; retina screens expect 2x or 3x density.

Fix: Set deviceScaleFactor: 2 in screenshot config. File size doubles but image is crisp.

Capture fails on URL with HTTP basic auth

Cause: Browser does not have credentials and stops at the auth prompt.

Fix: Embed credentials in URL as https://user:pass@example.com or pass via Authorization header.

Page loads in development but fails in capture

Cause: Headless browser blocked by anti-bot protections (Cloudflare, hCaptcha) or site detects user-agent.

Fix: Set custom user-agent matching real Chrome. For aggressive anti-bot sites, use a residential proxy or whitelist headless.

Full-page screenshot truncated at fixed height

Cause: API has a max height limit (often 30000px) to prevent memory exhaustion.

Fix: Capture in sections via pageYOffset increments, then stitch images. For practical use, accept truncation or capture multiple regions.