Process images on POPs - Dynamic Content Delivery Network

Original images on content sharing websites need to be resized, cropped, rotated, or compressed based on business requirements. If an image is retrieved from the origin server each time the image is edited, loads on the origin server and cache on points of presence (POPs) increase. 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 a paid service. It is free of charge until further notice.
The image processing feature is in private review. To use this feature, submit a ticket.

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

Common scenario	Description
E-commerce platforms	Efficiently edits different styles of images for display on different devices. Compresses images and image comments, changes image quality, and reduces data transfer. Adds watermarks to images to protect your copyright and promote your brand.
Social media	Edits images based on user requirements for posting on social media. Adds watermarks to images to protect digital assets.
Online education	Edits images for online education based on user requirements. Allows you to select the type of compression that you want to enable based on your business requirements. This helps you balance between compression and image quality.
Websites that provide design resources	Efficiently edits different styles of images for display on different devices. 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 a source image is cached on POPs, the image is resized based on requests and the resized image is directly returned to clients. This improves image distribution.
Reduced loads on origin servers
If images are edited and stored on origin servers, the images consume the storage and computing resources of the origin servers and increase the maintenance cost of the origin servers. After you enable image editing, images are edited and cached on POPs. This reduces loads on origin servers.
Improved refresh and prefetch efficiency
After a source image expires, all images that are edited based on the source 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 images are cached on POPs to ensure the availability of source 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. This helps meet the requirements of different users.

Limits

When you use image editing, take note of the following limits:

Limits on source images
- Only the following image formats are supported: JPEG, JPG, PNG, WebP, BMP, GIF, TIFF, and JPEG 2000.
- The size of a source image cannot exceed 10 MB.
- The total pixels of a source image cannot exceed 16,777,216 pixels.
  Note
  If a source image is in the GIF format, the product of height and the 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 of the image cannot 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 processing feature is in private review. To use this feature, submit a ticket.

Enable image processing

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.
Resize images	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.
Manage image watermarks	watermark	Adds picture or text watermarks to images.
Query image information	info	Queries image information, including the size, width, height, format, and quality