Crop Images with Precision

Image coordinates use a top-left origin: X=0, Y=0 is the top-left pixel of the image. X increases going right; Y increases going down. This matches the browser's CSS coordinate system and most image editing APIs. To crop a 200×200 region starting at the centre of a 1000×600 image, you would use X=400, Y=200, W=200, H=200.

Cropping extracts a sub-region of an image — the output pixels are identical to the originals, just fewer of them. No pixel data is added or interpolated. Resizing changes the total dimensions by scaling all pixels up or down. These are fundamentally different operations: crop for composition; resize for dimensions. Use both in sequence when you need a specific crop at a specific output size.

The rule of thirds divides the frame into a 3×3 grid. Placing the subject at one of the four intersection points creates more visually engaging compositions than centring. For a 1200×800 image, the rule-of-thirds intersections are at approximately (400,267), (800,267), (400,533), and (800,533). Cropping to place a subject at one of these points is a simple way to improve photo composition programmatically.

A sprite sheet packs multiple small images into a single file to reduce HTTP requests. Extracting individual sprites requires knowing each sprite's position and size within the sheet. With exact coordinate cropping, you can extract any cell: for a 5-column sprite sheet with 64×64 sprites, the 3rd sprite in the 2nd row is at X=(2*64)=128, Y=(1*64)=64, W=64, H=64.

Every social platform has preferred thumbnail dimensions: Twitter cards use a 2:1 ratio (1200×600), YouTube thumbnails are 16:9 (1280×720), and Instagram posts are 1:1 (1080×1080). Rather than guessing, identify the focal point of your image, calculate the crop that places it according to the rule of thirds at the target aspect ratio, and enter those exact coordinates for a consistently polished result.