Allscreenshots Docs
Guides

Capturing full page screenshots

Master full page captures for documentation, archival, and visual testing

Capturing full page screenshots

Learn how to capture complete web pages, from simple blog posts to complex landing pages with sticky headers and dynamic content.

Use cases

  • Documentation: Archive complete pages for reference
  • Legal compliance: Full page evidence for disputes or audits
  • Marketing: Capture competitor landing pages
  • Design review: Share full page mockups with stakeholders
  • Visual testing: Compare entire page layouts across releases

Quick start

Capture a full page with a single API call:

curl -X POST 'https://api.allscreenshots.com/v1/screenshots' \
  -H 'X-API-Key: YOUR_API_KEY' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com",
    "fullPage": true
  }' --output full-page.png

Understanding capture modes

AllScreenshots offers two capture modes, each optimized for different scenarios.

When to use stitch mode (default)

Use stitch mode for most websites, especially those with:

  • Fixed navigation bars that stay visible while scrolling
  • Sticky headers or footers like cookie banners
  • Lazy-loaded content that appears as you scroll
  • Scroll-triggered animations that need to complete before capture
{
  "url": "https://example.com",
  "fullPage": true,
  "fullPageMode": "stitch"
}

When to use native mode

Use native mode when you need:

  • Maximum speed and can accept quality trade-offs
  • Simple pages without fixed elements
  • Server-rendered content that doesn't rely on scroll events
{
  "url": "https://example.com",
  "fullPage": true,
  "fullPageMode": "native"
}

Step-by-step tutorials

Capture a landing page with sticky header

Most marketing sites have fixed navigation. Here's how to capture them properly:

const response = await fetch('https://api.allscreenshots.com/v1/screenshots', {
  method: 'POST',
  headers: {
    'X-API-Key': process.env.ALLSCREENSHOTS_API_KEY,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    url: 'https://stripe.com',
    fullPage: true,
    fullPageMode: 'stitch',
    freezeFixed: true,
    waitUntil: 'networkidle',
    delay: 1000,
  }),
});

const imageBlob = await response.blob();

What happens:

  1. Page loads and waits for network activity to stop
  2. Additional 1 second delay for animations to settle
  3. Scrolls through the entire page to trigger lazy content
  4. Detects the sticky header
  5. Captures each section while hiding the header
  6. Stitches sections together
  7. Places header at the top of the final image

Capture a page with lazy-loaded images

E-commerce sites often load product images as you scroll:

const response = await fetch('https://api.allscreenshots.com/v1/screenshots', {
  method: 'POST',
  headers: {
    'X-API-Key': process.env.ALLSCREENSHOTS_API_KEY,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    url: 'https://shop.example.com/products',
    fullPage: true,
    scrollInterval: 300,  // Slower scroll to allow images to load
    waitUntil: 'networkidle',
    delay: 2000,  // Extra time for images
  }),
});

The scrollInterval parameter controls how long to wait between scroll steps. Increase it for sites with heavy lazy-loading.

Capture documentation pages

Documentation sites are often long but straightforward:

const response = await fetch('https://api.allscreenshots.com/v1/screenshots', {
  method: 'POST',
  headers: {
    'X-API-Key': process.env.ALLSCREENSHOTS_API_KEY,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    url: 'https://docs.example.com/api-reference',
    fullPage: true,
    viewport: {
      width: 1440,
      height: 900,
    },
    blockAds: true,
    blockCookieBanners: true,
  }),
});

Handle very long pages

For extremely long pages, set limits to prevent timeouts:

const response = await fetch('https://api.allscreenshots.com/v1/screenshots', {
  method: 'POST',
  headers: {
    'X-API-Key': process.env.ALLSCREENSHOTS_API_KEY,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    url: 'https://example.com/very-long-page',
    fullPage: true,
    maxHeight: 20000,    // Limit to 20,000 pixels
    maxSections: 50,     // Or limit to 50 viewport sections
    timeout: 60000,      // 60 second timeout
  }),
});

Common scenarios

Blog posts and articles

{
  "url": "https://blog.example.com/my-article",
  "fullPage": true,
  "viewport": { "width": 800, "height": 600 },
  "blockAds": true,
  "blockCookieBanners": true
}

Product pages

{
  "url": "https://shop.example.com/product/123",
  "fullPage": true,
  "scrollInterval": 250,
  "waitUntil": "networkidle",
  "delay": 1500
}

Social media profiles

{
  "url": "https://twitter.com/username",
  "fullPage": true,
  "maxHeight": 10000,
  "scrollInterval": 400,
  "delay": 2000
}

Single page applications (SPAs)

{
  "url": "https://app.example.com/dashboard",
  "fullPage": true,
  "waitUntil": "networkidle",
  "delay": 3000,
  "scrollInterval": 300
}

Optimizing for quality

Image format selection

FormatBest forFile size
PNGScreenshots with text, UI elementsLarger
JPEGPhoto-heavy pagesSmaller
WebPBest compression, modern browsersSmallest
{
  "url": "https://example.com",
  "fullPage": true,
  "format": "webp",
  "quality": 90
}

Retina/HiDPI captures

For crisp text and UI elements:

{
  "url": "https://example.com",
  "fullPage": true,
  "viewport": {
    "width": 1920,
    "height": 1080,
    "deviceScaleFactor": 2
  }
}

Higher device scale factors significantly increase file size and capture time.

Troubleshooting

Header appears multiple times

Problem: Using native mode on a page with fixed header.

Solution: Switch to stitch mode:

{
  "fullPage": true,
  "fullPageMode": "stitch",
  "freezeFixed": true
}

Content missing at bottom of page

Problem: Lazy content not loading.

Solution: Increase scroll interval and add delay:

{
  "fullPage": true,
  "scrollInterval": 400,
  "delay": 2000,
  "waitUntil": "networkidle"
}

Capture times out

Problem: Page is too long or slow.

Solution: Limit capture height and increase timeout:

{
  "fullPage": true,
  "maxHeight": 15000,
  "timeout": 60000
}

Animations causing visual artifacts

Problem: Scroll-triggered animations captured mid-transition.

Solution: Use stitch mode with higher scroll interval:

{
  "fullPage": true,
  "fullPageMode": "stitch",
  "scrollInterval": 300,
  "delay": 1000
}

Cookie banner blocking content

Solution: Enable cookie banner blocking:

{
  "fullPage": true,
  "blockCookieBanners": true
}

Batch full page captures

Capture multiple pages efficiently using the bulk API:

const response = await fetch('https://api.allscreenshots.com/v1/screenshots/bulk', {
  method: 'POST',
  headers: {
    'X-API-Key': process.env.ALLSCREENSHOTS_API_KEY,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    urls: [
      { url: 'https://example.com/page-1' },
      { url: 'https://example.com/page-2' },
      { url: 'https://example.com/page-3' },
    ],
    defaults: {
      fullPage: true,
      fullPageMode: 'stitch',
      waitUntil: 'networkidle',
    },
    webhookUrl: 'https://your-app.com/webhook',
  }),
});

const { jobId } = await response.json();
console.log(`Batch job started: ${jobId}`);

Best practices

1. Start with defaults

The default settings work well for most sites:

{
  "url": "https://example.com",
  "fullPage": true
}

2. Add wait conditions for dynamic sites

{
  "fullPage": true,
  "waitUntil": "networkidle",
  "delay": 1000
}

3. Use appropriate viewport width

  • Desktop documentation: 1200-1440px
  • Marketing pages: 1920px
  • Mobile responsive: 375-414px

4. Consider file size

Full page screenshots can be large. Optimize with:

{
  "fullPage": true,
  "format": "webp",
  "quality": 85,
  "maxHeight": 20000
}

5. Test incrementally

Start with a simple capture and add options as needed:

// Start simple
let options = { url, fullPage: true };

// If header repeats, add stitch mode
options.fullPageMode = 'stitch';

// If content missing, add wait
options.waitUntil = 'networkidle';
options.delay = 1000;

// If still issues, increase scroll interval
options.scrollInterval = 300;

Automated report generation

Generate visual reports with dashboard screenshots and data visualizations

Generate social media previews

Automatically create Open Graph images for your content

On this page

Capturing full page screenshotsUse casesQuick startUnderstanding capture modesWhen to use stitch mode (default)When to use native modeStep-by-step tutorialsCapture a landing page with sticky headerCapture a page with lazy-loaded imagesCapture documentation pagesHandle very long pagesCommon scenariosBlog posts and articlesProduct pagesSocial media profilesSingle page applications (SPAs)Optimizing for qualityImage format selectionRetina/HiDPI capturesTroubleshootingHeader appears multiple timesContent missing at bottom of pageCapture times outAnimations causing visual artifactsCookie banner blocking contentBatch full page capturesBest practices1. Start with defaults2. Add wait conditions for dynamic sites3. Use appropriate viewport width4. Consider file size5. Test incrementally