Optimizing Image Loading in WeChat Mini Programs: WebP Conversion, Resolution Adjustment, Sprites, and Lazy Loading

Background

The author noticed that a mini‑program displaying many high‑resolution pictures suffered from long load times, with images larger than 1 MB taking over a second and the largest (2.4 MB) taking 5.27 seconds to load.

Optimization Strategies

1. Convert images to WebP

WebP is supported in WeChat mini‑programs; adding ?x-oss-process=image/format,webp to the OSS URL converts the image on the fly. After conversion the largest image dropped to 730 KB and the slowest load time fell from 5.27 s to 1.71 s (≈3× faster).

// Original image URL
let url = ' https://lonjin.oss-cn-beijing.aliyuncs.com/weixin-test/3%20%282%2917047050403470042.png'

// WebP‑converted URL
let url = ' https://lonjin.oss-cn-beijing.aliyuncs.com/weixin-test/3%20%282%2917047050403470042.png?x-oss-process=image/format,webp'

2. Adjust image resolution

OSS can resize images by appending /resize,w_320 to the URL, forcing a width of 320 px. This reduced the largest image to 15.4 KB and the slowest load time to 316 ms (≈5× faster).

// Original image URL with WebP
let url = ' https://lonjin.oss-cn-beijing.aliyuncs.com/weixin-test/3%20%282%2917047050403470042.png?x-oss-process=image/format,webp'

// URL with width 320 px
let url = ' https://lonjin.oss-cn-beijing.aliyuncs.com/weixin-test/3%20%282%2917047050403470042.png?x-oss-process=image/format,webp/resize,w_320'

3. Use CSS sprites

Combining multiple small icons into a single sprite image and displaying them with background-image and background-position reduces request count and total image size.

4. Apply placeholder images and lazy loading

By handling @error and @load events on the image tag, a placeholder can be shown while the real image loads. The author provides a reusable LoadImage component that supports optional WebP conversion, custom width, and lazy loading.

<template>
    <view class="loadImage-wrapper">
        <image v-if="isLoading" :src="defaultImage" :mode="mode" :lazy-load="lazyLoad" />
        <image :class="[isLoading ? 'before-load' : '']" :src="imageUrl" :mode="mode" :lazy-load="lazyLoad"
            @load="imageLoad" />
    </view>
</template>
<script>
export default {
    props: {
        defaultImage: { type: String, default: '/static/load-image.png' },
        useWebp: { type: Boolean, default: false },
        mode: { type: String, default: 'scaleToFill' },
        width: { type: String, default: '' },
        lazyLoad: { type: Boolean, default: true },
        src: { type: String, default: '' }
    },
    data() { return { isLoading: true } },
    methods: { imageLoad() { this.isLoading = false } },
    computed: {
        imageUrl() {
            let url = this.src + '?'
            this.useWebp && (url += 'x-oss-process=image/format,webp')
            this.width && (url += '/resize,w_' + this.width)
            return url
        }
    }
}
</script>
<style lang="scss" scoped>
.loadImage-wrapper .before-load { width:0; height:0; opacity:0; }
</style>

After‑Optimization Results

Comparing before and after:

Largest image size reduced from 2.4 MB to 15.3 KB (≈99.4 % reduction).

Loading time dropped from 5.27 seconds to 23 milliseconds (≈5.25 seconds saved).

Most images now load within 350 ms, providing a much smoother user experience.

Conclusion

By converting to WebP, resizing via OSS, employing sprites, and adding lazy‑load placeholders, developers can dramatically improve image loading performance in WeChat mini‑programs without sacrificing visual quality, and the provided LoadImage component makes these optimizations reusable across projects.