Processing options resize, crop, adjust, watermark, and encode an image, and each page below covers one category of them. Requesting images explains how options go into a URL and the value syntax they use.
Option index
| Category | URL options |
|---|---|
| Resize | w, h, fit, enlarge, min-w, min-h, dpr, zoom |
| Canvas and padding | extend, extend-ratio, extend-at, extend-offset, pad, bg |
| Orientation | orient, rotate, flip |
| Page selection | page |
| Trim and crop | trim, trim-symmetry, crop, crop-ratio, crop-ratio-enlarge, region |
| Crop guides | anchor, focus, detect, anchor-offset |
| Watermarks | wm, wm-src64, wm-enc, wm-opacity, wm-scale, wm-at, wm-offset, wm-tile, wm-gap |
| Effects | blur, progressive-blur, sharpen, pixelate, gray, bitonal, monochrome, duotone, brightness, contrast, saturation, colorize, gradient |
| Formats and quality | output, format, q, format-q, autoquality, max-bytes |
| Encoders | jpeg-options, png-options, webp-options, avif-options |
| Metadata and color | meta, dpi, profile, hdr |
| Request controls | filename, attachment, cb, expires, debug |
| Requesting images | preset, -, sig, src, src64, enc |
Processing order
The image is first turned upright from its EXIF orientation, unless the
request sets orient=none. Then each
group applies its options in this
order, whatever order the URL lists them in:
- Rotate, then flip.
- Trim.
- Crop or region.
- Resize, and the crop that a cover fit makes.
- Effects, in their own fixed order.
- Canvas extension.
- Padding.
- Background.
- Watermark.
Encoding, or a placeholder or info output,
finishes the request. Processing order and groups
explains what this order means for each option and when to split options
into groups.
Common recipes
Add these paths to your base URL.
| Goal | Path |
|---|---|
| Responsive photo | /w=800/src/photos/beach.jpg |
| Square thumbnail | /w=240/h=240/fit=cover/src/photos/beach.jpg |
| High-density thumbnail | /w=240/h=240/fit=cover/dpr=2/src/photos/beach.jpg |
| Contain inside a white square | /w=400/h=400/extend/bg=fff/src/photos/beach.jpg |
| Attention-guided cover crop | /w=400/h=300/fit=cover/anchor=smart/src/photos/beach.jpg |
| Grayscale without resizing | /gray/src/photos/beach.jpg |
| WebP with a byte budget | /format=webp/max-bytes=30000/src/photos/beach.jpg |
| Placeholder | /w=400/h=300/fit=cover/output=blurhash/src/photos/beach.jpg |
| Result dimensions and placeholders | /w=400/output=info,blurhash,lqip-css/src/photos/beach.jpg |