How to Capture a Webpage Screenshot After Scrolling with Cloudinary
Use Cloudinary URL2PNG to capture public webpages, configure viewport and delay options, and check what its full-page setting does on your page.
Short answer: Cloudinary’s URL2PNG Website Screenshots add-on can generate a screenshot of a public webpage. Its documentation names viewport, user_agent, and delay options, and demonstrates a fullpage option. That establishes how to request a full-page capture; it does not guarantee that every page’s scroll-triggered or dynamically loaded content will appear. Verify the target page and settings before relying on the result.
The documented workflow uses the url2png delivery type and the target website URL as the public ID. Cloudinary then caches and delivers the generated image, which can also be transformed using Cloudinary’s image pipeline. See Cloudinary’s URL2PNG documentation and its reference for delivery types and flags.
1. Understand what “after scrolling” means
A full-page screenshot and a screenshot taken after scrolling are not necessarily the same operation. A full-page capture requests an image covering more than the visible viewport. Scrolling a live browser can also trigger lazy-loaded images, animations, infinite lists, or sections that appear only when they enter view.
Cloudinary’s documented URL2PNG material shows a fullpage option, including an example setting it to false. The sources do not specify guaranteed page dimensions or behavior for infinite scroll, lazy-loaded content, nested scroll containers, or other scroll-triggered sections. Treat the option as a capture setting to verify against your page, not proof those behaviors are handled.
2. Configure URL2PNG in Cloudinary
- Enable or register the URL2PNG Website Screenshots add-on for your Cloudinary account. Cloudinary lists it in its add-on catalog.
- Use Cloudinary’s SDK or authenticated API to construct a delivery request for the
url2pngdelivery type, with the public webpage URL as the public ID. - Set the capture options you need. The documentation names
viewport,user_agent, anddelay, and demonstratesfullpage. - Generate a signed delivery URL or eagerly generate the image through Cloudinary’s authenticated API. By default, add-on requests must be signed or eagerly generated. An account security setting can permit unsigned add-on transformations; consider access control and cost implications before enabling it.
- Open the resulting image and inspect the top, bottom, and any content that depends on scrolling. Adjust settings and repeat for the exact page type you need to support.
The general documented URL shape is <website URL>/url2png/<option=value>|<option=value>. This is a shape only, not a complete production URL: the exact delivery URL depends on your account, resource, signing, and delivery configuration. Do not treat a hand-written unsigned URL as a working signature. Use the SDK or authenticated API to generate a valid request.
3. Choose and verify capture options
| Option | What it is for | What to verify |
|---|---|---|
fullpage |
Requests full-page behavior; Cloudinary’s guide demonstrates this option. | Inspect actual output dimensions and content. The examples do not establish guaranteed behavior for every page or scroll-triggered section. |
viewport |
Sets the capture viewport. | Use dimensions representative of the intended display and check responsive breakpoints. |
user_agent |
Sets the browser user agent used for capture. | Check that the page renders the intended desktop or mobile layout; user-agent changes may affect page behavior. |
delay |
Adds a delay before capture. | Use it to allow ordinary rendering to settle, then inspect whether delayed content is present. A delay alone does not prove scroll-triggered loading occurred. |
Cloudinary documents these option names but the materials reviewed do not establish universal values, limits, or outcomes for each page type. Consult the current add-on documentation for syntax and account-specific details.
Test pages that depend on scrolling
- Lazy-loaded images: compare the screenshot with the page opened in a browser and check images well below the fold.
- Infinite scroll and virtualized lists: determine whether the desired items exist in the rendered capture. A page may only create them after a real scroll, and the reviewed URL2PNG documentation does not promise that interaction.
- Scroll-triggered sections and animations: check whether sections that animate or reveal on entry are visible in the image.
- Nested scroll containers: inspect inner panels separately; a page-level full-page option may not imply that each internal scroller is traversed.
- Consent overlays and popups: verify whether they cover the content you need. Do not assume the add-on removes them.
4. Transform and deliver the screenshot
Once URL2PNG has generated the screenshot, Cloudinary can apply image transformations to it. Resizing and cropping are useful when fitting a capture to a card or thumbnail, but they can remove content from view. Keep an un-cropped source if readers need to inspect the complete capture, and check transformed derivatives at their final display size.
Cloudinary’s CLI guide includes an example that requests a signed URL2PNG screenshot and applies grayscale and crop transformations. Use Cloudinary’s documented SDK, CLI, or authenticated API workflow to create and deliver the image for your account.
5. Troubleshoot common problems
| Symptom | Likely cause | What to do |
|---|---|---|
| The add-on request is rejected or the image does not generate. | The add-on may not be enabled, or the request may not meet the account’s authorization requirements. | Confirm URL2PNG is available on the account and use a signed URL or authenticated eager generation as required. |
| An unsigned URL fails. | Unsigned add-on transformations are restricted by default. | Generate a signed request or use eager generation. Only change the account-level unsigned setting after considering access and cost implications. |
| The capture shows the viewport but not the whole page. | The full-page option may be absent, set incorrectly, or not produce the expected result for that page. | Check the current option syntax, request the documented full-page setting, and inspect the result on the target page. |
| Content below the fold is missing. | The page may reveal or fetch content only after scrolling; the reviewed documentation does not establish URL2PNG behavior for those cases. | Test that specific page and content. Do not assume a delay or full-page setting triggers real scrolling. |
| The screenshot uses the wrong responsive layout. | The viewport or user agent may not match the intended display. | Set and verify the viewport and user agent options for the desired layout. |
| The page looks correct but the thumbnail omits important content. | A later crop or resize may have cut off the relevant area. | Review the original capture and adjust the transformation or target aspect ratio. |
| The URL shape looks right but does not work as a production link. | The example URL shape omits account-specific delivery configuration and signing. | Generate the URL with Cloudinary’s SDK or authenticated API rather than assuming the illustrative shape is complete. |
6. Performance, reliability, and cost considerations
- Cache and delivery: Cloudinary documents that it caches and delivers generated screenshots through its image pipeline. Consider how changing source-page content and your delivery workflow affect when a new capture is needed.
- Capture time: a configured delay adds time before capture. Choose a value based on observed page rendering, and verify the result instead of using a large delay as a substitute for testing dynamic behavior.
- Reliability: validate representative pages, responsive layouts, and dynamic sections. The sources reviewed provide no comparative benchmark or guarantee for lazy loading, infinite scroll, or scroll-triggered content.
- Authorization: signed requests and authenticated eager generation control access to add-on screenshot transformations. Avoid putting account secrets in client-side code.
- Transformations: crop and resize operations can reduce the visible content area. Retain or deliver an appropriate source image when a complete page view matters.
- Cost: URL2PNG is a Cloudinary add-on. Review the current add-on and account terms for applicable pricing and usage details; the sources used here do not provide a price figure to quote.
7. Or skip the browser setup
If you need a direct screenshot endpoint instead of configuring URL2PNG and Cloudinary delivery, ScreenshotNeo is a website screenshot API and MCP server for developers. Its API returns a PNG, JPEG, WebP, or PDF from one GET request. It offers full-page capture with lazy images loaded, plus options such as viewport presets, custom waits, and selector capture. For content that requires real scroll-triggered interaction, verify the result against that page’s behavior.
See the ScreenshotNeo API documentation. Example request:
curl -G "https://api.screenshotneo.com/v1/shot" \
-d access_key=YOUR_API_KEY \
--data-urlencode url=https://stripe.com \
-o shot.webpScreenshotNeo removes cookie banners, popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.
Sign up free for 1,000 screenshots a month, with no card required.
FAQ
Does Cloudinary URL2PNG automatically scroll the page?
The documentation demonstrates a fullpage option, but the reviewed sources do not specify that this performs real scrolling or triggers all scroll-dependent page behavior. Test the page you need to capture.
Can I use the screenshot in a thumbnail?
Yes. Cloudinary supports image transformations on the generated screenshot, including resizing and cropping. Check that the crop preserves the content readers need.
Can I expose the URL2PNG signing secret in frontend code?
No. Use a server-side SDK or authenticated API flow to create signed requests or eagerly generate screenshots.
Will a longer delay make every dynamic page complete?
No such guarantee is established in the reviewed documentation. A delay can allow time for rendering, but it does not show that scrolling or other interactions occurred.
