How to Capture Full Page Screenshots
Whenever you need to capture a full page screenshot when using our website screenshot API, all you have to do is set full_page to true. This will produce a full page screenshot of the requested webpage, with all sensible defaults applied to the screenshot options that affect full page screenshots.
However, depending on your use case, you might want to change these defaults to optimize for better quality, performance, or any other requirements you might have.
In this guide, we will go through all the screenshot options that influence full page screenshots, how you can tune them, and how your changes will affect the final screenshot.
Tune full page scrolling
When you request a full page screenshot by setting full_page to true, we also set full_page_pre_scroll to true by default. This causes us to scroll the page from top to bottom, which triggers all lazy-loaded assets and ensures that all the images on the page are present in the screenshot.
However, scrolling the page takes time. If you need to optimize for speed rather than screenshot quality, consider setting full_page_pre_scroll to false. This will dramatically increase the speed of rendering, but may cause some screenshots to miss lazy-loaded assets present on the page.
Request URL example (unencoded for readability):
https://api.screenshotscout.com/v1/capture?access_key=YOUR_ACCESS_KEY&url=https://example.com/&full_page=true&full_page_pre_scroll=falseTune scrolling steps
Instead of turning off full page scrolling right away, you can start with something more conservative.
When we scroll the page, we do it in steps of a particular height in pixels. The exact step height is calculated like this:
full_page_pre_scroll_step = 0.8 x device_viewport_heightSo, for example, if device_viewport_height equals 1080, which is the default value, full_page_pre_scroll_step will be:
full_page_pre_scroll_step = 0.8 x 1080 = 864If you want to increase the speed of rendering, set full_page_pre_scroll_step manually to a higher value. Note that this may cause some lazy-loaded images not to fully load.
If some images are missing in your full page screenshots, do the opposite and decrease full_page_pre_scroll_step to a lower value. This will increase the rendering time as well.
The allowed range for full_page_pre_scroll_step is between 240 and 2000 pixels.
Request URL example (unencoded for readability):
https://api.screenshotscout.com/v1/capture?access_key=YOUR_ACCESS_KEY&url=https://example.com/&full_page=true&full_page_pre_scroll_step=2000Tune the delay between steps
Scrolling the page is done in steps, with a small delay between them. This is necessary to give the browser enough time to trigger the lazy-loaded assets in the visible viewport.
The step delay can be configured by manually setting the full_page_pre_scroll_step_delay option. The default value is 200 ms.
If you want to increase screenshot rendering speed, decrease the delay between steps, although note that this may cause some lazy-loaded assets not to fully load.
If some lazy-loaded images are not visible in your full page screenshots, consider increasing the delay between steps. Note that this could significantly increase the rendering time.
The allowed range is between 50 and 1000 ms.
Request URL example (unencoded for readability):
https://api.screenshotscout.com/v1/capture?access_key=YOUR_ACCESS_KEY&url=https://example.com/&full_page=true&full_page_pre_scroll_step_delay=50Limit the maximum height of the screenshot
Some pages can be very tall. Some can even have infinite scroll.
The taller the page, the longer it takes to capture a full page screenshot.
If you want to increase the rendering speed, and you are fine with capturing only the first N pixels of the page, consider setting full_page_max_height to a lower value.
Request URL example (unencoded for readability):
https://api.screenshotscout.com/v1/capture?access_key=YOUR_ACCESS_KEY&url=https://example.com/&full_page=true&full_page_max_height=20000Reduce animations
Some pages may have animations. To avoid capturing screenshots with animations mid-transition, consider setting reduced_motion to true. The default value is false.
Request URL example (unencoded for readability):
https://api.screenshotscout.com/v1/capture?access_key=YOUR_ACCESS_KEY&url=https://example.com/&full_page=true&reduced_motion=trueAdd a delay before capture
In some cases, you may find that some images in your full page screenshots are not fully loaded, even when all other screenshot options outlined in this article are properly configured.
In that case, consider giving the lazy-loaded assets on the page even more time to fully load by adding a small delay right before capture. This can be done by configuring the delay screenshot option, in seconds. The default value is 0.
Request URL example (unencoded for readability):
https://api.screenshotscout.com/v1/capture?access_key=YOUR_ACCESS_KEY&url=https://example.com/&full_page=true&delay=5We also recommend adding a small delay when you explicitly set reduced_motion to true.
Block cookie banners, ads, and chat widgets
When you capture full page screenshots, you may occasionally see cookie banners and chat widgets near the top part of the screenshot, usually at the bottom of the viewport.
Consider hiding cookie banners and chat widgets by setting block_cookie_banners and block_chat_widgets to true. This will hide them from the screenshots and also increase the rendering speed.
If you do not care about ads, consider hiding them as well by setting block_ads to true. This will hide ads, allow us to use a more aggressive and effective algorithm when hiding cookie banners, and also increase the rendering speed.
Request URL example (unencoded for readability):
https://api.screenshotscout.com/v1/capture?access_key=YOUR_ACCESS_KEY&url=https://example.com/&full_page=true&block_cookie_banners=true&block_ads=true&block_chat_widgets=true