在做百度智能小程序开发的时候,图片资源的引入是不可避免的。但是如果我们引入的图片体积过大就会在加载的过程中消耗更多的资源,这样势必要影响页面的整体性能,所以智能小程序也要做好图片优化。那百度智能小程序图片体积过大怎么优化呢?下面就和琳玲SEO一起来看一下吧。
一、控制图片大小
1)针对本地图片的优化
如果小程序使用的是本地图片过大的话,势必会造成小程序包的体积过大,加载时间自然就变长了,所以开发人员需要尽量压缩图片大小,可以从以下几个方面来压缩本地图片的大小。
- 如果图片不需要透明格式,建议用jpeg格式代替png格式。
- Android推荐使用webp的图片格式。由于webp格式在有损压缩的情况下,肉眼不容易看出压缩前后的变化,但是图片体积却会大大减小。需要注意的是:iOS百度App版本<11.22的是不支持webp格式的。
- 如果小程序包内有冗余或无用的图片资源,建议清除。
- 对于不重要的图片,建议延迟加载,并在完成关键图片的渲染以后再加载后续内容。
2)针对网络图片的优化
- 使用工具对图片进行压缩。
如果智能小程序使用的不是本地图片,而是网络图片时,建议对部署到CDN上的网络图片进行压缩,具体压缩方法如下:
- 从CDN静态资源服务器上获取图片资源,并且添加图片的压缩规则。
- 上传至CDN前,建议使用图片压缩工具先对图片进行压缩。
二、开启图片懒加载
开发人员可以利用百度智能小程序的image组件的lazy-load属性,开启图片的懒加载功能来优化并减少页面的加载速度。
三、使用耗费性能的属性要慎重
image组件的mode属性有13种模式,其中一种叫widthFix模式的,因为需要动态计算图片的宽度,会导致页面重绘,增加性能消耗,因此我们要谨慎使用mode属性的widthFix模式。
四、通过渐进式JPEG的使用来优化用户体验
如果你使用了渐进式JPEG,打开页面的时候会先展示整个图片的模糊轮廓,之后再随着扫描次数的增加,让图片变得越来越清晰。这样做的好处主要是在网络较慢的情况下,可以让用户先预览到图片的轮廓,在一定程度上对用户体验的提升是有很大帮助的。
以上四种方法对优化百度智能小程序图片体积有很大帮助。如果你也碰到智能小程序图片体积过大的问题,可以参考上述方法进行优化。