1. 首页
  2. 小程序开发
  3. 正文

小程序图片优化

  小程序图片优化

  第一步,控制图片大小

  针对本地图片

  由于放置在本地的图片会被直接打包到小程序包内,图片过大会导致包体积过大,加载时间变长,同时图片过大也会导致渲染时间变长,因此开发者需尽可能压缩图片的大小。

  开发者可以按照以下思路来优化图片:

  对于不需要透明格式的图片,推荐采用 JPEG 格式来代替 PNG格式。

  安卓端可使用WebP的图片格式。WebP图片格式在有损压缩的情况下,肉眼不易察觉出压缩前后的变化,但是体积却能明显缩小。

  (注意:iOS 系统下百度 App 版本 < 11.22 时不支持WebP格式)。

  确保小程序包内无冗余和无用的图片资源。

  注意默认情况下会加载,但可能之后永远不会渲染的图片,例如“轮播图”,“手风琴”和“图片画廊”。

  为了缩短渲染关键图片所需的时间,可以延迟加载不太重要的图片,并在关键图片渲染完成后再加载后续内容。

  使用工具对图片进行压缩。

  针对网络图片

  在智能小程序中,除了小程序的ICON,其他基本都会部署到 CDN 上,对于这样的网络图片,也需要进行压缩。

  开发者可以按照以下思路来压缩图片:

  通过 CDN 静态资源服务器获取图片资源,并添加图片压缩规则。

  使用压缩工具对图片进行压缩后,再上传至 CDN。

    延伸阅读

  • 微信小程序优化建议

    微信小程序优化首先是性能方面的优化,通常从以下几个方面入手。1)、页面结构微信小程序的页面结构一定要保持清晰、简洁、有条理,让人一看就能明白小程序是做什么的,才能让用户有继续访...

本文来自投稿,不代表本人立场,如若转载,请注明出处:http://www.lnbdc.com/article/3234.html

(function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6":"https://jspassport.ssl.qhimg.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6"; document.write('<\/mip-script>'); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();