黑马程序员技术交流社区

标题: 【上海校区】移动端图片优化总结 [打印本页]

---

作者: 懒，羊羊    时间: 2019-1-3 15:25
标题: 【上海校区】移动端图片优化总结
webview中的图片，而不是native；
从图片格式来看：
　　1.色彩丰富的、大的图片切成jpg的；
　　2.尺寸小的，色彩不丰富的和背景透明的切成gif或者png8的；
　　3.半透明的切成png24。
png8的大小更小；但是尺寸小的图片，类似于icon更推荐使用scg（纯色使用iconfont）；
更小的图片格式webp，但是支持度不是很好；
所以webp 优于 jpg，jpg的大小比png更小，但只有png支持透明；
每一种图片格式都有自己的特点及适用场景；

其他方面：
尽量不要适用空的src，这将造成页面重载，尽量避免使用dataURL，因为这里没有使用图片的压缩算法，会过大；

• *** 对不同机型的分辨率和屏幕密度做适配，下载不同尺寸图片
• 增加极速模式，在2G和弱网络下面，只下载普通质量的图片，
• 增加不同图片质量的选项给用户
  

图片的预加载与懒加载；

• 图片的预加载是利用缓存，把图片预先加载到页面无法看到的地方，等到图片进入用户视野后才显示，缓存的方式只需要简单的把图片资源提前请求即可，（纯js或者利用css的background属性都可以）之后在使用时，获取同一张图片，则浏览器会直接使用缓存好的图片；预加载可以提高后续的页面性能，但会增长首页的渲染时间，一般来说首屏要尽可能快的打开，所以不使用预加载；
• 图片的懒加载可以节约流量，把一些网络资源的请求放到了后面，可以使首页渲染时间减短；
  

渐进式图片，渐进式和普通图片的大小几乎相近，更好的用户体验，开始大小框架就定好，不会像基准式图片一样，由于尺寸未设定而造成回流——提高的渲染性能

长图文展示：

• 方案一：类似微信的图片切分，一张长图分为多张展示，在加载的时候使用loading；
• 方案二：类似口碑，使用渐进式图片展示；
  

作者：Arthur同学
链接：https://juejin.im/post/5c2c32cc5188254eaa5c5920
来源：掘金

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2