Append a cropping parameter to a CDN request URL to trim, reshape, or reframe an image on the fly—without modifying the source file.
The image editing feature of Alibaba Cloud CDN, the image editing feature of DCDN, and Image Processing (IMG) of Object Storage Service (OSS) are three independent features. Image editing is free of charge until further notice.
How it works
Set the image_process query parameter to crop or circle, followed by the options that define the crop area. The CDN edge node processes the image before delivering it to the client.
https://example.com/image.png?image_process=crop,w_400,h_300All four cropping modes use the same image_process entry point. The mode is determined by the options you pass.
Parameters
The following parameters apply to the crop action.
If any parameter is set to a negative value, the image is returned at its original size.
| Parameter | Description | Default |
|---|---|---|
w |
Width of the cropped area, in pixels. The total pixel count of the output image cannot exceed 16,777,216. | 0 |
h |
Height of the cropped area, in pixels. | — |
x |
X coordinate of the cropped area. | Top-left corner of the image |
y |
Y coordinate of the cropped area. | Top-left corner of the image |
g |
Anchor position in a 3 by 3 grid. Defines which tile's top-left corner to use as the crop origin. | — |
Grid positions (g parameter)
The image is divided into a 3 by 3 grid of nine tiles. Each position value refers to the top-left corner of that tile.
| Value | Position |
|---|---|
nw |
Top-left |
north |
Top-center |
ne |
Top-right |
west |
Middle-left |
center |
Center |
east |
Middle-right |
sw |
Bottom-left |
south |
Bottom-center |
se |
Bottom-right |
Crop by grid position
Crop a fixed-size area anchored to one of the nine grid positions. Use this when you want a consistent crop region regardless of the image dimensions—for example, to extract a bottom-right thumbnail.
https://example.com/image01.png?image_process=crop,w_200,h_200,g_seThis crops a 200×200 area anchored to the bottom-right tile (se).
Crop from the center
Crop equally from all four sides to produce a centered region. Pass mid with w and h.
https://example.com/image01.png?image_process=crop,mid,w_400,h_200Crop by coordinates
Crop a specific region by providing the lower-left corner coordinates and the crop dimensions.
https://example.com/image01.png?image_process=crop,x_10,y_10,w_400,h_200This crops a 400×200 region starting 10 pixels from the left and 10 pixels from the top.
Crop in a circle
Crop the image into a circle by specifying the radius. The radius cannot exceed half the length of the shorter side of the source image.
https://example.com/image01.png?image_process=circle,200Usage notes
Format conversion may increase file size. Converting between formats (for example, JPEG to WebP, JPEG to PNG, or PNG to WebP) can produce a larger output because different formats use different compression algorithms. To reduce output size after conversion, add the quality parameter to lower image quality.