How Optimized Image Processing Boosted Double Eleven Web Performance

Background

During the Double Eleven promotional event, the front‑end team applied a unified image‑processing pipeline to almost every picture on the site. By converting many assets to WebP or adding compression parameters, file sizes were dramatically reduced, leading to noticeable runtime performance gains.

Choosing the Right Image Format

Different formats serve different purposes:

PNG : lossless, supports transparency, but larger file size and slower loading.

JPEG : lossy, suitable for colorful photos, balances quality and size.

WebP : developed by Google, combines lossy and lossless compression, offering comparable visual quality at a much smaller size. Converting PNG/JPEG to WebP is an effective way to serve images efficiently across devices.

Not all devices support WebP, so the final pipeline combines WebP conversion with CDN‑based compression and cropping.

CDN Parameter Adjustments

The first step is to tweak basic CDN parameters for scaling and cropping.

Image Scaling and Cropping

Images are scaled by the long side while preserving the original aspect ratio, without cropping. Only dimensions that are multiples of 10 within the original width are allowed (e.g., 10×10 – 400×400). The URL suffix _200x200.jpg requests a 200 × 200 version.

Example URL:

https://s.alicdn.com/@img/imgextra/i4/O1CN01aPJNdW23khevc9KZv_!!6000000007294-2-tps-404-94.png_200x200.jpg

Image Quality Adjustment

PNG images cannot have quality parameters, but JPEGs support quality suffixes such as _q30.jpg, _q50.jpg, up to _q95.jpg. These suffixes are appended to the original URL.

https://s.alicdn.com/@img/imgextra/i4/O1CN01aPJNdW23khevc9KZv_!!6000000007294-2-tps-404-94.png_q80.jpg

WebP Format Conversion

To convert an image to WebP, simply add the _.webp suffix to the URL.

Example:

https://s.alicdn.com/@sc01/kf/H358e118c7fba46deb45690f0e483bdf5E.jpg_300x300.jpg_.webp

Additional rules such as rounded‑corner cropping exist but were not used in this release.

Practical Experience and Tips

Use PNG for images that require transparency; otherwise use JPEG. If a transparent PNG is too large, split it and apply CSS compositing.

Choose PNG for simple vector graphics to save space; use JPEG for richly colored photos.

Target a size under 155 KB for medium‑sized images; if larger, apply compression, convert to JPEG, or use quality suffixes like _q90.

Base64‑encode very small images to avoid extra requests, or use it as an offline fallback.

Special Font Handling

Two lightweight methods are recommended for custom fonts:

Upload the font file via the internal Zebra scheme and reference it in CSS.

Use the first pure‑JavaScript font‑subsetting solution on GitHub ( fontmin) to generate a subset, upload it to a CDN, and reference it with @font-face:

@font-face {</code><code>  font-family: "AlibabaPuHuiTi-2-95-ExtraBold";</code><code>  src: url("https://cube.elemecdn.com/383240/AlibabaPuHuiTi-2-95-ExtraBold/6ea6e9e710760f0f0a8f8c43800b4a69-AlibabaPuHuiTi-2-95-ExtraBold.woff") format("woff");</code><code>  font-style: normal;</code><code>  font-weight: normal;</code><code>}

Alternatively, import the font dynamically with the @ali/alimod-font-utils helper:

import {useFontLoader} from '@ali/alimod-font-utils';</code><code>const fontFamily = useFontLoader('https://g.alicdn.com/eva-assets/.../font.ttf', 'sans-serif', 'FZLANTY');

Conclusion

Effective image handling remains a core challenge in modern front‑end development. With formats like WebP offering superior compression, and with CDN‑driven scaling, quality adjustment, and responsive URL tricks, developers can significantly reduce bandwidth, improve load times, and deliver richer visual experiences across devices.