Cloudinary Website Screenshot Is Cropped: How to Fix the Dimensions

First identify where the content disappears. If the original URL2PNG screenshot is already missing part of the page, adjust the capture options: set the browser viewport and choose whether fullpage should capture the whole page. If the original screenshot is complete but its delivered version is cut off, change the Cloudinary transformation. Use c_fill when cropping is acceptable, c_fit to preserve the whole image inside a box, or c_pad to preserve it and add padding. These are separate controls: capture dimensions determine what exists in the screenshot; transformation dimensions determine how that image is delivered. See Cloudinary’s URL2PNG add-on guide and resize and crop guide.

1. Diagnose the stage that crops the screenshot

Open the generated source screenshot at its original size, before applying a fixed output width and height.
If the needed section is missing there, fix URL2PNG capture extent or viewport.
If the source contains the whole page but an embedded or delivered image does not, inspect the transformation URL or SDK options.
Write down the intended result: a browser-sized viewport, the full page, or a fixed-size thumbnail. Also decide whether cutting off content is acceptable.

Cloudinary’s workflow generates the website screenshot first and then allows image transformations to be applied to it. Changing a crop mode cannot restore content that was never captured.

2. Fix capture-stage clipping in URL2PNG

Set viewport to the browser width and height you want URL2PNG to render. Use fullpage=false when you only want that viewport, and enable full-page capture when you need the whole document. A full-page capture can be very tall; choosing a fixed viewport height while requesting a full-page image are different goals.

Cloudinary documents URL2PNG options as part of the public ID, after /url2png/, separated with |. Here is the documented shape with a 1280 × 900 viewport and full-page capture:

https://res.cloudinary.com/CLOUD_NAME/image/url2png/https://example.com/url2png/viewport=1280x900|fullpage=true

This is a URL pattern, not a ready-to-use signed delivery URL. Replace CLOUD_NAME, encode and compose the website URL as required by the Cloudinary SDK or URL builder, and follow the account’s signing or eager-generation requirements. The add-on also documents options such as user_agent and delay; use a mobile user agent when you need a mobile rendering, and add delay only when the page needs extra time to render. Consult the current URL2PNG documentation for option syntax and supported values.

Choose capture dimensions deliberately

Viewport capture: Set the viewport to the target browser dimensions and use fullpage=false. Content outside the viewport will not appear.
Full-page capture: Set an appropriate viewport width and enable full-page capture. The resulting image may be much taller than a normal browser window.
Responsive or mobile capture: Set a mobile viewport and, if needed, the matching user_agent. A desktop viewport later resized to a narrow box is not equivalent to capturing the page as mobile.
Late-rendering content: If content is absent because it has not appeared when capture occurs, use the documented delay option as appropriate. Increasing delay cannot reveal content that is inaccessible or never rendered.

3. Fix output-stage cropping with the right transformation

If the original screenshot is complete, select a resize mode based on what the output must do. In the examples below, assume the source is already a generated screenshot with public ID SCREENSHOT_PUBLIC_ID. The standard delivery URL shape is https://res.cloudinary.com/CLOUD_NAME/image/upload/TRANSFORMATION/SCREENSHOT_PUBLIC_ID; use the appropriate asset path and delivery type for the screenshot produced by your workflow.

Goal	Mode	Result and tradeoff
Exact width and height; crop is acceptable	`c_fill`	Fills the box without distortion. When aspect ratios differ, some source content is cropped.
Show the entire screenshot within a bounding box	`c_fit`	Preserves aspect ratio and the whole image; the result may not fill both dimensions.
Show the entire screenshot and fill the remaining area	`c_pad`	Preserves aspect ratio and adds padding where the source does not fill the box.
Keep a crop focused on a chosen region	`c_fill` plus gravity	Still crops to fill, but shifts which area is retained.

Exact-size crop, top of page favored

Cloudinary’s screenshot example uses g_north with c_fill to favor the top of the page. For a 500 × 300 output:

https://res.cloudinary.com/CLOUD_NAME/image/upload/c_fill,g_north,h_300,w_500/SCREENSHOT_PUBLIC_ID

This produces the requested box while potentially removing content from the sides or bottom. North gravity is useful when a center crop would cut off the header; it does not preserve the full page.

Preserve all content in a bounding box

https://res.cloudinary.com/CLOUD_NAME/image/upload/c_fit,h_900,w_1280/SCREENSHOT_PUBLIC_ID
https://res.cloudinary.com/CLOUD_NAME/image/upload/c_pad,h_900,w_1280/SCREENSHOT_PUBLIC_ID

Use c_fit for the complete image with unused space possible. Use c_pad when the complete image must sit in the target dimensions with padding. Padding can make a very tall full-page screenshot tiny within a short landscape box; choose a target aspect ratio that suits the source.

Gravity and automatic cropping

Gravity decides which area is kept when a crop happens. g_north favors the top; g_center is the default center position. Automatic gravity or crop modes can choose a crop based on the image and requested dimensions, but a page screenshot is not necessarily a subject-centered photograph. Inspect the result before relying on an automatic crop. Cloudinary documents auto_pad as an automatic crop mode that can add padding when more of the original needs to remain; it requires automatic gravity and is not supported for animated images. See Cloudinary crop modes.

4. Run through a complete repair

Save the current delivery URL and its output dimensions. Record the transformation path, such as c_fill,g_center,h_300,w_500.
Inspect the untransformed generated screenshot. Verify that the missing page section exists in the source.
If capture is incomplete, correct viewport and fullpage; use a suitable user_agent for the intended device rendering.
If the source is complete, replace the crop mode: try c_fit to keep the whole image, or c_pad if the exact box must be filled with empty space. Keep c_fill only when cropping is intentional.
If using fill intentionally, select gravity such as g_north so the important top content stays in frame.
Check the final output at its displayed size. Confirm that it is legible and that no important content is hidden.

5. Cloudinary setup, signing, and URL handling

The URL2PNG add-on requires a Cloudinary account and add-on registration. Cloudinary says URL2PNG delivery URLs must by default be signed or eagerly generated, unless the account allows unsigned add-on transformations in its security settings. Once a screenshot has been generated through a signed URL or authenticated API, further transformations of that image can use regular unsigned Cloudinary delivery URLs. Check the current account settings and add-on registration before debugging a URL that does not deliver. These requirements are described in the official add-on documentation.

URL construction is a common source of mistakes because URL2PNG options belong in the screenshot public ID, while transformations such as c_fill, width, height, and gravity belong in the image delivery transformation. Build or sign the URL through the Cloudinary SDK or authenticated API for your stack rather than copying an illustrative unsigned URL into production.

6. Common errors and fixes

Symptom	Likely cause	Fix
The bottom of the page is missing in the original screenshot	Viewport capture was requested, or full-page capture was not enabled.	Set the intended `viewport` and enable full-page capture.
The screenshot source is complete but the thumbnail loses the header or footer	`c_fill` crops to the requested aspect ratio, often around center gravity.	Use `c_fit` or `c_pad`, or retain fill and set gravity toward the content.
The result has the right width but the wrong height, or vice versa	The source and target aspect ratios differ, or only one dimension was specified.	Specify both dimensions when a fixed box is required and choose the crop or fit behavior explicitly.
The full-page image looks tiny in a card	A very tall source was fitted into a short landscape box.	Use a taller target, accept a deliberate crop, or create a representative viewport screenshot for the card.
Mobile screenshot looks like a desktop page squeezed narrow	The page was captured at desktop dimensions and only resized afterward.	Capture at a mobile viewport and use the appropriate user agent when required.
Screenshot request is rejected or delivery fails	Add-on is not registered, URL2PNG access is restricted, or the URL requires a signature/eager generation.	Check add-on registration, account security settings, and signing or eager generation configuration.
Capture stops before late content appears	Page content had not rendered at capture time.	Consider URL2PNG’s documented delay option and verify the target content is publicly reachable.
`auto_pad` is rejected or behaves unexpectedly	Automatic padding requires automatic gravity and has documented compatibility limits.	Use `g_auto` with the supported mode, or choose `c_fit`/`c_pad`.

7. Performance, reliability, and cost considerations

Capture cost and delivery work are distinct: URL2PNG generates a screenshot; later transformations derive the delivery dimensions. Avoid repeatedly changing capture settings when only the crop is wrong.
Prefer a suitable capture size: A very tall full-page image can consume more storage or processing and may be unwieldy as a thumbnail. Capture the full page only when downstream use needs it.
Use stable transformation URLs: Reuse the same dimensions and mode for repeat delivery instead of generating many near-identical variants. Cloudinary documents screenshot generation, caching, and delivery through its CDN.
Keep rendering conditions consistent: Viewport, user agent, and delay can change what appears in the generated source. A transformation cannot compensate for a different page layout captured upstream.
Budget uncertainty: Add-on registration, account settings, and current service pricing determine actual cost. Review current Cloudinary plan and add-on terms; this guide does not assume a price or performance benchmark.

8. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its API can return a screenshot in one request, with options for viewport and full-page capture. Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are never billed, and response headers identify the page verdict and billing status. An MCP server lets AI agents use screenshot tools. One thousand screenshots a month are free with no card; paid plans start at $5 for 3,000.

See the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Create a free ScreenshotNeo account for 1,000 screenshots a month with no card.

9. FAQ

Can I make a screenshot wider without losing content?

Yes. Use a fit or pad mode to preserve the whole source. If you need exact dimensions, padding may be necessary unless the source already has the target aspect ratio.

Does full-page capture prevent all later cropping?

No. It captures more of the page into the source image. A subsequent fixed-ratio fill transformation can still crop that image.

Why does changing gravity not restore the missing section?

Gravity only shifts the crop window over pixels already in the source. It cannot restore content excluded during capture.

Should I use full-page capture for a preview card?

Only if the card needs to represent the whole page. For a legible card, a viewport capture or a deliberately selected crop may be more useful.