Keep the subject in frame across cards, heroes, and mobile layouts.
Save intent with the asset
A center crop is convenient until a face, product, or text sits near an edge. Store an optional focal point as normalized coordinates on the source asset. A transformation can then center the requested crop around that point while clamping to the image bounds.
Separate display and derivative decisions
CSS object-position is useful when the browser displays an image in a fixed box, while server-side cropping saves bytes and ensures a consistent composition in shared previews. The same focal point can inform both, but test each target ratio: a very narrow banner may still need a manually approved crop.
Give editors an escape hatch
Automatic focal detection is a suggestion, not an editorial guarantee. Preview the common placements together and allow an override per important slot. Keep the original intact so a changed layout does not require re-uploading the image.
A concrete acceptance test
Preview a portrait subject in square, wide, and narrow slots. Move the focal point once and confirm all three placements update without changing the preserved source image. Run this test with a realistic asset and record the observed state, output URL, and failure reason.
Implementation check
- Store focal coordinates with the original asset.
- Preview square, landscape, and narrow slots.
- Allow a manual crop override for important placements.
Related guides
Primary reference: Official documentation.