网页图片多，真的慢了许多

起因

---

那天同事说我自己切图切得太仔细，效率慢了许多，有些地方可以直接用图，仔细思量了一下，这是个专题页面，主要用来展示，没有交互，直接用图，不仅保持了样式的不便，效率也提升不少。说干就干，切完之后，传到服务器上一测试，真慢！

![Q]3_BVBD0~C8)WWUC)HBWRK.png](http://upload-images.jianshu.io/upload_images/5199061-f6eeec77b75bc9ce.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

分析了一下体验慢的原因：

• 公司网络慢，正常chrome下载软件的速度在300kb;
• 图片请求要在html内容到达后才能发出，文本内容的演示被滞后了；
• 网页中的图片最大的是背景图为223kb,本身比较大，
  ![]WR9M$]{O5HT05FCGJ85XSF.png](http://upload-images.jianshu.io/upload_images/5199061-27ccb9119bcd65a6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  这个图片的下载时间达到了1.57s!!

反思:

• 只要不需要用图片的，尽量不用图片，这样在网络差的情况下，也能让用户尽可能浏览到网页的内容；
• css中使用背景图下载到本地，需要三个步骤 1 html 下载--》css下载--》image，能用img 不适用css- background ，css中使用图片小的图片，考虑使用data-URL 内联到css中；
• html中比价小并且多的图片考虑使用data-URL；
• 使用图片之前，使用压缩工具压缩一下，一般可以压缩大小60%以上，效果明显，损失度不高，之前一直使用tinypng.com这个网站；