Crop avatars around faces from Supabase Storage

Crop around faces with gravity=face

Set a width and height, then add gravity=face. The image is cropped to cover the size, anchored on the faces it finds. zoom, from 0 to 1, controls how tightly it frames them. Gravity implies fit=cover, so you don't need to set a fit.

# Center crop (default)
https://img.prodkit.cloud/acme/avatars/cory.png?width=96&height=96&fit=cover

# Cropped around the face
https://img.prodkit.cloud/acme/avatars/cory.png?width=96&height=96&gravity=face

# Tighter framing
https://img.prodkit.cloud/acme/avatars/cory.png?width=96&height=96&gravity=face&zoom=0.6

In your framework

The SDKs for React, Next.js, React Native, and Swift (coming soon) take the same options as props or typed values. Until yours is published, the URL API above works in any stack.

// React and Next.js
<Image src={user.avatarPath} width={96} height={96} gravity="face" zoom={0.6} alt={user.name} />

// Swift
let url = try prodkit.url(
    for: user.avatarPath,
    transform: ProdKitTransform(width: 96, height: 96, gravity: .face, zoom: 0.6)
)

When there's no face

For images that aren't portraits, gravity=auto crops around the most visually interesting region instead, and a focal point like gravity=0.5x0.3 pins the crop to a spot you choose (x and y from 0 to 1). Use a focal point for layouts you control, like social cards cropped from a fixed hero image.

How it's billed

A face crop is another size of the image. Each origin image includes five sizes a month, and formats never count, so a 96px and a 192px face crop for retina screens use two of them.

Related

• URL parameters reference
• ProdKit docs for React
• How to resize Supabase Storage images