Distort

The distort parameter moves each of the image’s four corners to a point you choose, producing a perspective or keystone warp. It is the parameter to reach for when fitting artwork onto a surface photographed at an angle.

Syntax

distort takes eight comma-separated numbers — an x and y for each corner, clockwise from the top-left:

distort=x1,y1,x2,y2,x3,y3,x4,y4

The coordinates are fractions of the image, not pixels, so distort=0,0,1,0,1,1,0,1 places every corner where it already is and changes nothing. Values outside 0–1 pull a corner beyond the original edge, and the canvas grows on that side to hold it. Values are clamped to the range -1 to 2.

Edit in Sandbox

Edit in Sandbox

Edit in Sandbox

Edit in Sandbox

A value that is not exactly eight numbers is malformed: it is ignored and left out of the X-Imgix-Params response header. A shape that the warp cannot draw — one that crosses itself, or is not convex — renders as though the parameter were absent, but still appears in X-Imgix-Params.

Layer Forms

mark-distort and blend-distort warp a layer instead of the base image, and both accept the indexed spellings such as blend-distort[1].

For a layer, the eight numbers are points on the base image, given as base-image fractions. This is what makes a mockup work: the four corners name the region of the product photo the design should occupy. Because the corners fully determine the placement, mark-distort replaces mark-x, mark-y and mark-align.

mark-tile ignores mark-distort.

Order and Output

Warps run after rect cropping and rot, and before resizing, so w and h are still the final output size.

The area outside the warped shape is transparent. On a format without transparency it is filled with bg, or black when bg is unset, so set fm=png or a bg color when warping for the web.

Warps work on animated GIFs and PDF pages. A warp that would exceed the 8192 px canvas limit is scaled down rather than rejected.