Skip to content
HTML/CSS to ImageDocs

Capture full-length screenshots of entire webpages

The full_screen parameter captures the entire height of a webpage, including all content that would normally require scrolling to see. When set to true, the API scrolls through the entire page and stitches together a complete screenshot.

Use full_screen when you need to capture:

  • Long blog posts or articles
  • Full landing pages
  • Documentation pages
  • Email newsletters
  • Any content that extends below the initial viewport

By default, full_screen is false. The API captures only what’s visible in the viewport (default size: 1920x1080). And automatically crops to the content inside the viewport.

Terminal window
curl -X POST https://hcti.io/v1/image -u 'UserID:APIKey' \
--data-urlencode url="https://example.com/long-article" \
--data full_screen=true
{
"url": "https://example.com/blog-post",
"full_screen": true
}

For best results on long pages, combine full_screen with other parameters:

{
"url": "https://example.com/documentation",
"full_screen": true,
"device_scale": 2,
"block_consent_banners": true
}

Full-screen captures of long pages produce larger images. Consider:

  • Using device_scale: 1 instead of 2 to reduce file size
  • Using WebP format (append .webp to the image URL) for better compression
  • The maximum image height is limited to prevent excessively large files

Long pages take more time to render because the API must:

  1. Load the entire page
  2. Scroll through all content to trigger lazy-loaded elements
  3. Stitch together the final image

For very long pages, consider using ms_delay to ensure all content loads properly.

Many modern websites lazy-load images and content as you scroll. The full_screen option handles this by scrolling through the page before capturing. However, if content still appears missing, try adding ms_delay to give elements more time to load.

Capture entire documentation pages for offline reference or archival:

{
"url": "https://docs.example.com/api-reference",
"full_screen": true,
"viewport_width": 1200,
"viewport_height": 1200
}

Note: In this example, even though we set viewport_height, the API will still generate an image larger if needed based on the URL.

Generate full previews of email newsletters:

{
"html": "<your-email-html>",
"full_screen": true,
"viewport_width": 600,
"viewport_height": 1200
}

Note: In this example, even though we set a viewport_height, the API will still generate an image larger if needed based on the HTML content.

Screenshot entire landing pages for design review or competitive analysis:

{
"url": "https://example.com",
"full_screen": true,
"device_scale": 2,
"block_consent_banners": true
}

Need help?

Talk to a human. Email support@htmlcsstoimage.com and we’ll help you get started.