Product images are the static resources with the largest reverse overseas online shopping traffic. The original images of Taobao products are large in size, which leads to slow loading during cross-border transmission. At the same time, these original images are extremely vulnerable to image theft by external sites. This article presents lightweight solutions from three aspects: compression, format adaptation, and anti-theft chain.
Automatic image compression: When synchronizing product images from the backend, the system automatically performs lossless compression to reduce the image size without affecting visual clarity. The frontend automatically adapts to the WebP format, and for older browsers that do not support WebP, it automatically downgrades to JPG.
Multi-terminal size adaptation: Automatically generate three sizes: original image, thumbnail, and list thumbnail. Load thumbnails for product lists and standard images for detail pages, avoiding the waste of bandwidth by loading oversized original images on detail pages.
Anti-theft chain configuration: CDN configuration includes Referer blacklist and whitelist, allowing access to image resources only from the domain of this website. Additionally, dynamic time-sensitive signature URLs are added to images, ensuring that image links are time-sensitive and automatically expire after a certain period. This prevents long-term image theft even if the image URL is stolen.
The entire solution eliminates the need for complex front-end modifications, with the back-end synchronization automatically processing images. This effectively conserves overseas bandwidth, enhances page loading speed, and simultaneously eradicates the issue of traffic loss due to unauthorized use of product images across the entire website. Given the persistently high traffic consumption of cross-border product images, a standardized image processing solution has become an industry consensus. Taocarts' image processing platform integrates comprehensive capabilities such as compression, multi-format adaptability, and time-sensitive anti-theft links. Its underlying processing logic aligns with the approach outlined in this document, making it a valuable reference for building cross-border image services.