DocsICP FilingConsole
Documentation
Home Page CDN Use Cases Best Practices Accelerate OSS resource delivery Accelerate OSS image delivery with CDN

Accelerate OSS image delivery with CDN

Updated at:
Copy as MD
Product
My Favorites

Use Alibaba Cloud CDN to accelerate the delivery of images from Object Storage Service (OSS). This solution improves access speed, reduces data transfer costs, and provides powerful analytics tools, such as monitoring queries and operations reports, to refine your business strategy.

Use cases

Note

This best practice is based on the article Use CDN to accelerate the delivery of resources stored in OSS from the Alibaba Cloud community.

使用CDN来加速OSS上存储的文件资源分发

If you run an e-commerce website, you need to not only upload and download a large number of product images but also ensure a smooth browsing experience for all users. You can store your images in OSS to save costs. To improve access speed, enhance website stability, and reduce traffic costs, you can use CDN for acceleration. CDN caches images from your OSS bucket to Points of Presence (POPs) that are geographically closest to your users. When a user requests an image, the nearest POP serves it directly instead of from the origin server. This reduces latency and improves content delivery efficiency.

Benefits

Cost savings

The unit price of CDN traffic is lower than the price of outbound traffic from OSS. Using CDN to accelerate image delivery significantly reduces costs. For example, for 1 TB of monthly traffic, if you purchase a resource plan, you can save about 78.6% on traffic costs compared to using only OSS. This reduces your monthly bill from (CNY 505 to CNY 108), excluding fees for origin requests. For more information, see Accelerate access to static website resources.

Using OSS as a CDN origin server incurs fees for CDN data transfer and OSS-to-CDN origin fetch traffic. For more information, see Billing of OSS content acceleration.

Improved user experience

CDN caches images from your OSS bucket to POPs that are geographically closest to your users. Your users can always retrieve resources from the nearest POPs, which significantly reduces website load times.

CDN also provides features for performance optimization, such as image editing. For example, you can configure automatic compression for images on CDN POPs. Compressing images reduces their size and improves access speed. For a 517 kB image, after you enable automatic image compression at 90%, the image is compressed without changing its resolution, dimensions, or format. This can reduce the image loading time by 50% (from 50 ms to 25 ms). For more information, see Optimize image access performance.

Analyze user behavior

For an e-commerce website, you can use CDN features such as monitoring queries and operations reports to analyze website traffic, including page views (PV), unique visitors (UV), and user regional distribution. This helps you understand traffic trends and sources, enabling you to adjust your business strategies.

For example, to measure the effectiveness of your advertising campaigns, you can review the Popular Referer Headers report. High traffic from a specific channel indicates that the advertising campaign is performing well. You may consider pausing campaigns with low traffic.

On the Operations Reports page of the CDN console, select Popular Referer in the left-side menu. The table on the right displays the Traffic, Traffic Ratio, Visits, and Visit Ratio of each referer source, and you can filter data by time range.

Prerequisites

Procedure

Step 1: Activate CDN and add an accelerated domain

  1. Log on to the Alibaba Cloud CDN console.

  2. In the left-side navigation pane, click Domain Names. On the Domain Names page, click Add Domain Name and configure the following parameters.

    • Domain Name to Accelerate: The domain name that users will use to access content. For example, image.example.com.

    • Business Type: We recommend that you select Image and Small File.

    • Region: Select the regions where you want to accelerate content delivery. For example, select Chinese Mainland Only.

    Note

    If this is the first time you add the domain name to Alibaba Cloud CDN, you must verify its ownership. Follow the instructions in the console to complete the verification. For more information, see Verify the ownership of a domain name.

  3. Click Add Origin Server to configure an origin server. For Origin Info, select OSS Domain. From the Domain Name drop-down list, select the OSS bucket that you want to accelerate. Keep the default values for the other parameters and click OK.

  4. After you configure the origin server, read and agree to the terms of service, and then click Next. Your request is submitted for review.

    Note

    If your accelerated domain name does not require manual review, you can proceed to the next step. You can configure Recommended Configurations based on your business needs, such as cache TTL, bandwidth caps, and page optimization. These features can improve the cache hit ratio, security, and access performance of Alibaba Cloud CDN.

  5. Wait until the Status of the domain name changes to Running. The CNAME value assigned to the accelerated domain name is displayed. In this example, the CNAME is image.example.com.w.kunlunsl.com.After the domain name is added, in the domain list on the Domain Names page, find the CNAME column of the target domain name and copy the CNAME record value for the subsequent DNS resolution configuration. At this point, the CNAME Status is displayed as To Be Configured.

Step 2: Configure a CNAME record

After you add an accelerated domain name, Alibaba Cloud CDN assigns a CNAME to it. To enable acceleration, you must add a CNAME record with your DNS provider to map the accelerated domain name to its CNAME. This redirects user requests to CDN POPs.

The following steps show how to add a CNAME record if your DNS provider is Alibaba Cloud DNS. For information about other configurations, see Configure a CNAME record.

  1. Use the Alibaba Cloud account that owns the accelerated domain name to log on to the Alibaba Cloud DNS console.

  2. In the left-side navigation pane, click Domain Name Resolution. Find the domain name that you want to manage and click Settings in the Actions column.

  3. Click Add Record to add a CNAME record.

    • Record Type: CNAME

    • Hostname: image

    • Record Value: Enter the CNAME that is assigned to your accelerated domain name, such as image.example.com.w.kunlunsl.com.

    • Keep the default values for the other parameters.

  4. Click OK.

Step 3: Configure a CDN cache policy

CDN POPs cache content based on the cache policy that you configure, such as the cache TTL. After a POP caches a file, the POP can directly serve subsequent requests for the same file. This reduces latency and improves resource access efficiency. If a requested file is not in the cache or has expired, the POP sends an origin request to the OSS bucket to retrieve the latest version of the file. You can configure the cache TTL for static resources by directory or file extension based on your business requirements.

Note

If you have already configured a cache TTL using the Recommended Configurations when adding the accelerated domain name, the default cache TTL for all resources in the directory is one month. You can adjust this setting based on your business needs.

  1. Log on to the CDN console.

  2. In the left-side navigation pane, click Domain Names.

  3. On the Domain Names page, find the target domain name and click Manage in the Actions column.

  4. In the left-side navigation pane of the specified domain name, click Cache.

  5. On the Cache Expiration tab, click Create Rule.

  6. In the Create Expiration Rule dialog box, configure a cache rule based on your requirements.

    • Type: File Extension.

    • File Extension: Enter the file extensions of the files that you want to cache. This example uses JPG files.

    • Expire In: If your resources are static files that are infrequently updated, such as images or application packages, set the cache TTL to one month or longer. This can help reduce origin requests.

      Note

      By default, when a CDN POP receives a static file from the origin server, it caches the file based on the configured cache TTL.

    • Weight: 99.

  7. Click OK.

Step 4: Optimize image access performance

You can use features such as image editing and ignore parameters to improve response times for image requests.

Image editing

The image editing feature lets you compress images directly on CDN POPs. Compression reduces image size, which improves access speed. It also offloads processing from your origin server and reduces origin requests.

Note

Enabling automatic compression may affect image resolution. Set an appropriate compression ratio based on your actual needs.

Example

  1. Upload an image to your OSS bucket. Access the image without enabling the CDN image editing feature. The image size is 517 kB and the loading time is 50 ms.

  2. Enable the CDN image editing feature.

    • Supported Image Formats: JPG

    • Automatic Compression: 90%

    • Keep the default values for the other parameters.

  3. Access the image again. The image size is reduced to 147 kB, and the loading time is shortened to 25 ms, which is a 50% improvement in access speed.

    Note

    After you enable the image editing feature, the first time a user requests an image, the CDN POP needs to process it. During this initial request, the image size decreases, but the loading time may increase. This is expected behavior. The POP caches the processed image, so subsequent requests for the same image will have a much shorter loading time.

Ignore parameters

If the URLs for the same image contain different parameters, requests may not hit the same cached file, forcing each request to go back to the origin server. By enabling the ignore parameters feature, you can configure CDN POPs to strip parameters from request URLs (the part after the question mark ?, such as user identity or channel information). The POP then uses the parameter-stripped URL to serve the cached image, which improves the cache hit ratio, reduces origin requests, and increases content delivery efficiency.

Note

If you have already configured the ignore parameters feature by using Recommended Configurations when you added the accelerated domain name, you can skip this step. For more information, see Ignore parameters.

  1. Log on to the CDN console.

  2. In the left navigation pane, click Domain Names.

  3. On the Domain Names page, find the target domain name and click Manage in the Actions column.

  4. In the domain's navigation pane, click Optimization.

  5. In the Ignore Parameters section, click Modify. Set the Mode to Retain Specified Parameters and set Delete Parameters to Yes. Keep the default values for other parameters and click OK.

(Optional) Step 5: Analyze user behavior by using operations reports and monitoring

Create an operations report

For an e-commerce website, you can create and subscribe to operations reports to analyze access patterns, such as PV/UV, user regions, and popular URLs. For example, you can use the Popular Referers report to evaluate the performance of your advertising campaigns. High traffic from a specific channel indicates that the campaign is effective, while low traffic may suggest that you should pause the campaign.

Note

You must first customize the content of an operations report before it can be generated for statistical analysis.

CDN monitoring queries

The resource monitoring feature provides reports on metrics such as access traffic/bandwidth, origin request traffic/bandwidth, number of requests, and hit ratio. You can also export these reports.

The comparison feature on the Data Transfer/Bandwidth of Requests tab lets you select two different time ranges and compare traffic data between them. This helps you monitor the performance of your website's advertising and operations.

The Resource Monitoring page also provides the HTTPCODE and Origin HTTPCODE reports. You can filter data by conditions such as Tag Filter, Domain Name, Region, ISP, and Protocol Layer, and switch between the Bandwidth and Traffic views.

Related operations

Purge the CDN image cache

If you update an image in your OSS bucket, users might still see the old version because the image is cached on CDN POPs. In this case, use the purge feature to remove the cached image from the POPs. This forces the CDN POPs to send an origin request to the OSS bucket to retrieve the updated image.

  1. Log on to the CDN console.

  2. In the left-side navigation pane, click Purge and Prefetch.

  3. On the Purge/Prefetch tab, configure a purge rule.

    • Operation: Purge

    • Operation Method: URL

    • URL: Enter the full URL of the image that you want to purge.

Example

  1. Upload an image (pic_02.jpg) to OSS and cache it on CDN for one month (calculated as 30 days, or 2,592,000 seconds). When you access the image in a browser, you can see the following information. In the Headers tab of the browser DevTools, Response Headers shows the HTTP response headers of the image resource. Key fields include: Last-Modified is Thu, 21 Mar 2024 10:19:26 GMT, which indicates the last modified time of the resource; X-Swift-Cachetime is 2592000, which indicates a cache duration of 30 days; X-Cache is HIT TCP_MEM_HIT, which indicates a CDN cache hit; Content-Type is image/jpeg; and X-Oss-Cdn-Auth is success, which indicates that CDN origin authentication succeeded.

  2. Update the image in the OSS bucket. If you access the image again from the browser, you will still see the old, cached version.

  3. In the Alibaba Cloud CDN console, purge the image URL.

  4. Access the image again in the browser. The browser now displays the updated image.

    The key fields in the response headers have changed: Last-Modified has been updated from Thu, 21 Mar 2024 10:19:26 GMT in step 1 to a new timestamp, and X-Cache has changed from HIT TCP_MEM_HIT to MISS TCP_MISS, which indicates that the CDN cache has been purged and the resource is retrieved from the origin again. The image that you access has also been updated.

Previous：Accelerate OSS resources with CDNNext：FAQ about CDN acceleration for OSS