5.25秒变0.023秒:小程序图片优化全攻略

这篇具有很好参考价值的文章主要介绍了5.25秒变0.023秒:小程序图片优化全攻略。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文首发于lonjin个人博客,转载请注明出处

地址: https://lonjinup.github.io

最近在公司在写微信小程序,该小程序主要展示一些高清图片,所以图片数量非常多,而且图片尺寸也比较大,导致小程序的加载时间非常长。所以这里记录一下如何减少小程序图片的加载时间。

优化前

这里我挑选了一些项目里面比较大的图片,还有我之前保存的一些背景图,共计12张,上传到阿里云oss,然后写了一个demo去渲染图片,这里我们先看看加载时间。

5.25秒变0.023秒:小程序图片优化全攻略,小程序

pFpoHTU.png

可以看到,一旦文件大小到了1M以上,加载基本都在1秒以上了,而且加载最慢的一张图片大小为2.4M;加载耗时5.27秒。然而在这个小程序中,有非常多的瀑布流图片展示,需要加载的图片也非常多,这对于这种图片展示类的小程序来说,简直是非常糟糕的体验。下面我们就分析一下,如何提升用户体验,缩短加载时间。

分析优化

这里我总结了一些常见图片优化策略,方法如下:

5.25秒变0.023秒:小程序图片优化全攻略,小程序

pFpojp9.png

下面我们就根据总结的优化策略进行优化,具体如下:

优化1:使用webp格式的图片

首先我们知道,在小程序中是支持webp格式的图片的,所以我们可以将图片转换为webp格式,这样可以减少图片体积,提升加载速度。 公司使用的阿里云oss进行图片存储,阿里云oss是支持格式转换的,只需要在图片url后面加一定的参数即可,我们可以给图片后面加上?x-oss-process=image/format,webp即可。

// 原本图片路径:
let url =' https://lonjin.oss-cn-beijing.aliyuncs.com/weixin-test/3%20%282%2917047050403470042.png'

// 转化为webp格式的图片路径:
let url =' https://lonjin.oss-cn-beijing.aliyuncs.com/weixin-test/3%20%282%2917047050403470042.png?x-oss-process=image/format,webp'

清除缓存,刷新页面,再来看加载时间:

5.25秒变0.023秒:小程序图片优化全攻略,小程序

pFpoqkF.png

可以看到,加载时间大幅缩短,图片格式转化后,图片大小已经非常小了,最大的一张图片仅仅有730kb;随之加载时间也大幅缩短,最慢的一张图片从之前的5.27秒缩短为1.71秒,加载速度提升了3倍!其他的图片加载基本都在500ms左右,加载速度提升也是比较明显。

这里我们还需要注意一下webp图片格式的支持范围,我这里使用的uni-app做为demo,查了一下文档,支持范围如下:

Android4以上(含)、iOS14以上(含)系统内置支持webp,此时,不管web、小程序、app,也不管vue/nvue/uvue都可以直接使用webp; iOS14以下,app-vue下,iOS不支持;app-nvue/uvue下,iOS支持;微信小程序2.9.0起,配置属性webp为true时iOS支持;

所以如果考虑一些特殊情况,我们可以进行一些特殊情况下的处理。

如果文件是直接放在服务器上的,我们可以借助一些第三方工具来把图片批量转化为webp格式;比如convertio.co

优化2:根据需求设置适当的分辨率

阿里云oss支持在图片后面加上参数来设置图片的分辨率,我这里写的demo中,image标签图片宽度均为小程序图片默认宽度;即为width: 320px;,所以我们可以给图片url后面加上/resize,w_320即可,其中w_320表示图片宽度为320px

// 原本图片路径:
let url =' https://lonjin.oss-cn-beijing.aliyuncs.com/weixin-test/3%20%282%2917047050403470042.png?x-oss-process=image/format,webp'

// 设置宽度后的图片路径:
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'

清除缓存,刷新页面,再来看加载时间:

5.25秒变0.023秒:小程序图片优化全攻略,小程序

pFpoLY4.jpg

图片大小大幅度减少,最大的一张图片仅仅有15.4 kB;随之加载时间也大幅缩短,最慢的一张图片从之前的1.71秒缩短为316毫秒,加载速度提升了5倍!这时候所有图片的加载速度全部没有超过1秒,最大不超过350ms;基本上算是质的飞跃了。不过需要注意的是,图片分辨率还是需要结合业务需求进行调整的,如果要求必须高清,不建议设置太小的分辨率。不过我们可以写一个检测用户网络状态的方法,在不同的网络环境下加载不同分辨率的图片;后面我会专门来写一篇文章来实现这个功能。

优化3:使用雪碧图

雪碧图,也叫Sprite,是将多个小图片合并成一张大图,然后在页面中使用background-imagebackground-position属性来显示其中的某一张图片。这样可以减少图片的加载次数,减少图片的大小,同时减少图片的加载时间。在项目中难免会有很多小图标,我们就可以使用雪碧图的方式来使用,减少请求次数。这里我就不做展示了。

优化4:合理使用占位图片

通常情况下,为了内容的动态展示,需要通过网络请求从接口中获取图片的url。如果在网络慢的情况下,image加载图片的过程可能会非常慢,在请求完成之前页面都会因为没有数据而呈现一片空白,这是非常差的用户体验,这里我们可以借助小程序image标签上的@error @load事件来实现占位图片的展示。我们可以根据需求去封装一个LoadImage组件统一处理,上面提到的优化1优化2也可以通过定义参数实现批量添加,同时我们也可以给组件加上lazyLoad,减轻小程序加载压力。

组件具体代码如下:

<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: {
        /**
         * 占位图
         * @default /static/images/load-image.png
         */
        defaultImage: {
            type: String,
            default: '/static/load-image.png',
        },
        /**
         * 是否使用webp
         * @default false
         */
        useWebp: {
            type: Boolean,
            default: false,
        },
        /**
         * 图片的显示模式
         * @default scaleToFill
         */
        mode: {
            type: String,
            default: 'scaleToFill',
        },
        /**
         * 图片加载分辨率-宽度
         * @default 
        */
        width: {
            type: String,
            default: '',
        },
        /**
         * 是否懒加载
         * @default true
         */
        lazyLoad: {
            type: Boolean,
            default: true,
        },
        /**
         * 图片地址
         * @default 
        */
        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>

使用方式如下:

<template>
    <view class="list">
        <load-image v-for="(item, index) in list" :src="item" :lazyLoad="false" useWebp :width="320" :key="index" />
    </view>
</template>

优化后效果对比

我们再来看一下优化前后的加载时间对比:

  • 优化前:

    5.25秒变0.023秒:小程序图片优化全攻略,小程序

  • 优化后:

    5.25秒变0.023秒:小程序图片优化全攻略,小程序

我们用一张图片来做对比:


图片名称 大小 加载时间
优化前 wallhaven-we3z86.jpeg 2.4MB 5.27s
优化后 wallhaven-we3z86.jpeg 15.3KB 23ms

可以看到相对体积而言,缩小了99.4%;相对加载时间,缩短了5.25秒,在几乎不影响图片质量的情况下,极大的提升了用户体验。

总结

关于小程序的图片优化,我们可以根据业务需求以及技术支持来选择不同的方案,这里我只列出了几个最常用的方案,如果业务需求比较复杂,可以多尝试一些方案。

更多推荐

  • 2023年, 前端路上的开源总结(最新更新)

  • 低代码平台组件间通信方案复盘

  • 前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)文章来源地址https://www.toymoban.com/news/detail-793979.html

到了这里,关于5.25秒变0.023秒:小程序图片优化全攻略的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • AI绘画提示词全攻略,让你所想即所画!(附12000+图片提示词库)

    这可能是你从来没有见过的生产模式。 提示词又成为魔法、咒语,在AI时代,掌握了提示词,你可以在一分钟之内写一篇文章,做一首歌曲,生成一张精致的图片。 大多数人用不好提示词的根本原因是他没有理解提示词的运行机制。 当你输入一个红色的帽子,Stable Diffusion并

    2024年02月05日
    浏览(75)
  • 新手搭建服装小程序全攻略

    随着互联网的快速发展,线上购物已经成为了人们日常生活中不可或缺的一部分。服装作为人们日常消费的重要品类,线上化趋势也日益明显。本文将详细介绍如何从零开始搭建一个服装小程序商城,从入门到精通的捷径,帮助你快速掌握小程序商城的制作方法和技巧。 首先

    2024年02月21日
    浏览(49)
  • 小技巧大用处:微信小程序状态栏设置全攻略

    我们在使用微信小程序的时候,经常会发现小程序的状态栏与我们手机的状态栏不太一致。有时候状态栏的颜色与我们小程序的主题色不相符,有时候状态栏的文字内容也不太符合我们的需求。为了解决这些问题,我们需要对微信小程序的状态栏进行动态设置。在本文中,我

    2024年02月11日
    浏览(41)
  • 基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)

    除了使用HBuilderX工具可视化搭建项目外,DCloud官方还提供了一个脚手架用于命令行搭建项目。 uni-app项目支持 uni cli和 HBuilderX cli两种脚手架工具: uni cli:面向非HBuilderX的用户(如习惯使用vscode/webstorm的开发者),提供创建项目、编译发行等能力;在App平台,仅支持生成离线

    2024年04月16日
    浏览(76)
  • HackTheGame游戏全攻略

    游戏链接 链接: 百度网盘 请输入提取码 提取码:bu1w HackTheGame游戏的玩法: 您将扮演一个黑客的角色,接受各种各样的任务,在不被发现的情况下,使用一些工具入侵他人的电脑,服务器并完成窃取资料,粉碎文件,植入病毒等操作.您有一共有两次机会,第三次被追踪到的话,您就会被捕

    2024年02月05日
    浏览(78)
  • MongoDB 索引全攻略

    目录 一、索引介绍         1.1 单字段索引         1.2 复合索引         1.3 多键索引         1.4 主键索引         1.5 TTL 索引         1.6 地理空间索引         1.7 哈希索引         1.8 创建索引时注意事项         1.9 索引效果查看  二、索引实现原理         2.1 为

    2024年04月27日
    浏览(69)
  • Jenkins 插件安装方式全攻略

    在Jenkins 的安装向导页面中, 会有一步是否安装推荐的插件, 可以直接进行安装, 也可以跳过。 对于安装机器联网的状况, 安装插件相对方便,直接搜索插件安装, 但是也可能会出现无法在线安装的状况, 原因解析及解决方法 参考: Jenkins 在Windows下插件无法安装问题解

    2023年04月21日
    浏览(70)
  • 谷歌账号注册流程全攻略

    一、访问谷歌账号注册页面 首先,你需要访问谷歌账号注册页面。你可以直接点击此链接,或者在谷歌首页点击右上角的“登录”按钮,在弹出的登录框中点击“创建帐号”。 在注册页面,你需要填写以下个人信息: 名字:输入你的名字。 姓氏:输入你的姓氏。 用户名:

    2024年02月05日
    浏览(57)
  • Github搭建个人博客全攻略

    Github是开发者的代码仓库,一个开源和分享社区。 本文前提是已注册github账号。 假设用户名为MyName 进入个人主页(https://github.com/用户名),选择Repositories,点击New Repository name填入MyName.github.io,即MyName/ MyName.github.io ,点击Create Repository 安装Git或TortoiseGit(后者添加环境变量)

    2024年02月16日
    浏览(63)
  • 开发巴西市场全攻略,外贸人收藏

    巴西联邦共和国位于南美洲东部,是南美洲资源最丰富,经济活力和经济实力最强的国家。巴西作为拉丁美洲的出口大国,一直是一个比较有潜力的市场,亦是我国外贸公司和独立外贸人集群的地方。 2021年巴西贸易概况 ✦ 1、2021年巴西贸易创纪录 2021年,巴西的对外贸易以

    2024年02月05日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包