All Products
Search
Document Center

Dynamic Content Delivery Network:Image editing and its benefits

Last Updated:Sep 14, 2023

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.

Note Image editing is a paid service. It is currently free of charge until further notice.

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.

The following table describes some of the common scenarios.
Common scenarioDescription
E-commerce platforms
  • Efficiently edits different styles of image to be displayed on different terminals.
  • Compresses images and their comments, changes image quality, and reduces data transfer.
  • Adds watermarks to images to protect your copyright and promote your brand.
Social media
  • Edits images to be posted on social media based on user requirements.
  • Adds watermarks to images to protect digital assets.
Online education
  • Edits images to be used in online education materials based on user requirements.
  • Allows you to choose the type of compression that you want to enable based on business requirements. This helps you balance between compression and image quality.
Websites that provide design resources
  • Efficiently edits different styles of image to be displayed on different terminals.
  • 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 offers the following 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

When you use image editing, take note of the following 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

Convert image formats

format

Converts images to specific formats.

Change image quality

quality

Changes the quality of images.

Crop images

crop

Crops images.

Resize images

resize

Resizes images.

Rotate images

  • auto-orient: automatically rotates images.

  • rotate: manually rotates images.

Rotates images based on the orientation properties or rotates images clockwise based on the angle that you specify.

Change the color of an image

  • bright: specifies the brightness of images.

  • contrast: specifies the contrast of images.

  • sharpen: specifies 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