How to Crop Images Online — Step by Step
- 1
Upload Your Image
Click the upload area or drag and drop any image file onto it. The cropper accepts JPG, PNG, WebP, AVIF, GIF, and BMP images up to 50 MB. Your image is loaded entirely within your browser — nothing is sent to any server. Once uploaded, the image appears in the crop workspace, where you can begin selecting your crop area immediately.
- 2
Choose an Aspect Ratio (Optional)
Before or after drawing a selection, click one of the ratio preset buttons to constrain your crop shape. The 1:1 preset creates a perfect square — ideal for profile pictures and Instagram posts. The 16:9 preset produces a widescreen rectangle used by YouTube thumbnails, presentation slides, and most modern monitors. The 4:3 ratio matches classic camera proportions and works well for print photos at 4×6 and 8×10 inch sizes. The 3:2 ratio suits standard 35 mm camera frames and is used for 4×6 and 6×9 print sizes. Choose Free if you want to draw any custom shape without constraint.
- 3
Draw Your Crop Selection
Click anywhere on the image and drag to define the crop area. A blue-bordered selection box appears over your chosen region, with a subtle rule-of-thirds grid inside to help with composition. The darkened area outside the selection shows what will be cropped away. A pixel counter in the corner of the selection shows the actual pixel dimensions that will be extracted at full resolution — not the display size.
- 4
Crop the Image
Click the Crop Image button to apply the crop. The browser Canvas API extracts the selected region from the original image at full resolution — the crop is not based on the screen preview, so there is no quality loss from display scaling. The result appears below with a preview thumbnail showing the cropped image on a checkerboard background (which reveals any transparent areas).
- 5
Download Your Result
Click Download PNG to save the cropped image. The file is named after your original image with "-cropped" appended. The output is always PNG to preserve the full quality of the crop without introducing additional lossy compression. If you need a JPG or WebP output — for example, for web use where file size matters — convert the cropped PNG using our Image Format Converter.
Aspect Ratio Guide — When to Use Each Preset
1:1 Square — Social Media Profiles and Instagram
The 1:1 square ratio is the standard for profile pictures across every major platform: Instagram, Twitter/X, Facebook, LinkedIn, TikTok, and most messaging apps. Instagram Feed posts also default to square. Product thumbnails in e-commerce catalogues frequently use 1:1 for visual consistency in grid layouts. If you are cropping a portrait photo into a headshot, square usually works well because it removes distracting background on both sides while keeping the face centred.
16:9 Widescreen — YouTube, Presentations, Banners
The 16:9 ratio is the universal widescreen standard. YouTube requires all video thumbnails to be 16:9 (1280×720 px recommended). PowerPoint and Google Slides default to 16:9. Website hero banners and email header images frequently use 16:9 to fill modern landscape-oriented screens. LinkedIn posts display at 1.91:1, which is very close to 16:9 and works without significant cropping at the edges.
4:3 Classic — Print Photos and Presentations
The 4:3 ratio matches the classic point-and-shoot camera format and standard definition video. Standard print photo sizes — 4×3 inches, 8×6 inches — use this ratio. If you are cropping photos for school yearbooks, framed prints, or presentations targeting older projectors (which still use 4:3 rather than 16:9), this preset ensures the dimensions match without guesswork. Old family photos and scanned documents often have a 4:3 or close-to-4:3 original ratio.
3:2 Camera Standard — Prints and Photography
The 3:2 ratio comes from 35 mm film photography and is the native ratio of most DSLR and mirrorless cameras. The most common print size — 4×6 inches (10×15 cm) — is exactly 3:2. When you print photos at a photo lab and specify 4×6, the lab expects a 3:2 image. Submitting an image in a different ratio means the lab will either crop it or leave white borders. If you are preparing vacation photos for printing, 3:2 is almost always the right preset.
Free — Custom Crops and Banners
Choose Free when none of the presets match your target dimensions — for example, cropping a wide panoramic banner, extracting a specific detail from a larger image, or cropping to match the requirements of a specific website template. In Free mode, draw any rectangular selection without aspect ratio constraints. If you need the result to be a specific pixel size after cropping, crop approximately the right region first, then use our Image Resizer to scale to exact pixel dimensions.
Common Cropping Use Cases
Cropping Profile Pictures and Avatars
Profile pictures on every major platform are displayed as circles or squares. Uploading a rectangular photo results in the platform auto-cropping it, often in an unflattering position. By cropping to 1:1 yourself — centred on the face — you control exactly what appears in the circle. Crop tightly enough that the face fills most of the frame; profile pictures display at small sizes (typically 30–100 px on screen), so a wide shot with a lot of background results in a face too small to recognise at standard display sizes.
Preparing YouTube Thumbnails
YouTube thumbnails must be 16:9 at 1280×720 px or larger. If you have a still frame from your video or a photo that would make a good thumbnail, crop it to 16:9 first, then resize to 1280×720 using our Image Resizer. Avoid centring the subject in the thumbnail — rule of thirds (place the subject in the left or right third of the frame) performs better in A/B testing according to YouTube creator analytics.
Removing Unwanted Backgrounds Without AI
When the background you want to remove is on one side of the image — a table edge on the right, a distracting person in the corner — simple cropping is faster and cleaner than AI background removal. Crop to exclude the unwanted region entirely. If the subject you want to keep is not near the edge but surrounded by a complex background, use our AI Background Remover instead, which handles non-edge background removal without cropping any of the subject.
Cropping for Print — Avoiding Lab Auto-Cropping
When you submit photos to an online print lab for 4×6, 5×7, or 8×10 prints, the lab crops any images that do not match the exact print ratio. This auto-crop is often centre-biased and may slice off feet, heads, or important sides of your photo. By pre-cropping to the exact print ratio (3:2 for 4×6, 7:5 for 5×7) yourself, you control what stays in the frame. For 5×7 prints (ratio 1.4:1), use Free mode and draw a 7:5 selection manually.
Extracting Details from Screenshots
Screenshots often contain tool bars, browser chrome, or irrelevant content around the key area you want to share. Crop to the specific region — a chart, a UI component, a code snippet — to eliminate the surrounding noise. Focused screenshots communicate more clearly in documentation, tutorials, and support tickets than full-page captures.
How the Browser Canvas Crop Works
Understanding the technology helps you get the best results and avoid surprises.
Display Pixels vs. Natural Pixels
Your image is displayed in a container that is narrower than the screen to fit the layout. A 4000×3000 px photo might display at 700×525 px in the crop workspace. The blue selection box is drawn in display pixels — for example, a 350×200 display-pixel selection on that image corresponds to a 2000×1143 natural pixel crop from the original. The size indicator inside the selection box shows the actual natural pixel dimensions so you can verify the crop before clicking Crop.
The drawImage() Canvas Method
The Canvas API's drawImage() method accepts source coordinates in natural image pixels. Our tool maps your selection from display coordinates to natural coordinates using the scale factor (natural width ÷ display width). It then creates a new canvas exactly as large as the crop in natural pixels and draws only the selected region onto it using drawImage(img, cropX, cropY, cropW, cropH, 0, 0, cropW, cropH). This produces a full-resolution crop with no interpolation or quality loss.
Why PNG Output Preserves Quality
The Canvas toBlob() method can output JPG or PNG. We use PNG because the crop operation should not introduce additional lossy compression on top of any existing compression in the source image. If you crop a JPG and save as JPG, the re-encoding applies JPEG quantisation again, which can introduce compression artifacts at edges. Saving as PNG is lossless at this stage — no pixel data is changed, just extracted. You can always convert the PNG to JPG with a quality setting of your choice using our Image Format Converter.
Cross-Origin and Privacy
The Canvas API has cross-origin restrictions — it cannot draw images loaded from external URLs without a CORS header. Our tool loads images as object URLs from your device (blob: URLs), which are fully local and do not trigger CORS. Your image never leaves the browser's memory. When you download the result, the PNG is generated from the canvas in memory and triggered as a download via a temporary object URL — no network request is made at any stage.