开发者应根据功能需要和实际显示区域的大小,选择合适的图片尺寸、图片格式和压缩比。
图片体积太大,可能导致下列后果
增加图片下载时间,导致用户看到图片时机延迟; 对用户造成非必要的流量消耗; 影响图片解码和绘制的耗时,可能更容易造成掉帧、卡顿或白屏,甚至无法正常进行滚动和页面切换(低端设备上会尤为明显); 内存占用增长,尤其是大图片和长列表中的大量图片会导致内存占用急剧上升。 图片对内存的影响
iOS 系统内存紧张时,会主动回收掉一部分 WebView。大图片和长列表中的大量图片很容易引起系统对 WebView 的回收,导致小组件白屏,严重时会触发小红书强制关闭小组件。
内存增长如果超过了限制,也会导致小组件出现白屏或黑屏,甚至整个小组件发生闪退。
widthFix/heightFix 模式会在图片加载完成后,动态改变图片的高度或宽度。图片高度或宽度的动态改变,可能会引起页面内大范围的布局重排,导致页面发生抖动,并造成卡顿。
对于页面的背景图或 banner 图,应尽量预先指定图片的尺寸,避免图片加载完成后再进行二次的尺寸调整。
可以使用懒加载优化小组件。智能小组件的image组件提供了lazy-load属性,可以开启图片的懒加载功能:
<image lazy-load="true"/>
使用 mozjpeg 不仅可以压缩 JPEG 图片的体积,还可以将图片转换为渐进式的 JPEG。 渐进式的 JPEG 图片在加载时会先展示整个图片的模糊轮廓,随着扫描次数的增加,图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下,可以预览到图片的轮廓,一定程度上可以提升用户体验