Image Crop & Resize Tool

Here’s a simple guide you can add to your help section or FAQ.

Step 1: Upload your image(s)

You have two options:

• Drag & drop your files onto the upload area
  
• Or click the “Browse files” button and choose image files from your device
  
  

You can add multiple images at once, or add more later.

Step 2: View all uploaded images

Once uploaded, you’ll see a grid of thumbnails:

• Each thumbnail shows a small preview and the file name
  
• You can click any thumbnail to select it for editing
  
• A small X button lets you remove that specific image from the list
  
  

This makes it easy to manage multiple images in a single session.

Step 3: Select an image to edit

Click on one of the thumbnails:

• The selected image is loaded into the main canvas editor area
  
• The editor displays the image scaled to fit, with a soft gray background
  
• By default, the whole image is selected as the crop area
  
  

If you remove that image, the tool automatically switches to another image if available.

Step 4: Crop the image

To crop:

1. Click and drag your mouse over the image in the canvas area
   
2. A green rectangle appears, showing the crop area
   
3. The rest of the image dims slightly, so you clearly see what will be kept
   
4. You can drag again to define a new crop area
   
   

If you want to keep the entire image, simply don’t draw a crop area—the tool will treat the full image as the crop region by default.

Step 5: Resize the image

Below the canvas, you’ll see Resize (px) fields:

• Width (px) – desired final width
  
• Height (px) – desired final height
  
• Maintain aspect ratio – when checked, changing one dimension automatically adjusts the other to keep proportions
  
  

If you leave one of the fields empty or zero, the tool will infer it from the other dimension and the aspect ratio of the crop region.

For example:

• You crop an image and set width to 1200 with aspect ratio locked
  
• The height updates automatically to match the cropped area’s proportions
  
  

This makes it easy to create images for specific layouts without distortion.

Step 6: Choose export format

Select an output format from the dropdown:

• PNG – great for graphics, UI elements and images that need transparency
  
• JPEG – ideal for photos with smaller file size
  
  

Some implementations also expose WebP when supported by the browser.

Step 7: Download the edited image

Click “Crop, Resize & Download”:

• The tool crops the image according to your selection
  
• It resizes the result to the chosen dimensions
  
• It then triggers an automatic download with a name like
  originalname-cropped-resized.png (or .jpg)
  
  

You can repeat this process for each uploaded image, switching between thumbnails as needed.

Step 8: Reset if needed

If you want to start over:

• Click the “Reset” button to clear all files and settings
  
• Then upload new images and repeat the process