pngtoolskit.org
PNG and image utilities, in the browser
Say hi →

Perspective Transform

true projective warp · four corners · presets · batch

A perspective transform is not the same thing as a skew. Skew slides one edge sideways and keeps opposite sides parallel; a projective transform lets all four corners move independently, so parallel lines converge the way they do in a photograph. It is what you need to lay a screenshot onto a laptop mockup, straighten a photographed document, or make a flat image look like a billboard.

Drop images here

PNG, JPG, WebP — multiple files allowed

    no files
    Ready.

    Reading the eight numbers

    Each corner has an X and a Y offset given as a percentage of the image's width and height, and positive means right and down. All zeros is the identity — nothing moves. To make an image look like it is turning away from you on its left side, pull the two left corners toward the centre vertically: top-left Y positive, bottom-left Y negative. That shortens the left edge relative to the right, which is exactly what distance does.

    The output canvas is sized to the bounding box of wherever the corners end up, so nothing is clipped and the image never jumps position. Areas of the canvas outside the warped quadrilateral are left transparent, or filled if you pick a background — useful when the target format has no alpha.

    How the warp is computed

    Eight numbers determine a homography, the 3×3 matrix that maps one quadrilateral onto another with a perspective divide. This solves that 8×8 system for the map from the destination back to the source, then walks every output pixel and asks where it came from, sampling the source bilinearly.

    Working backwards like this matters. Pushing source pixels forwards into the output leaves holes wherever the transform stretches, and a stretched perspective transform stretches a lot near the far edge. Sampling in destination space means every output pixel gets a value by construction. If the corner offsets fold the quadrilateral over itself the system has no solution, and you get an error rather than a garbled image.

    FAQ

    Can I click the corners on the image instead?

    Not yet — the offsets are numeric. The presets cover the common cases, and typing exact percentages is more repeatable across a batch than dragging would be, which matters when you are applying the same transform to twenty screenshots.

    How do I straighten a photo of a document?

    Apply the opposite of the distortion you see. If the top of the page looks narrower than the bottom, push the top corners outward — top-left X negative, top-right X positive — until the edges look parallel. It takes two or three attempts by eye; there is no automatic detection here.

    What is the difference from Skew?

    Skew is an affine shear: parallel lines stay parallel and there is no foreshortening. Perspective is projective, so it can make one edge genuinely shorter than the opposite one. If a skew looks wrong for a mockup, this is why.

    Why is the result softer than the original?

    Bilinear resampling. Every output pixel is a weighted average of four source pixels, which is unavoidable when the grid no longer lines up. Any perspective tool has this property; scaling the source up before the warp reduces it.