Image Output Options
Control the format, quality, and dimensions of your screenshot output.
Image Format Options
Image Type (type)
- Default:
png - Options:
png,jpeg,webp - Example:
type=jpeg
Best Format (bestFormat)
- Default:
false - Description: Automatically selects optimal format based on browser support
- Example:
bestFormat=true
Format Specifications
PNG: Lossless, supports transparency, larger files. Best for text/UI.
JPEG: Lossy, no transparency, smaller files (200-500 KB). Best for photos.
WebP: Modern format, 25-35% smaller, supports transparency. Best for web.
Image Resizing
Both width and height must be specified together:
resizeWidth: Target width in pixelsresizeHeight: Target height in pixels
// Social media (Open Graph)
&resizeWidth=1200&resizeHeight=630
// Thumbnail
&resizeWidth=300&resizeHeight=200
Transparent Background
Transparent (transparent)
- Default:
false - Format: PNG or WebP only
- Example:
transparent=true
Usage Examples
// High-quality PNG
https://cdn.capture.page/KEY/HASH/image?url=https://example.com&type=png
// Optimized JPEG
&type=jpeg
// WebP with resize
&type=webp&resizeWidth=1200&resizeHeight=630
// Transparent logo
&selector=.logo&transparent=true&type=png
Best Practices
Format Selection:
- PNG: Text clarity, UI elements, transparency required
- JPEG: Photos, file size constraints
- WebP: Modern web apps, best compression
Maintain Aspect Ratio:
const aspectRatio = 1920 / 1080;
const targetHeight = Math.round(targetWidth / aspectRatio);
Viewport vs Resize:
- Viewport: Renders at specific size
- Resize: Captures then scales
- Combined: Render large, output small (best quality)
Troubleshooting
Black Background: Ensure type=png or type=webp, page must have CSS transparency
Blurry Images: Use higher source resolution, avoid upscaling
Format Not Supported: Use bestFormat=true for auto-selection