Output Formats
Control output dimensions, DPR, file format, quality, transparency, and CDN usage.
Output controls define the file ScreenFramed stores and serves. They do not change how the source page is loaded unless you also change viewport or device settings.
Format
json{ "url": "https://example.com", "output": { "format": "webp" }}
| Format | Use for |
|---|---|
png | Lossless output, transparency, docs, design assets. |
webp | Web delivery with smaller files. |
jpg | Photos or non-transparent images where alpha is not needed. |
Size
Set exact dimensions for OG images, directory cards, app store assets, and social formats:
json{ "url": "https://example.com", "output": { "width": 1200, "height": 630, "format": "webp" }}
If output.width and output.height are omitted, ScreenFramed derives dimensions from aspect_ratio or the capture viewport. The maximum output width or height is 6144.
DPR
output.dpr scales the final composed image. capture_dpr controls how the browser captures the page. Use them separately:
json{ "url": "https://example.com", "capture_dpr": 2, "output": { "dpr": 2 }}
Transparency
Transparent output requires png or webp:
json{ "url": "https://example.com", "selector": ".card", "background_style": "transparent", "output": { "format": "png" }}
JPG cannot preserve alpha and is rejected when background_style is transparent.
CDN URLs
Successful captures return a CDN URL:
json{ "url": "https://cdn.screenframed.com/r/cap_01KNS1WNPW9FCHZSK4XNTHMB0H.png"}
Use the returned URL directly in docs, CMS entries, social templates, or product records. If you need local files, use the CLI and --output.
The canonical render is stored once. Format and delivery behavior can use CDN transforms where appropriate.