Full-Page Screenshots: Capture Entire Web Pages via API

Most screenshot tools capture only the visible viewport -- the portion of the page you see without scrolling. That works for thumbnails and previews, but it misses everything below the fold. The Apixies Screenshot API supports a full-page mode that renders the entire scrollable document as a single tall image, from the top of the page to the very bottom.

How Full-Page Mode Works

When you set full_page=true, the API instructs the underlying Chromium browser to measure the total height of the document after rendering, then captures the entire content area as one continuous image. The width parameter still controls the viewport width, but height is effectively ignored -- the output image will be as tall as the page requires.

curl -H "X-API-Key: YOUR_API_KEY" \
  "https://apixies.io/api/v1/screenshot?url=https://example.com&full_page=true" \
  -o full-page.png

The result is a single PNG (or JPEG) file that contains every section of the page. For a typical blog post, this might produce an image that is 1280 pixels wide and 4000-8000 pixels tall.

See the Screenshot API documentation for the complete parameter reference.

Full-Page vs. Viewport: When to Use Each

Understanding when full-page mode is the right choice will save you bandwidth and storage.

Use Viewport Mode When...

• You need a thumbnail or link preview at a fixed size (e.g., 1200x630 for OG images).
• You only care about the above-the-fold content -- the hero section, navigation, and primary headline.
• You are generating images for social sharing cards where dimensions must be exact.
• File size matters and you want small, consistent images.

Use Full-Page Mode When...

• You need to archive or document an entire page for compliance, legal, or record-keeping purposes.
• You are running visual regression tests in CI and want to catch layout issues anywhere on the page, not just the top.
• You are creating design review artifacts for stakeholders who need to see the complete page layout.
• You need to compare page versions side by side to identify what changed between deployments.
• You are building a site audit tool that scans pages for broken layouts, misaligned elements, or missing sections.

Step-by-Step: Capturing a Full-Page Screenshot

1. Basic Full-Page Capture

The simplest call adds full_page=true to the standard endpoint:

curl -H "X-API-Key: YOUR_API_KEY" \
  "https://apixies.io/api/v1/screenshot?url=https://example.com&full_page=true&width=1280" \
  -o full-page.png

This renders the page at 1280 pixels wide and captures the entire document height. The resulting image contains everything from the top navigation to the footer.

2. Full-Page at Mobile Width

Testing responsive layouts? Capture the full page at a mobile viewport width to verify that every section stacks correctly on small screens:

curl -H "X-API-Key: YOUR_API_KEY" \
  "https://apixies.io/api/v1/screenshot?url=https://example.com&full_page=true&width=375" \
  -o full-page-mobile.png

Mobile full-page screenshots tend to be extremely tall because content that sits side by side on desktop stacks vertically on narrow screens. This is exactly what you want for visual QA.

3. Full-Page in JPEG Format

Full-page images can be large in PNG format. If pixel-perfect fidelity is not critical, switch to JPEG to reduce file size significantly:

curl -H "X-API-Key: YOUR_API_KEY" \
  "https://apixies.io/api/v1/screenshot?url=https://example.com&full_page=true&format=jpeg" \
  -o full-page.jpg

For a page that produces a 3 MB PNG, the JPEG version might be 400-600 KB -- a substantial saving when you are capturing dozens or hundreds of pages.

Code Examples

Node.js: Capture and Save a Full-Page Screenshot

const fs = require("fs");

async function captureFullPage(url, outputPath) {
  const params = new URLSearchParams({
    url,
    full_page: "true",
    width: "1280",
    format: "png",
  });

  const response = await fetch(
    `https://apixies.io/api/v1/screenshot?${params}`,
    { headers: { "X-API-Key": process.env.APIXIES_KEY } }
  );

  if (!response.ok) {
    throw new Error(`Full-page capture failed: ${response.status}`);
  }

  const buffer = Buffer.from(await response.arrayBuffer());
  fs.writeFileSync(outputPath, buffer);
  console.log(`Saved full-page screenshot to ${outputPath}`);
}

captureFullPage("https://example.com", "full-page.png");

Python: Batch Capture Multiple Pages

This script captures full-page screenshots for a list of URLs -- useful for site audits or visual regression baselines:

import requests
import os

api_key = os.environ["APIXIES_KEY"]
urls = [
    "https://example.com",
    "https://example.com/about",
    "https://example.com/pricing",
]

for url in urls:
    response = requests.get(
        "https://apixies.io/api/v1/screenshot",
        params={"url": url, "full_page": "true", "width": 1280, "format": "png"},
        headers={"X-API-Key": api_key},
    )
    response.raise_for_status()

    slug = url.rstrip("/").split("/")[-1] or "home"
    filename = f"full-page-{slug}.png"

    with open(filename, "wb") as f:
        f.write(response.content)

    print(f"Saved {filename}")

PHP: Full-Page Capture with Error Handling

function captureFullPage(string $url, string $outputPath): bool
{
    $query = http_build_query([
        'url'       => $url,
        'full_page' => 'true',
        'width'     => 1280,
        'format'    => 'png',
    ]);

    $ch = curl_init("https://apixies.io/api/v1/screenshot?{$query}");
    curl_setopt($ch, CURLOPT_HTTPHEADER, ['X-API-Key: ' . getenv('APIXIES_KEY')]);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    $image = curl_exec($ch);
    $status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    if ($status !== 200) {
        error_log("Full-page screenshot failed for {$url}: HTTP {$status}");
        return false;
    }

    file_put_contents($outputPath, $image);
    return true;
}

captureFullPage('https://example.com', 'full-page.png');

Practical Applications

Visual Regression Testing in CI

Full-page screenshots are invaluable in continuous integration pipelines. Capture a baseline screenshot of each key page on your staging environment, then compare new screenshots after every deploy. Differences in layout, spacing, or missing elements become immediately visible.

A typical workflow: deploy to staging, capture full-page screenshots of critical pages, then compare each against a stored baseline using an image diffing tool (pixelmatch, resemble.js, or similar). Fail the build if the pixel difference exceeds a threshold. The free tier gives you 75 requests/day with a free account, which comfortably covers a test suite of 20-30 pages.

Page Archival and Compliance

Industries like finance, healthcare, and legal often require a visual record of web content at a specific point in time. A full-page screenshot captures exactly what a visitor would see, including dynamic content and disclaimers that a simple HTML archive might miss. Store the screenshots with a timestamp and URL in your document management system.

Design Review and Stakeholder Sign-Off

Share a full-page screenshot with stakeholders who do not have access to staging environments. A single tall image is easier to annotate and review than a live URL that might change before everyone has seen it.

Tips for Working with Full-Page Screenshots

1. Prefer JPEG for large pages. Full-page PNGs of content-rich pages can be several megabytes. JPEG reduces that dramatically while remaining perfectly readable.
2. Set the viewport width explicitly. The width parameter controls how the page reflows. Use 1280 for desktop or 375 for mobile. The height parameter is ignored in full-page mode.
3. Be mindful of infinite scroll. Pages that load content dynamically as the user scrolls may only render the initial batch. The API captures what is present in the DOM after initial page load.
4. URL-encode your target URL. Special characters in query strings can break the request. Always encode the url parameter value.
5. Use batch scripts for site audits. Combine a list of URLs with a simple loop to capture your entire site in one run.

Next Steps

Full-page mode turns the Screenshot API into a versatile tool for QA, archival, and design workflows.

• Screenshot API documentation -- complete parameter reference and error codes.
• Website screenshot tutorial -- the general-purpose getting-started guide.
• Build link previews -- generate OG images and social sharing thumbnails.
• All guides -- explore every available tutorial and use case.

Get your free API key and start capturing full-page screenshots today.