如何优化处理网页内的图片资源，提高网页加载速度？

概述

图片资源占据互联网数据传输量的60%左右，可见图片对于互联网有多么重要，特别是商城类网站，没有图片根本活不了。

我们几乎随意打开一张网页都可以看到一些图片。（别闹~用你的demo和俺来抬杠！）

一张网页加载的快慢，很大一部分因素取决于网页上图片多少和大小。

我们来换算一下~

1kb=1024 Byte（字节）

一个汉字=2个英文字母=2字节

简单说，1kb=512个汉字=1024个英文字母

一张静态网页代码加文字占用也就多说几十上百kb大小，但是网页上的一张图片可能就占用几百kb甚至几MB。

所以说，网页上图片占用数据量的比重是非常高的，网页图片资源的优化是一个绝对不可忽视的问题！

下面谈谈网页中图片资源的相关优化方法，希望对刚入门或对网页设计感兴趣的小伙伴有一定帮助。

一、压缩图片

压缩模式分为有损压缩和无损压缩

-->有损压缩

有损压缩是利用了人类对图像或声波中的某些频率成分不敏感的特性，允许压缩过程中损失一定的信息;虽然不能完全恢复原始数据，但是所损失的部分对理解原始图像的影响缩小，却换来了大得多的压缩比。

-->无损压缩

无损压缩是对文件本身的压缩，和其它数据文件的压缩一样，是对文件的数据存储方式进行优化，采用某种算法表示重复的数据信息，文件可以完全还原，不会影响文件内容，对于数码图像而言，也就不会使图像细节有任何损失。

看完定义可能你还不是很理解，这样，举个简单的栗子~

下面是一串数字

“11111000001111121111100000”

假设要对这串数字进行压缩

无损压缩：”这串数字有15个1、10个0、1个2组成“。

有损压缩：”瞧你那个认真劲儿，大概瞅着差不多就行了呗，就10多个1和0，1比0能多几个，那一个2躺在犄角旮旯里那么不显眼，不要也无伤大雅，嗯~就这样吧。

不知道这么比喻你明白了没有，可能例子举的不是很恰当，但大概原理就是如此，试想一下如果上面的一串数字变成一万个1和一万个0，中间随便找个位置插入一个2，这一个数字2对整体来说很难被发现，就算是去掉它我们感官上对这串数字也几乎感觉不到差异。

我想到这里你应该可以明白数据压缩的大致原理和有损压缩、无损压缩了吧。

图片有损压缩和无损压缩优缺点

-->有损压缩：

优点：更高的压缩比，图像体积变得更小。

缺点：丢失一部分图片信息，图像相应质量下降。

-->无损压缩

优点：图像可完全还原，图像质量不变。

缺点：压缩比较低，相对于有损压缩图片体积要大。

压缩方法：

1、使用在线压缩工具，常用的有TinyPNG、Optimizilla等

2、使用客户端软件，网上一搜一大堆质量有好有坏很多还收费。

本人推荐使用腾讯智图客户端，智图是腾讯ISUX前端团队开发的一个专门用于图片压缩和图片格式转换的平台，其功能包括针对png,jpeg,gif等各类格式图片的压缩，以及为上传图片自动选择最优的图片格式。

大品牌没得说，免费而且质量有保证！

智图页面

二、使用CSS雪碧图

CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

通常来说合并后的图片体积要小于所有单个小图标累加值。

比如合并之前是10个小图标加一起共100kb大小，合并后的一张雪碧图50kb/60kb或者更小。

-->使用雪碧图优点：减小网页图像资源体积，减少HTTP请求次数，提高网页加载速度。

-->缺点：工作量增大，维护成本高（修改或替换小图标时麻烦）。

PS:后期文章会讲到使用构建工具gulp的雪碧图插件，自动合成雪碧图，但插件局限性也很大。关于网页上小图标的优化和处理，我会在以后单独抽出一章讲解，敬请关注。

三、图片转为base64编码形式

主要应用在一些小图标上，小图标转为base64后虽然数据量增大了但是可以减少HTTP请求，提高加载速度。（大图片就别这么折腾了，那完全是在作~）

图片转base64

上图左侧是一个chrome图标图片，右侧是使用在线编码工具转换后的形式，简单说就是把图片转换成的一段“字符串”。

-->优点：减少了HTTP请求，提高网页加载速度。

-->缺点：破坏了html页面结构，数据量较原图片增大约三分之一。base64无法缓存（当然有解决方案，但意义不大）

PS:有关base64先简单讲解这么多，小编可以以后单独抽出一个篇幅详细讲解，在这里只是为大家提供个学习方向，最起码让你知道有这么个东西的存在。

三、其他优化方式

1、能用CSS写出来的别去用图片，比如纯色或渐变色的背景，可以写出来就不要切图平铺，还有一些形状规则的小图标，例如方形、圆形、三角形等。

2、能用background就不用img，（啥意思？），就是说能使用背景图片，就不要使用img标签（这是有很大区别滴！）

3、能使用png8就不使用gif，同一图片png8比gif格式体积小。

PS：background-image和img的区别，想了解的可以关注后续文章。

四、图片预加载和延迟加载技术

因为这两项技术分析起来占用篇幅很大，这里暂时只提供学习的方向，相信有这两个名词，够让你查到很多相关资料。

若是以后有需要我会展开讲解。

关于网页上图片资源的优化就先讲这么多，个人水平有限，图片优化方面可能还有很多我不知道的方案或新技术，或者我知道的优化方案现阶段已经被其他技术取代了，因为互联网发展实在太快了。只希望通过我的文章可以给对网页设计感兴趣的人提供一个学习方向，少走一些弯路。若是哪位大牛闲来无事路过此处，还望给予一些指正或建议。谢谢大家！