Image editing allows you to edit and distribute images on points of presence (POPs). This reduces loads on origin servers and origin traffic. Image editing allows you to resize images, crop images, add watermarks to images, and perform other operations on images based on your business requirements. The image editing feature of Alibaba Cloud CDN and the Image Processing (IMG) feature of Object Storage Service (OSS) are two separate features.
Prerequisites
A domain name is added to Dynamic Content Delivery Network (DCDN). For more information, see Add a domain name.
Common scenarios
After image editing is enabled, images are edited and cached on POPs. This reduces loads on origin servers.
Common scenario | Description |
E-commerce platforms |
|
Social media |
|
Online education |
|
Websites that provide design resources |
|
Benefits
- Accelerated delivery
After a base image is cached on POPs, the POPs directly resize the image based on requests and return resized images to clients. This improves delivery efficiency.
- Reduced loads on origin servers
If images are edited and stored on origin servers, the images consume storage and computing resources of the origin servers and increase the maintenance cost of the origin servers. After image editing is enabled, images are edited and cached on POPs. This reduces loads on origin servers.
- Improved refresh and prefetch efficiency
After a base image expires, all images edited based on the base image are expired and become unavailable. To address this issue, images are edited and cached on POPs. This solution reduces the frequency of refresh and prefetch tasks and the amount of bandwidth resources consumed by requests that are redirected to origin servers. Newly edited mages are cached on POPs to ensure the availability of base images and edited images.
- Image editing on POPs
This feature can recognize image editing parameters and edit images to adapt to different browsers and clients. It helps you meet the requirements of different users.
Limits
- Limits on base images
- Only the following image formats are supported: JPEG, PNG, WebP, BMP, GIF, TIFF, and JPEG 2000.
- The size of a base image cannot exceed 10 MB.
- The total pixels of a base image cannot exceed 16,777,216 pixels. Note If a base image is in GIF format, the product of height times width is the sum of all frames. You can use tools such as ImageMagick to view the frames of GIF images.
- Limits on edited images
- The total pixels of an edited image cannot exceed 16,777,216 pixels.
- If you want to convert an edited image to the WebP format, the total pixels of the image cannot exceed 16,777,216 pixels. The width or height cannot exceed 16,384 pixels. If a base image is a dynamic image, a static image is generated when you convert the base image to the WebP format.
Configure image editing
Usage notes
DCDN allows you to edit images on points of presence (POPs) by configuring parameters. You can pass one or more actions, such as crop
or rotate
, to the image_01
object to specify how you want to edit images. Separate multiple actions with forward slashes (/). DCDN edits images based on the order of actions. For example, image_01=resize,w_200/rotate,90
specifies that the image is resized to a width of 200 pixels, and then rotated by 90°.
Format:
image_01=action1,param_value1/action2,param_value2
Example:
image_01=resize,l_200/quality,q_90/format,webp
Add parameters to the URL of an image
You can add image editing parameters to the end of the URL of an image.
Format:
http://example.com/image_01.jpg?image_process=action,param_value
example.com
: the domain name that is accelerated by DCDN.image_01.jpg
: the name of the image.image_process
: the object to which you can pass image editing parameters.action,param_value
: the action, parameter, and value that specify how the image is edited. For more information, see Image editing parameters.
Example:
http://example.com/image_01.jpg?image_process=resize,w_200/rotate,90
Image editing parameters
You can specify one or more actions that you want to perform on an image. The following table describes the actions that you can perform on images that are cached on POPs.
Feature | Action | Description |
format | Converts images to specific formats. | |
quality | Changes the quality of images. | |
crop | Crops images. | |
resize | Resizes images. | |
| Rotates images based on the orientation properties or rotates images clockwise based on the angle that you specify. | |
| Adjusts the brightness, contrast, and sharpness of images. | |
watermark | Adds picture or text watermarks to images. | |
info | Queries image information, including the size, width, height, format, and quality |