图片加载存在的问题和原因

Posted 2021-12-12 、工藤新一

图片加载存在的问题和原因

问题一：启动页面时加载过多图片

​ 针对问题一的解决方案:优先加载(懒加载)

问题二：部分图片体积过大 （像素总数*单位像素字节数）

​ 针对问题二的解决方案 ：

​ 针对单位像素的优化，衍生出了不同的图片格式，jpeg、png、gif、webp。不同的图片格式都有自己的减少单位像素体积的算法。同时也有各自的优势和劣势，比如 jpeg 和 png 不支持动画效果，jpeg 图片体积小但是不支持透明度等。因此项目在选择图片格式上的策略就是，在满足自己需求的前提下选择体积最小的图片格式，新零售项目中已经统一使用的 WebP 格式，和 jpeg 格式相比，其体积更减少 30%，同时还支持动画和透明度。

​ 图片像素总数优化： 项目中我们使用的 lib-flexible 来对不同的移动端设备进行适配