Overview
Most websites' performance bottleneck lies in images. Separating images into object storage (OSS) and then accelerating access through cdn can significantly reduce origin server pressure and improve loading speed.
This article uses Upyun (Object Storage Kodo + CDN) and WordPress as an example to introduce the complete configuration steps for an image separation architecture.
I. Architecture Principle
When users visit the website, HTML is processed by the origin VPS; static resources such as images, CSS, and JS are read from object storage and returned after CDN caching. The origin only handles dynamic requests, reducing load.
Object storage is cheaper than VPS hard drives (Upyun offers 10GB free, then about 0.29 CNY/GB/month). CDN can further reduce traffic costs.
II. Preparation
- A filed domain (for CDN acceleration)
- An Upyun account (with real-name verification completed)
- A WordPress site running normally
III. Step 1: Create an Object Storage Bucket
Log in to the Upyun console → Object Storage → Create Bucket. Name it e.g., "image-bucket", choose a storage region close to you, and set access control to "Public".
After the bucket is created, a test domain will be generated (format xxx.upyun.com). For formal use, it is recommended to bind your own domain.
IV. Step 2: Bind a Custom Domain and Enable CDN
In the Upyun CDN console, add a domain (e.g., img.baike300.com). For origin configuration, choose "Upyun Object Storage" and select the bucket you just created.
After adding, you will get a CNAME address. Go to your DNS provider and add a CNAME record. Enable HTTPS (you can apply for a free Let's Encrypt certificate).
V. Step 3: Configure the WordPress Plugin
WPQINIU is recommended (supports Upyun, Qiniu Cloud, Alibaba Cloud OSS). Search for and install the WPQINIU plugin in the WordPress backend.
Fill in the configuration:
- AccessKey / SecretKey: obtained from "Key Management" in the Upyun console.
- Bucket: fill in image-bucket.
- Domain: fill in img.baike300.com.
- File types: jpg,png,gif,webp,mp4,svg,css,js.
Check "Enable CDN acceleration" and "File renaming" (optional). After saving, newly uploaded images will be automatically pushed to object storage.
VI. Step 4: Migrate Existing Images
The WPQINIU plugin supports a "Batch Sync" feature to upload all existing local images to object storage. Note: back up the Database before executing.
After synchronization is complete, the plugin will automatically replace image URLs in articles with the new CDN addresses.
VII. Step 5: Verify the Effect
Open the website in a browser and check whether the image URLs are img.baike300.com addresses. Use developer tools to check whether loading time has decreased. The Upyun CDN console can show cache hit rate and traffic.
VIII. Frequently Asked Questions
Q: Will object storage traffic fees be expensive?
Upyun Alliance users get 10GB free CDN traffic and 10GB storage per month, which is generally enough for a personal blog. After exceeding, it is about 0.29 CNY/GB, cheaper than VPS bandwidth.
Q: If the website moves, will images still be accessible?
Yes, images are stored independently in object storage and are not affected by origin migration. You only need to reconfigure the plugin on the new VPS.
Q: HTTPS images cannot be displayed?
Check whether the CDN domain has an SSL certificate configured, and whether the domain set in the plugin includes the https:// prefix.
This architecture is suitable for image-heavy websites (blogs, e-commerce, photo albums). Recommended for experienced webmasters to try.
