How to use it
- Drop a JPG, PNG, WebP, GIF, BMP or AVIF image. A box covering 80 % of it appears.
- Pick a ratio (or keep Free) and drag the box or its handles. For exact values type them into the pixel fields.
- Rotate left/right if the photo is on its side. Choose the format and quality.
- Press Crop image and download the file; the result shows the final size and ratio.
Example
A 4,032 × 3,024 px photo cropped for a profile picture: choose 1:1, type width 3,000 and the height follows; set Left to 516 and Top to 12 to centre the face. The result is a 3,000 × 3,000 px square; resize it to 400 px with the Image Resizer if a site asks for a small avatar. For a YouTube thumbnail pick 16:9 and type 1,280 × 720.
How the crop is made
The image is decoded with createImageBitmap (imageOrientation: 'from-image'), drawn onto a full-resolution canvas (rotated by the chosen quarter turns), and a preview copy capped at 2,048 px is shown inside the react-image-crop component. The crop box is stored as integer pixels in the full image; the preview receives it as percentages, so the on-screen zoom never affects precision. On export, drawImage(source, x, y, w, h, 0, 0, w, h) copies exactly the selected pixels – no resampling – and canvas.toBlob() encodes them. JPEG output is re-compressed at the chosen quality and loses transparency (filled white); PNG is lossless.
Limits: canvases above roughly 40 megapixels (lower on iOS Safari) cannot be created, so very large photos may fail to open; HEIC is refused because browsers cannot decode it. Metadata (EXIF, GPS) is not copied into the output.
Sources: react-image-crop on GitHub, MDN – CanvasRenderingContext2D.drawImage() (source rectangle form).
Common crop sizes
| Use | Ratio | Typical pixels |
|---|---|---|
| Profile picture / Instagram post | 1:1 | 1,080 × 1,080 |
| Instagram portrait | 4:5 | 1,080 × 1,350 (custom 4:5) |
| Stories / Reels / TikTok | 9:16 | 1,080 × 1,920 |
| YouTube thumbnail, 16:9 video | 16:9 | 1,280 × 720 |
| Prints 6 × 4 in / 15 × 10 cm | 3:2 | 1,800 × 1,200 at 300 dpi |
Questions
- Why do the pixel fields change when I type a width with a ratio selected?
- With a ratio locked the height is derived from the width (and vice versa) so the box always matches the ratio. Switch to Free to set both sides independently.
- Does cropping reduce quality?
- The selected pixels are copied one-to-one. Saving as PNG keeps them exact; saving as JPEG or WebP re-encodes once at the chosen quality (92 % by default), which is visually lossless.
- Can I crop several images at once?
- No: a crop box is specific to one picture. For batch operations with one setting use the Image Resizer, Rotator or Converter.