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

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

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

公司网络慢，正常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这个网站；

最后编辑于：2017.12.06 06:54:35