Skip to main content
Set w and h to define the output box. fit controls how the source fills that box; gravity, crop, or fp controls where the crop lands when using fit=cover.
Center vs smart gravity side by side
Center crop vs focal point crop
Hero cropped with rect and aspect ratio
Product photo at 21:9 aspect ratio

​
Source crop and aspect ratio

Use rect to crop the source before resize/gravity: 
?rect=120,80,800,600&w=900&h=600&fit=cover
?rect=10%,15%,80%,70&w=1200&ar=16:9
When only one output dimension is set, ar derives the other (w=1200&ar=16:9 → 675px tall).

​
Fit strategies

fitBehaviour
cover (default)Fills the box, cropping overflow. Pairs with gravity for smart cropping.
containFits inside the box, padding with transparency.
fillStretches to fill the box.
insideScales down without enlarging.
outsideScales to cover on the smallest axis.
fit=cover example
fit=contain example
fit=fill example
fit=inside example
fit=outside example

​
Smart cropping

ModeWhen to use
gravity=auto (default)Fast saliency — best default for most photos.
gravity=smart / crop=smartContent-aware scoring for off-centre subjects.
gravity=faceCentres crop on detected faces; falls through to smart if none found.
gravity=entropyTexture-heavy sources with no obvious subject.
fp=x,yHand-picked focal point — cheapest and deterministic at scale.
?w=600&h=600&fit=cover&gravity=smart
?w=600&h=400&fit=cover&fp=0.3,0.4
?w=600&h=600&fit=cover&gravity=face
Uncropped hero source image
Face-aware crop on a portrait
Entropy crop on a texture
For focal-point workflows, palette extraction, and /api/images/analyze, see Smart cropping & image analysis.

​
Device pixel ratio

dpr multiplies output pixels while preserving layout size in CSS. Render a 400px slot with w=400&dpr=2 to receive an 800px asset for Retina displays.