Image Cropper
Crop images with visual drag-to-adjust controls and a rule-of-thirds overlay for composition guidance. Lock aspect ratio to presets for Instagram (1:1, 4:5), Stories (9:16), widescreen (16:9), cinematic (21:9), or crop freeform. The crop is pixel-perfect — output contains exactly the source pixels from the crop region with no resampling or quality loss.
What does this tool do?
The Image Cropper provides visual cropping with precise control. Drag corners to resize the crop area, drag the center to reposition it. Aspect ratio presets lock the crop rectangle to common proportions: free (no constraint), 1:1 square, 4:5 Instagram portrait, 3:4, 2:3, 9:16 Instagram Story/Reel/TikTok, 4:3, 3:2, 16:9 YouTube/widescreen, 21:9 cinematic. The rule-of-thirds grid overlay helps with photographic composition. Output uses exact source pixels from the cropped region — no resampling occurs, ensuring maximum quality.
How it works
Using Canvas API, the tool displays the image with an overlaid crop rectangle. User interactions (drag handles, drag center) update the crop coordinates. Aspect ratio locking maintains width/height proportion during resizing. When applied, drawImage() copies exactly the source rectangle to the destination canvas with no interpolation — this is pixel-perfect cropping. The resulting canvas is then encoded to the selected output format (JPEG, PNG, WebP, AVIF) with chosen quality settings. The original pixel data within the crop region passes through unchanged.
Features
- Drag corners or move-rectangle to adjust
- Aspect ratio presets: free, 1:1, 4:5, 3:4, 2:3, 9:16, 4:3, 3:2, 16:9, 21:9
- Rule-of-thirds composition guide
- Pixel-perfect — output is exact source pixels, no resample
- Multi-format output with quality slider
- Real-time preview
- 100% client-side
How to use
- 1
Drop an image
Any common format works. The image displays with an initial crop rectangle.
- 2
Pick aspect ratio
Lock the rectangle to common ratios or leave free. Aspect ratio constrains how the rectangle resizes.
- 3
Drag the rectangle
Move the body to reposition; drag corners to resize. Use the rule-of-thirds grid for compositional guidance.
- 4
Apply + download
Click Apply Crop, then Download. The cropped region is extracted at full original quality.
Common use cases
Social media cropping
Crop to Instagram 1:1, 4:5 portrait, or 9:16 Story ratios. Remove unwanted edges and focus on subject.
Photo composition improvement
Use rule-of-thirds overlay to position key elements at intersection points for stronger composition, then crop.
Aspect ratio standardization
Create consistent aspect ratios across a photo set for galleries, slideshows, or product catalogs.
Subject isolation
Crop to isolate subjects, remove distracting background elements, or focus attention.
Tips & best practices
- Cropping is pixel-perfect — no quality loss. But you do lose resolution (pixels) from cropped areas. Start with high resolution if you need large output
- Rule of thirds: place key elements at intersection points or along lines for more dynamic composition than centering
- For Instagram 4:5 portrait (1080×1350), use 4:5 aspect ratio. This is the max visible height in feed without cropping
- After cropping, consider running through Image Compress for optimized file size — cropped images are often re-export quality