How to Screenshot an Area on a Page

If you need to capture a screenshot of an area on a page, you have two options when using our screenshot API:

1. Rely on a CSS selector
2. Specify the clip options

CSS selector

This is the more reliable way. If you can rely on a specific CSS selector when capturing a screenshot, you can use the selector option.

Request URL example (unencoded for readability):

https://api.screenshotscout.com/v1/capture?access_key=YOUR_ACCESS_KEY&url=https://example.com/&selector=#hero

Using the selector option ensures that you always capture the same area of the page, regardless of any layout shifts that might occur over time, provided that the CSS selector itself is present.

Clip options

Another way to capture a screenshot of an area on a page is to specify the clip options: clip_x, clip_y, clip_width, clip_height.

Request URL example (unencoded for readability):

https://api.screenshotscout.com/v1/capture?access_key=YOUR_ACCESS_KEY&url=https://example.com/&clip_x=0&clip_y=100&clip_width=600&clip_height=400

Whenever you can, we suggest that you rely on a specific CSS selector instead of the clip options when capturing an area on a page.

If something changes on a page, even beyond the intended capture area, the layout might shift. If you are capturing a specific CSS selector, you can be sure that you are still capturing the same area of the page. With clip options, if the layout has shifted, the area you are capturing today might not be the area you captured yesterday, which may not be what you expected.