> ## Documentation Index
> Fetch the complete documentation index at: https://bunnynet-cb9733c2-onclientmiddleware.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Cropping
> Crop images to specific dimensions with precise control over positioning
Crop images to exact dimensions with flexible positioning options. Perfect for creating thumbnails, hero images, or ensuring images fit specific layout requirements while keeping the important content in frame.
Crop operations are processed before
[resizing](/optimizer/dynamic-images/resizing). When combining crop with width
or height parameters, make sure to base your crop values on the original image
dimensions.
## Parameters
Crop the output image to specific dimensions with optional positioning.
**Format 1 (Center crop):** Specify `width,height` to crop from the center or use with `crop_gravity` to control positioning.
**Format 2 (Positioned crop):** Specify `width,height,x,y` where x and y are pixel offsets from the top-left corner.
**Unit:** pixels
Crop the image to match a specific aspect ratio while maintaining the center point.
**Format:** `width:height` (e.g., `16:9`, `1:1`, `4:3`)
**Default:** `auto`
Set the anchor point for center-based crops (Format 1 only).
**Values:** `center`, `north`, `south`, `east`, `west`, `northeast`, `northwest`, `southeast`, `southwest`
**Default:** `center`
Crop with a defined focal point that stays centered when possible.
**Format 1 (Absolute):** `width,height,x_coordinate,y_coordinate` where x,y are pixel coordinates of the focal point.
**Format 2 (Relative):** `width,height,x_relative,y_relative` where x,y are decimal values from 0.0 to 1.0.
## How it works
When you apply crop parameters, Bunny Optimizer:
1. Identifies the crop dimensions and positioning you specified
2. Extracts the selected region from the original image
3. Applies any additional transformations (resize, filters, etc.)
4. Delivers the cropped result from the edge cache
## Usage
### Basic cropping
Specify width and height to crop from the center of the image.
```bash Center crop theme={null}
https://yourzone.b-cdn.net/image.jpg?crop=300,300
```
| Original | crop=300,300 |
| ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
|  |  |
Ideal for creating square thumbnails or consistently sized previews from various source images.
### Positioned cropping
Add x and y coordinates to specify exactly where the crop should start. The coordinates represent pixels from the top-left corner of the original image.
```bash Crop from specific position theme={null}
https://yourzone.b-cdn.net/image.jpg?crop=400,300,200,150
```
| Original | crop=400,300,200,150 |
| ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
|  |  |
Perfect for extracting specific portions of an image when you know the exact location of product details, logos, or areas of interest.
### Aspect ratio cropping
Crop to a specific aspect ratio while keeping the center of the image in frame.
```bash Square crop theme={null}
https://yourzone.b-cdn.net/image.jpg?aspect_ratio=1:1
```
| Original | aspect\_ratio=1:1 |
| ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
|  |  |
```bash Widescreen crop theme={null}
https://yourzone.b-cdn.net/image.jpg?aspect_ratio=16:9
```
| Original | aspect\_ratio=16:9 |
| ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- |
|  |  |
```bash Portrait crop theme={null}
https://yourzone.b-cdn.net/image.jpg?aspect_ratio=2:3
```
| Original | aspect\_ratio=2:3 |
| ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
|  |  |
Ideal for creating consistent image proportions across different content types like social media posts, product listings, or blog headers.
### Crop gravity
Control where the crop is positioned using gravity anchors. Works with Format 1 cropping (width and height only) to snap the crop to different positions.
```bash Northwest gravity theme={null}
https://yourzone.b-cdn.net/image.jpg?crop=400,300&crop_gravity=northwest
```
| Original | crop\_gravity=northwest |
| ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
|  |  |
```bash South gravity theme={null}
https://yourzone.b-cdn.net/image.jpg?crop=400,300&crop_gravity=south
```
| Original | crop\_gravity=south |
| ------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |
|  |  |
```bash East gravity theme={null}
https://yourzone.b-cdn.net/image.jpg?crop=400,300&crop_gravity=east
```
| Original | crop\_gravity=east |
| ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------- |
|  |  |
Perfect for ensuring important content stays in frame when cropping to fixed dimensions, such as keeping subjects visible in portraits or horizons aligned in landscape photography.
Available gravity values: `center` (default), `north`, `south`, `east`, `west`, `northeast`, `northwest`, `southeast`, `southwest`
### Focus cropping
Define a focal point that the crop centers around. Unlike standard positioned cropping, focus crop ensures your point of interest stays in the middle of the cropped area.
When the focal point is too close to the image borders, Bunny Optimizer automatically adjusts the crop to maintain the specified dimensions while keeping the focal point as centered as possible.
```bash Absolute coordinates theme={null}
https://yourzone.b-cdn.net/image.jpg?focus_crop=400,300,500,400
```
| Original | focus\_crop=400,300,500,400 |
| ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- |
|  |  |
```bash Relative coordinates theme={null}
https://yourzone.b-cdn.net/image.jpg?focus_crop=400,300,0.5,0.5
```
| Original | focus\_crop=400,300,0.5,0.5 |
| ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- |
|  |  |
Use absolute pixel coordinates when you know the exact position, or relative positioning (0.0 to 1.0) for responsive focal points across images of different sizes. Ideal for user-uploaded images where you need to maintain specific focal points like profile pictures or product showcases.
## Combining with other transformations
Cropping works seamlessly with other Bunny Optimizer parameters. Crop first, then apply resizing, quality adjustments, or filters to the cropped result:
```bash Crop and resize theme={null}
https://yourzone.b-cdn.net/image.jpg?crop=800,600&width=400
```
```bash Crop with aspect ratio and quality theme={null}
https://yourzone.b-cdn.net/image.jpg?aspect_ratio=16:9&quality=85
```
```bash Crop and convert format theme={null}
https://yourzone.b-cdn.net/image.jpg?crop=600,600&format=webp
```
Remember that crop operations are processed before resizing. If you apply
`crop=800,600&width=400`, the image is first cropped to 800×600, then resized
to 400×300 (maintaining the aspect ratio from the crop).