CDN and WebP Conversion Integration – Automatically Optimize Image Formats and Improve Loading Speed

Overview

Compared with JPEG/PNG, the WebP format can reduce file size by 25–35%, but compatibility handling is required. Combined with the cdn's edge processing capabilities, it is possible to dynamically return WebP or the original image based on client requests, without modifying origin server code.

This article introduces how to use CDN image processing features (such as Upyun, Alibaba Cloud, and Cloudflare Polish) to automatically convert to WebP.

I. Advantages and Compatibility of WebP

WebP supports lossless and lossy compression, transparency, and animation. Mainstream browsers (Chrome, Firefox, Edge, Safari 14+) all support WebP. However, older versions of Safari may not support it. Therefore, a fallback solution is needed: return a .webp file when the browser supports WebP; otherwise return the original image.

II. Solution 1: Use Upyun/Qiniu Cloud Image Processing API

Upyun and Qiniu Cloud provide real-time image processing parameters. Add !/format/webp (Upyun) or ?imageMogr2/format/webp (Qiniu Cloud) after the image URL.

Combined with CDN, you can use JavaScript in HTML to detect support and dynamically replace URLs, or use the <picture> tag:

<picture>
  <source srcset="image.jpg!/format/webp" type="image/webp">
  <img src="image.jpg" alt="example">
</picture>

This method requires no modification of the source files. It is flexible but requires modifying the front-end template.

III. Solution 2: Cloudflare Polish (Pro and Above)

Cloudflare Polish automatically converts JPEG/PNG to WebP with no configuration required. Simply enable Polish in the Cloudflare dashboard. The free plan does not support WebP conversion; it is only available on Pro and above ($20/month).

Configuration path: Speed → Optimization → Polish → select "Lossless" or "Lossy". WebP automatic negotiation: returns WebP when the browser request header contains Accept: image/webp.

IV. Solution 3: Alibaba Cloud/Tencent Cloud CDN Image Processing

Alibaba Cloud CDN, in conjunction with OSS, can enable the "Image Processing" feature and set styles (such as image/format/webp). Tencent Cloud is similar, supporting real-time processing and WebP adaptation. Additional rule configuration is required.

V. Best Practices: Lazy Loading + WebP + Fallback

Use native lazy loading (loading="lazy") to reduce initial requests.
Provide both WebP and original image resources in <picture>, letting the browser choose.
Use CDN edge processing to avoid storing two copies of files.
No need to re-upload already uploaded images; just modify the URL parameters.

VI. Example Code (JavaScript Detection Support)

function supportsWebP() {
  return new Promise(resolve => {
    const img = new Image();
    img.onload = () => resolve(true);
    img.onerror = () => resolve(false);
    img.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQABgBwlpAADcAD+/gbQAA==';
  });
}

Then replace all image URLs with the .webp version after the page loads.

VII. Points to Note

When the original image quality is good, WebP lossy compression is not noticeable. It is recommended to use lossy 80–90% quality.
Some CDNs charge for image processing by the number of requests or conversions. Pay attention to controlling costs.
WebP files cached by the CDN are stored separately. Clearing the original image cache will not automatically clear the WebP cache.

Image optimization is the most cost-effective way to improve website performance. It is recommended to implement it as early as possible.