> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ecomwize.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Image Cropping

> Crop and resize images directly in the builder with the built-in image cropping tool.

EcomWize Builder includes a built-in image cropping tool that lets you crop, resize, and reframe images without leaving the builder. Cropped images are automatically converted to WebP format for optimized file sizes and saved to your media library.

## Opening the Image Cropper

<Steps>
  <Step title="Select an image element">
    Click on any image element in a section on the canvas.
  </Step>

  <Step title="Open the crop tool">
    Click the crop icon in the image toolbar that appears. The Image Crop modal opens with your image loaded.
  </Step>
</Steps>

<Frame caption="The image cropping tool with a photo loaded for cropping.">
  <img src="https://mintcdn.com/ecomwize/lzHHkkDEjyGaRyRC/images/image-cropper.png?fit=max&auto=format&n=lzHHkkDEjyGaRyRC&q=85&s=db50dfa09bd3e91695a53a4169a625ae" width="3444" height="1920" data-path="images/image-cropper.png" />
</Frame>

The cropper loads your image in a full-size canvas where you can adjust the crop area.

## Using the Cropper

The image cropper provides a canvas-based interface for precise cropping.

### Basic Cropping

* **Drag the crop area** -- Click and drag within the image to reposition the crop frame.
* **Resize the crop area** -- Drag the edges or corners of the crop frame to adjust the size.
* **Zoom** -- Use pinch-to-zoom or scroll to zoom in and out on the image.
* **Pan** -- Click and drag the image to reposition it within the crop frame.

## Saving Cropped Images

<Steps>
  <Step title="Adjust the crop">
    Position and size the crop frame to capture the area you want.
  </Step>

  <Step title="Preview the result">
    Review the crop area to make sure it captures the right portion of the image.
  </Step>

  <Step title="Click Save">
    Click the **Save** (checkmark) button to save the cropped image.
  </Step>

  <Step title="Automatic processing">
    The cropper extracts the selected area from the canvas, converts it to WebP format, and uploads it to your media library.
  </Step>

  <Step title="Applied to section">
    The cropped image is automatically applied to the image element you originally selected, replacing the uncropped version.
  </Step>
</Steps>

## WebP Conversion

Cropped images are automatically saved in WebP format, regardless of the original image format. This provides:

* **Smaller file sizes** -- WebP compression reduces file sizes significantly compared to JPEG or PNG
* **Faster loading** -- Smaller images load faster on your published Shopify pages
* **Consistent format** -- All cropped images use the same format for uniformity

## Before and After

When you open the cropper, you see the full original image. As you adjust the crop frame, only the selected area will be saved. The original image is not modified -- a new cropped version is created and uploaded as a separate file in your media library.

<Tip>
  Since cropping creates a new file, your original image remains in the media library untouched. You can always go back to the original and crop it differently if needed.
</Tip>

## Common Use Cases

<AccordionGroup>
  <Accordion title="Cropping product photos">
    Remove unnecessary background from product photos to create cleaner, more focused images. Crop tightly around the product for detail shots, or leave more space for lifestyle context.
  </Accordion>

  <Accordion title="Adjusting hero banner images">
    Hero sections often need wide, landscape images. Crop your images to a wider proportion for full-width hero banners.
  </Accordion>

  <Accordion title="Reframing screenshots">
    If you are using screenshots or UI images, crop out unnecessary browser chrome, toolbars, or whitespace to show only the relevant content.
  </Accordion>
</AccordionGroup>