前端性能优化之优化图片 && 优化显示图片

　　前端图片优化一直以来都是热门话题，从需求上来看，不少站点每每是图片体积大于代码体积， 图片请求多余代码文件请求， 给前端的性能带来了很大的困扰，那么应该如何解决呢？ 

 

零、 认识图片

　　咱们一般使用的图片就是gif、png和jpg了。 

　　其中，gif格式是比较老的图片格式，它的色彩效果最低（就是不清楚！！！），若是想要使用gif保存鲜艳图片会让你的网站看上去很是可怕。 可是gif有着不可忽视的优势：体积小、有着极好的压缩效果，支持动画，而且支持透明效果，虽然这个透明没有PNG格式图片支持的强大。。。 动画选择gif没有错，若是你的图片只有单调的色彩, 没有渐变色，例如只有红蓝两色，那么选择gif就再好不过了。 

　　另外，PNG图片能够说是最适合网络的图片了，优势就是 无损压缩，压缩比率很高， 可渐变透明， 几乎具有全部GIF的优势， 缺点是不如JPG格式的颜色色彩丰富， 一样的图片体积也比JPG略大，可是PNG图片应该是网站设计上最为推广的，好比Google就是一个很好的例子，它的全部站点中几乎都是使用的PNG格式， 并且8位的PNG彻底能够替代掉GIF。 

　　各方面比较：

大小比较：一般地，PNG ≈ JPG > GIF

透明性：PNG > GIF > JPG

色彩丰富程度：JPG > PNG >GIF
　

兼容程度：GIF ≈ JPG > PNG

 

1、雪碧图

　　即css sprites， 就是把不少小图片制做成一个大图，而后做为背景图片使用，定位便可。

　　优势： 很明显： 减小了大量的http请求。

　　缺点： 背景定位较为麻烦，其实不算缺点。

 

2、图片压缩

　　图片压缩是很简单的，就是无损压缩了。 

1. 优先使用png而不是GIF
2. 压缩png
3. 去掉jpg的metadata
4. 压缩gif动画
5. 尝试使用png8
6. 避免使用AlphaImageLoader
7. 压缩动态生成的图像
8. 使 favicon 更小，可缓存
9. 使用css sprites 

 

3、base64

　　base64编码的大小比原图大小更大一些，可是能够减小http请求。

 

 

4、响应式图片

　　通常咱们对于图片的设定方法都是设置图片为width: 100%， 可是若是加载的图片的实际尺寸很大，而咱们所须要的很小，那么不可避免的就会形成浪费， 因此这时就可使用响应式图片。 

　　主要用到的属性就是 srcset 和 sizes 属性。 

 

　　

 

5、延迟加载

假设个人网页很长很长，图片不少不少（好比多图慎点那种），可是我可能看了一下就没兴趣了，那是否是彻底没有必要加载后面的图片了，这个时候就要有一个延迟加载的思想。

图片延迟加载也称懒加载，一般应用于图片比较多的网页，若是一个页面图片比较多，且页面高度或宽度有好几屏，页面初次加载时，只显示可视区域的图片（非可视区域图片使用1*1的图片占位，图片大小css控制），当页面滚动的时候，图片进入了可视区域再进行加载（修改src），这样能够显著的提升页面的加载速度，更少的图片并发请求数也能够减轻服务器的压力。若是用户仅仅在首屏停留，还能够节省流量。具体的实现方法能够看一个插件，就叫lazeload。

 

 

6、 图标字体

用过bootstrap的同窗确定对方便的fontawesome图标字体印象深入，能够无损放大缩小，能够修改颜色，只要加个类名就可使用图标，感受是否是很爽🌚。优点呢。。。矢量&方便好用，不过图标没有必定的量可能不大须要，并且矢量图可能美工压力也比较大，咱们只要知道怎么用就行啦，有的时候用现成的图标减轻一下美工同窗的工做量也是极好的。能够看一下一个专门用来作图标字体的网站。

 

 

7、 SVG

 

svg做为矢量图，和iconfont对比起来优点可能就是字体可能在样式修改方面受限较多，其次字体文件通常都弄的挺大的，而后兼容性差点。svg也能够认为就是图片，使用方法也很简单。

1.直接做为图片文件引入

<img src=“gblogo.svg” onerror=“this.onerror=null; this.src=”gblogo.png“”>
//or css 
background:url(gblogo.svg)

2.将svg代码拷到html文件里

<g class=“logo” transform=“translate（0.000000，500.000000） scale（0.100000，-0.100000）” fill=“#000000” stroke=“none”>
//本质上仍是一个标签，能够定义样式
.logo:hover{
    fill： #F08000;}

 

 

 

图片显示优化

　　背景：最近所作的项目中，相似于饿了么这样的平台，就是相对简单一些，而且，对于每一件商品，都有一个详情页，必需要进入这个详情页，才能加载一个很大的图片来展现图片详情。

　　问题：因为图片比较大， 因此下载的过程会比较慢，因此出现的状况就是，刚开始只显示一个背景层，紧接着图片开始一点一点的加载出来，而不是彻底加载出来（恩，学过计算机网络的同窗应该是知道缘由的）， 这样的用户体验并非很好。

　　改进方案： 首先，固定图片外层div的高度和宽度，而后img设置为100%（宽高都是如此），背景颜色要有，这样，即便没有显示出来，也是能够看得。重要，设置图片的 onload 事件，首先要设置图片为display: none； 而后当图片onload以后，咱们再将之加载出来，而且加载时透明度能够是一个递增的过程。 代码大体以下（vue项目写的）：

 <img src="picture" alt=""  style="display: none;" v-on:load="getSomething($event)" >

 

　　js以下：

getSomething (e) {
        var target = e.currentTarget;
        target.style.opacity = 0;
        target.style.display = 'block'
        var timer = setInterval(function () {
          target.style.opacity = parseFloat(target.style.opacity) + 0.01;
          if (parseFloat(target.style.opacity) >= 0.98) {
            clearInterval(timer);
          }
        }, 30);
      }

 

　　这样，图片的显示就是一个动态的过程， 也不会有视觉上的突变，看着会比较舒服。