A preset sets the window size, the image format and the cache time in one parameter. You will pick a preset for your job, render a page with it, and change one setting without losing the rest.
Find the preset for your job
| You are building | Preset | Size | Format |
|---|---|---|---|
| Share images for Facebook, LinkedIn, Slack | og_card |
1200×630 | PNG |
| Share images for X (summary card) | twitter_card |
1200×600 | PNG |
| Share images for X (large image card) | twitter_card_large |
1200×628 | PNG |
| Link previews in your own app or chat | link_preview |
800×600 | PNG |
| How the page looks on a phone | mobile |
390×844 at 3× | PNG |
| A phone held sideways | mobile_landscape |
844×390 at 3× | PNG |
| A desktop monitor | desktop_hd |
1920×1080 | PNG |
| A large monitor | desktop_4k |
3840×2160 | PNG |
| The whole page, top to bottom | full_page |
1280 wide, full height | PNG |
| A printable document | pdf_document |
US Letter, 1 cm margins |
If nothing fits, leave out preset and set the size yourself with viewport.
Add the preset to your request
The preset is one field next to the URL. This request renders a phone view:
curl -X POST https://api.renderscreenshot.com/v1/screenshot \ -H "Authorization: Bearer $RS_API_KEY" \ -H "Content-Type: application/json" \ -d '{"url": "https://renderscreenshot.com", "preset": "mobile"}' \ --output mobile.png
In an SDK, it is the preset method:
Node.js
const image = await client.take( TakeOptions.url('https://renderscreenshot.com').preset('mobile') );
Python
image = client.take(TakeOptions.url('https://renderscreenshot.com').preset('mobile'))
Ruby
image = client.take( RenderScreenshot::TakeOptions.url('https://renderscreenshot.com').preset('mobile') )
GET request
curl "https://api.renderscreenshot.com/v1/screenshot?url=https%3A%2F%2Frenderscreenshot.com&preset=mobile" \ -H "Authorization: Bearer $RS_API_KEY" --output mobile.png
Compare the results
Here is the same page with five presets. Click an image to see it at full size.
The
mobileresult is at the top of this guide. The image is 1170×2532 pixels, because the preset renders at 3× pixel density, like an iPhone.
Change one setting
Add a field to replace one value of the preset. Everything else stays. This request keeps og_card (1200×630) and turns on dark mode:
{ "url": "https://renderscreenshot.com", "preset": "og_card", "browser": { "dark_mode": true } }
og_card
og_card + dark_mode
Other common changes:
| Change | Add |
|---|---|
| Smaller files | "output": { "format": "webp", "quality": 85 } |
| JPEG instead of PNG | "output": { "format": "jpeg" } |
| A thumbnail from the same render | "output": { "resize": { "width": 600 } } |
| A different height | "viewport": { "height": 800 } |
Next steps
- Add social share images to every page with
og_card. - Show link previews with
link_preview. - Capture pages on a schedule with
full_page.