Crop

The crop parameter removes pixels from an image. When specifying a crop, the values always start with width followed by height (for example, crop=4:3 or crop=640,480 or crop=0.8,0.4). When cropping a region of interest from an image (a.k.a., "art direction"), the x and y parameters determine the position of the sub-region of the source image, whereas the offset-x and offset-y parameters move the horizontal or vertical offset of the crop. When specifying smart cropping, content-aware algorithms attempt to crop an image to a fixed aspect ratio while intelligently focusing on the most important visual content, including the detection of faces.

Features

API Pattern

Aspect Ratio Crop
Smart cropping
Fail-safe cropping

Appending the fail-safe mode parameter safe to the crop API ensures an output image will never return an error due to the specified crop region being out of bounds. When appended, the image gets delivered as an intersection of the origin image and the specified crop region. This avoids the error entirely, but the image may not match the specified dimensions.

Parameter

Parameter Description
crop Remove pixels from an image.

Parameter Values

Value Units Description
width Pixels or Percentage The width of the image.
height Pixels or Percentage The height of the image.
width-ratio float The width ratio of the image.
height-ratio float The height ratio of the image.
x{value} Pixels or Percentage The x coordinate sub-region of the source image.
y{value} Pixels or Percentage The y coordinate sub-region of the source image.
offset-x{value} Percentage The horizontal offset of the source image.
offset-y{value} Percentage The vertical offset of the source image.
smart none Content-aware image cropping.
safe none Fail-safe crop mode.

Notes

  1. The x and y or offset-x and offset-y parameters are optional.
  2. The optional x and y or offset-x and offset-y parameters can be supplied in any order after the width and height.
  3. If no x, y or offset-x,offset-y parameters are supplied the image is cropped form the center point.
  4. The x parameter can be supplied without y and visa versa.
  5. The offset-x parameter can be supplied without offset-y and visa versa.
  6. When using aspect ratio cropping, the crop parameter must be used in conjunction with a width or height parameter (or both) in order to return the correct output image size. If no width or height are supplied the largest area of the requested aspect ratio will be returned based on the dimensions of the source image.
  7. Pixel rounding is performed on all calculations in a decimal format (with as much accuracy as possible). The final value is then rounded down.

Examples

Description HTML Demo
Crop - Crop the image to 150px by 100px. <img src="image.jpg?crop=150,100"/> Example
Aspect Ratio Crop - Crop the image to an aspect ratio of 16:9. <img src="image.jpg?crop=16:9"/> Example
Crop Sub Region - Crop the image to 150px by 100px and select the starting sub region x coordinate to be 50px and the y sub region to be 50px. <img src="image.jpg?crop=150,100,x50,y50"/> Example
Aspect Ratio Crop & Offset - Crop the image square and offset the x-axis 25% and the y-axis 50% <img src="image.jpg?crop=1:1,offset-x0.25,offset-y0.50"/> Example
Fail-safe Crop - Fail-safe crop the image to 3000x600 and select the starting sub region x coordinate to be 100px and the y sub region to be 100px. <img src="image.jpg??crop=3000,600,x100,x100,safe"/> Example
Advanced Examples (Combining Additional Parameters)
Description HTML Additional Param Demo
Aspect ratio crop (with width) - Crop the image square and resize the width to 200px. <img src="image.jpg?crop=1:1&width=200"/> width Example
Smart cropping - Trim 30% of the image, resize the width to 200px and crop the image square using content-aware image cropping. <img src="mountaineer.jpg?trim=0.30&width=200&crop=1:1,smart"/> width, trim Example