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. When combining crop with width or height parameters, make sure to base your crop values on the original image dimensions.

Parameters

crop · string

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

aspect_ratio · string

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

crop_gravity · string

Set the anchor point for center-based crops (Format 1 only).

Values: center, north, south, east, west, northeast, northwest, southeast, southwest

Default: center

focus_crop · string

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.

Center crop

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.

Crop from specific position

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.

Square crop

https://yourzone.b-cdn.net/image.jpg?aspect_ratio=1:1

Original	aspect_ratio=1:1

Widescreen crop

https://yourzone.b-cdn.net/image.jpg?aspect_ratio=16:9

Original	aspect_ratio=16:9

Portrait crop

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.

Northwest gravity

https://yourzone.b-cdn.net/image.jpg?crop=400,300&crop_gravity=northwest

Original	crop_gravity=northwest

South gravity

https://yourzone.b-cdn.net/image.jpg?crop=400,300&crop_gravity=south

Original	crop_gravity=south

East gravity

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.

Absolute coordinates

https://yourzone.b-cdn.net/image.jpg?focus_crop=400,300,500,400

Original	focus_crop=400,300,500,400

Relative coordinates

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:

Crop and resize

https://yourzone.b-cdn.net/image.jpg?crop=800,600&width=400

Crop with aspect ratio and quality

https://yourzone.b-cdn.net/image.jpg?aspect_ratio=16:9&quality=85

Crop and convert format

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).