About Image Crop

Crop images with coordinates and preview functionality. Part of the DevTools Surf developer suite. Browse more tools in the Images collection.

Use Cases

• Crop a product photo to remove background distractions before e-commerce listing.
• Extract a specific region from a screenshot for use in documentation.
• Create a square thumbnail from a landscape photo for a social media profile image.
• Crop a team photo to isolate individual headshots.

Tips

• Use the aspect ratio lock (1:1, 4:3, 16:9) for social media images — platforms display cropped thumbnails, and wrong aspect ratios cause unexpected framing.
• Set crop coordinates by entering pixel values directly for precise cuts from measurements or design specs.
• Use the 'safe area' overlay for images destined for mobile apps — it marks the zones that may be obscured by notches, status bars, and home indicators.

Fun Facts

• The rule of thirds, used in photography and image cropping since the 1790s when it appeared in John Thomas Smith's 'Remarks on Rural Scenery', places subjects at the intersections of a 3×3 grid — corresponding to focal points the human eye naturally gravitates toward.
• Instagram's original square-only image format (2010-2015) was a deliberate constraint inspired by Lomo cameras, designed to force users to compose shots rather than crop. Non-square support was added in 2015 after user demand.
• WebP and AVIF images can be cropped without full re-encoding using metadata-only crop operations, but JPEG cropping without loss requires jpegtran's lossless crop feature on MCU-aligned boundaries.

FAQ

Does it preserve EXIF metadata after cropping?

Toggle EXIF preservation on or off. For privacy (removing location data from photos), disable EXIF. For professional workflows where camera metadata matters, enable it.

Can I crop to exact pixel dimensions?

Yes — enter target width and height in pixels. The crop area snaps to the exact dimensions. Alternatively, drag the crop handles and enter final dimensions in the size inputs.

Does it support non-destructive cropping?

The crop operation is destructive (it outputs a new file). For non-destructive workflows, use the exported coordinates with an image processing library (Sharp, Pillow) in your build pipeline.