?
Image transforms
Resizes and reformats a public image through URL query params.
{public file url}?w=&h=&fit=&crop=&fm=&dpr=&q=&blur=&sharpen=
A public image resizes on request through query params on its URL, so a page fetches the size it shows instead of scaling a full-res original. Set width and height, choose a fit and a face-aware crop, convert the format to WebP or AVIF, and set quality; add dpr=2 so it stays crisp on Retina. Combine them freely, for example hero.jpg?w=200&h=200&fit=crop&fm=avif.
Parameters
w
number
Max width in pixels.
h
number
Max height in pixels.
fit
enum
Resize mode.
scale-downcontaincovercroppad
crop
enum
Face-aware crop, used with fit=crop.
face
fm
enum
Output format.
avifwebpjpegauto
dpr
number
Device pixel ratio; set 2 or 3 for Retina.
q
number
Quality, 1 to 100.
blur
number
Blur radius.
sharpen
number
Sharpen amount.
Request the displayed size
<img src={`${file.url}?w=200&h=200&fit=crop&fm=avif&dpr=2`} width={200} height={200} />