Process images on POPs - Edge Security Acceleration - Alibaba Cloud Documentation Center

In various business contexts, you may need to resize, crop, rotate, or compress images from content sharing websites. However, initiating an origin request for each image processing task can substantially increase the number of origin requests and the cache size on POPs. Dynamic Content Delivery Network (DCDN) provides the image editing feature, which allows you to edit images and cache the edited images on POPs. This accelerates content delivery, reduces loads on origin servers, and lowers origin traffic.

Note

The image editing feature of Alibaba Cloud CDN, the image editing feature of Dynamic Content Delivery Network (DCDN), and the Image Processing (IMG) feature of Object Storage Service (OSS) are three different features.
Image editing is free of charge until further notice.
The image editing feature is in private preview. To use this feature, submit a ticket.
When you use the image editing feature, conversion between different image formats, such as JPEG to WebP, JPEG to PNG, and PNG to WebP, may result in larger image sizes. This is because different image formats use different compression algorithms. If you want to reduce image sizes, we recommend that you configure the quality parameter to reduce the image quality.

Scenarios

After you enable image editing, images are edited and cached on POPs. This reduces loads on origin servers.

The following table describes some common scenarios.

Scenario	Description
E-commerce platforms	Provides abundant image processing styles to meet different image display requirements on multiple devices, and enables efficient and simplified image editing. Allows compression of product images and image comments to reduce image sizes, which further reduces traffic costs. Supports brands as watermarks to protect copyrights and promote products.
Social media	Allows you to easily and flexibly convert your images into standard formats that you can post on social media. Supports watermarks to prevent image theft.
Online education	Edits images for online education based on user requirements. Allows you to apply compression features as needed to balance the compression costs and image quality.
Design resource websites	Provides abundant image processing styles to meet different image display requirements on multiple devices, and enables efficient and simplified image editing. Allows you to compress images without compromising the image quality to accelerate image delivery. This allows websites to provide high-resolution images.

Benefits

Image editing provides the following benefits:

Accelerated delivery
After source images are cached on POPs, client requests for images of different sizes can be directly handled on the POPs and edited images are returned from the POPs to the clients. This reduces unnecessary trips to the origin server and ensures faster response times.
Reduced loads on origin servers
Image editing on the origin server consumes a large number of storage and computing resources, which increases the maintenance costs of the origin server. DCDN supports image processing and caching on POPs, which alleviates strain on the origin server.
Improved purge and prefetch efficiency
If a source image expires, all images that are edited based on the source image also become unavailable. To address this issue, images are edited and cached on POPs. This solution reduces the necessity of frequent purge and prefetch tasks and the amount of bandwidth resources consumed by origin requests. Also, edited images cached on POPs ensure higher availability, mitigating the impact of source image expiration on content delivery.
Custom image editing on POPs
You can specify image editing parameters to edit images to adapt to different browsers and clients.

Limits

Before you use image editing, take note of the following items:

Source images
- You can use this feature to edit only images in the following formats: JPEG, JPG, PNG, WebP, BMP, GIF, TIFF, and JPEG 2000.
- The size of a source image cannot exceed 10 MB.
- The total number of pixels of a source image cannot exceed 16,777,216.
  Note
  For a GIF image, the total number of pixels is the sum of all frames. You can use tools such as ImageMagick to query the frame information about a GIF image.
Edited images
- The total number of pixels of an edited image cannot exceed 16,777,216.
- If you want to convert an image into the WebP format, the total number of pixels of the image cannot exceed 16,777,216, and neither the width nor the height can exceed 16,384 pixels. If a source image is a dynamic image, a static image is generated when you convert the source image to the WebP format.

Configure image editing

Request to enable image editing

The image editing feature is in private review. To use this feature, submit a ticket.

Enable image editing

Log on to the DCDN console.
In the left-side navigation pane, click Domain Names.
On the Domain Names page, find the domain name that you want to manage and click Configure.
In the left-side navigation tree of the domain name, click Optimization.

In the Image Editing section, turn on Image Editing and select the formats of images that you want to edit.

Note

Only images of the formats that you selected will be edited. The image editing parameters in URLs take effect only after image editing is enabled. For more information, see Use URLs to edit images.
You can enable automatic conversion to WebP, automatic rotation, and automatic compression in the DCDN console based on your business requirements.

Parameter	Description
Supported Image Formats	The image formats that you want to convert. You can select multiple formats. This parameter is required.
Automatic Conversion to WebP	After you turn on Automatic Conversion to WebP, if the Accept header contains `image/webp`, Alibaba Cloud CDN automatically converts images in other formats into the WebP format for caching. Note After you turn on Automatic Conversion to WebP, the cache hit ratio decreases within a short period of time and is gradually restored after images are converted. Do not enable this feature during peak hours.
Automatic Rotation	After you enable the automatic rotation feature, Alibaba Cloud CDN automatically rotates images. Note Automatic rotation applies only to images that have the `auto-orient` parameter. After you turn on Automatic Rotation, the cache hit ratio decreases within a short period of time and is gradually restored after images are rotated. Do not enable this feature during peak hours.
Automatic Compression	Automatic compression reduces the file size of images without the need to change the resolution, size, and format of the images. This reduces data transfer. Default value: 0. Valid values: 0: Auto compression is disabled. 1 to 100: Auto compression is enabled. For example, if you enter 90% in the Automatic Compression field, the image quality is reduced to 90% of the original quality. Note Automatic compression supports only images in the JPEG and WebP formats.

Click OK.

Use URLs to edit images

Make sure that formats of images that you want to convert are selected. For more information, see Enable image editing.

Specify parameters in the request URL to edit images based on your business requirements.

Format: http://example.com/image_01.png?image_process=action,param_value/action,param_value

Field	Description
example.com	The domain name that is accelerated by DCDN.
image_01.png	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 of the image editing operation. Separate multiple actions with forward slashes (/). DCDN performs the actions based on the order of parameters. For more information, see Image editing parameters.

Example: http://example.com/image_01.png?image_process=resize,w_200/rotate,90/format,webp
Expected result: The width of the image is changed to 200 pixels, and the height of the image is adjusted based on the original width-height ratio. Then, the image is rotated 90 degrees clockwise and converted into the WebP format.

Image editing parameters

You can also add image editing parameters to request URLs to perform more editing operations on images. DCDN allows you to add one or more image editing parameters to a request URL. The following table describes the image editing parameters.

Feature	Parameter	Description
Convert image formats	format	Converts images to specific formats.
Adjust image quality	quality	Adjusts the quality of images.
Crop images	crop	Crops images.
Resizing	resize	Resizes images.
Rotate images	auto-orient: automatically rotates images. rotate: manually rotates to specific orientations.	Rotates images based on the orientation parameter or rotates images clockwise based on the angle that you specify.
Change the colors of images	bright: the brightness of images. contrast: the contrast of images. sharpen: the sharpness of images.	Adjusts the brightness, contrast, and sharpness of images.
Watermark management	watermark	Adds picture or text watermarks to images.
Query image information	info	Queries image information, including the size, width, height, format, and quality.