从品牌网站建设到网络营销策划,从策略到执行的一站式服务
创新互联建站导读:本文给出了优化小程序页面图片优化的方案,如果你的小程序页面也存在图片过大的问题,那就快按照本文的方法优化下吧。另外,这些图片优化的思路在普通网站页面上也是实用的,大家可以根据具体情况去优化。以有效提升页面加载速度。
我们提供的服务有:网站建设、成都网站设计、微信公众号开发、网站优化、网站认证、岱山ssl等。为上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的岱山网站制作公司
图片和视频是影响页面加载的重要因素,如果处理不好会使得页面加载延迟,网站一样,小程序也是一样。那么小程序的图片优化应该怎么做呢?本文转载了百度搜索官方给出的图片优化建议,大家可以参考下。
在智能小程序开发的过程中,经常需要引入图片资源,如果图片使用不当(图片数量过多、体积过大的图片),在加载时会消耗更多的系统资源,从而影响整个页面的加载时长,因此做好图片优化非常重要。
(1)针对本地图片
由于放置在本地的图片会被直接打包到小程序包内,图片过大会导致包体积过大,加载时间变长,同时图片过大也会导致渲染时间变长,因此开发者需尽可能压缩图片的大小。
开发者可以按照以下思路来优化图片:
对于不需要透明格式的图片,推荐采用 JPEG 格式来代替 PNG格式。
安卓端可使用WebP的图片格式。WebP图片格式在有损压缩的情况下,肉眼不易察觉出压缩前后的变化,但是体积却能明显缩小。
(注意:iOS 系统下百度 App 版本 < 11.22 时不支持WebP格式)。
确保小程序包内无冗余和无用的图片资源。
注意默认情况下会加载,但可能之后永远不会渲染的图片,例如“轮播图”,“手风琴”和“图片画廊”。
为了缩短渲染关键图片所需的时间,可以延迟加载不太重要的图片,并在关键图片渲染完成后再加载后续内容。
使用工具对图片进行压缩。
(2)针对网络图片
在智能小程序中,除了小程序的ICON,其他基本都会部署到 CDN 上,对于这样的网络图片,也需要进行压缩。
开发者可以按照以下思路来压缩图片:
通过 CDN 静态资源服务器获取图片资源,并添加图片压缩规则。
使用压缩工具对图片进行压缩后,再上传至 CDN。
开发者可以使用懒加载优化小程序。智能小程序的image组件提供了lazy-load属性,可以开启图片的懒加载功能:
image组件的mode属性提供了 13 种模式,其中widthFix模式是其中一种,作用是保持图片宽度不变,高度自动变化,并保持宽高比不变。由于widthFix模式需要动态计算图片的宽度,导致页面的重绘,因此应谨慎使用mode属性中的widthFix模式。
在打开渐进式 JPEG 时,会先展示整个图片的模糊轮廓,随着扫描次数的增加,图片变得越来越清晰。JPEG格式的主要优点是在网络较慢的情况下,可以预览到图片的轮廓,一定程度上可以提升用户体验。
以上就是优化小程序页面的图片来提升加载速度的主要方案啦,如果你的小程序页面也存在图片过大的问题,那就快按照以上方法优化下吧。另外,这些图片优化的思路在普通网站页面上也是实用的,大家可以根据具体情况去优化。以有效提升页面加载速度。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图