图像优化(前端图片优化)

WEB图像优化
为了提上网站的性能，对网站的图片进行高效的压缩，是非常必要的，在不断开发杀手级功能的同时，确保所有引入的资源都是最精简的，图像优化就是这样一项工作。

长久以来，大家认为网站的性能应该包含哪些功能是一个商业问题而非技术问题，所以就算页面懂大小总响应时间影响极大，在性能方面也很少讨论，足够得到重视。

网页的响应时间几乎和其大小完全关联，在典型的网页中，图像的大小比重还是比较大的，重要的是，在不删减功能的前提情况下提升性能，图像优化是最易实施的方案。

在ALexa的全球排行中前10位的网站中，图像在整个页面中大小所占的比重。

（图）
1两步实现简单图像优化
为了让图片优化工作更简单些，可以拆分为两个步骤，每个步骤都属于网站开发过程中的不同的工作者。

在开始对图像进行优化之前，首先要确认图像的色彩数、分辨率和清晰度。

对这几个参数的修改有损优化，同时也影响整个图像的质量。

图像也许可以拥有更少的颜色，对于JPEG来说，可能意味着减少对图像的编码。

对JPEG来说，虽然60%-70%的质量是公认的标准，但确实有些图像或是背景需要更高的或是更低的质量，如何选择根据设计师的创意来决定。

一旦决定了需要什么质量的图像，就可以利用无损压缩技术尽可能地消减图像的大小。

和上一步不同的是，这一步需要更系统化的解决方案，可以借助很多优秀的开源图像优化工具。

2图像格式
制作最优化的图像的第一步，就是理解广泛的应用在WEB上的3种图像格式——JPEG,PNG,GIF的特点，再根据实际的情况来选择合适的格式。

2.1背景
图像VS 照片
不管使用哪种图像格式，优化的方法取决于图像的具体类型：
图形
网站的LOGO、草图、大部分的图片动画和图标都属于图形。

这些图像通常由连续的线条或是其他尖锐的颜色组成，颜色数量相对较少。

照片
照片通常是有百万数量级的颜色，并且包含平滑的颜色过度和渐变，比如相机拍摄的照片，绘画作品的照片。

就图像的格式而言，GIF通常是用来现实图型，而JPEG更适合显示照片。

PNG两者都适合，甚至用调色板PNG现实图形比GIF 会更好些。

像素和RGB
图像是由像素组成，像素是图像的最小单元，然而像素又是由不同颜色模型描述出来，RGB 就是颜色模型的一种。

（略RGB原理）
真彩色图像VS 调色板图像格式
使用RGB颜色模型可以展示1600万种颜色即256*256*256（或2的24次方）种组合。

支持如此多的颜色的图像格式就是真彩色图像格式，比如JPEGH和真彩类型的PNG.
为了在存储图像信息是节省一些空间，有一项技术是讲图像中的各种不同的颜色提取出来建立一个表，这个表通常叫做调色板（称为索引）。

有了这个颜色表，就可以通过将调色板中的条目和每个像素从新匹配，达到重新绘制整个图像的目的。

调色板可以包含任意的RGB颜色值，但是最经常使用的调色板图像格式——GIF和PNG8。

这两种格式限制调色板中最多只能包含256中颜色。

这不是说只可以定义从256种一定义好的颜色中选择，恰恰相反，是从1600万种颜色中选择需要的颜色值，但图像中最多只能包含256种颜色。

透明和Alpha通道（RGBA）
RGBA并非另一种截然不同的颜色模型，而是在RGB的基础上做了扩展，额外的成分A代表了Alpha透明，只的范围从0-255。

Alpha通道描述了透过像素可以看到下面内容的程度即透明度。

隔行扫描
当网速很慢时，大图像会随着下载的进度逐行显示，从上到下每次显示一行，缓慢地从上到下递进。

为了提高用户体验，部分的图像格式支持对那些连续采样的图像进行隔行扫描。

隔行扫描可以让用户在完整下载图像之前，看到图像的一个粗略版本，从心里上消除了页面被延迟加载的感觉。

2.2不同格式图像的特性
GIF
GIF是图形交换格式（Graphics Interchange Format）的缩写，是一种调色板图像格式。

透明
GIF允许一个二进制（是/否）类型的透明，每个像要么是完全透明（不包含颜色）要么是完全不透明（包含一个单色）。

这就意味着它不支持Alpha(可变的)透明，取而代之的是，调色板中某个颜色可以被标记为表示透明，而透明像素则会被分配为这个颜色直。

所以，如果GIF设置了透明，那么就会“消耗”一个调色板的条目。

动画
GIF格式支持动画。

包含动画的图像由若干帧构成，就像图像同时包含在一个文件中一样。

大家普遍认为GIF动画很烦人，是以为在网络发展的初期GIF 被滥用了。

GIF动画现在是有些应用，比如广告条（虽然在现在这已经是Flash的天下），还有在在富互联网应用（RIAs）中出现的“加载中”指示符。

无损
GIF是无损的，也就是说可以任意打开一个GIF文件，做一些修改，保存关闭时不会损失任何的质量。

逐行扫描
当生成GIF文件时，会使用一种压缩算法（叫做LZW）来减少文件的大小。

但压缩GIF 时，会从上到下一行一行地对像素进行扫描。

这种情况下，当图像在水平方向有很多重复的颜色时，可以获得更好的压缩效果。

比如，一张500*10像素的图像（500px款10px高），图像上包含一些条文，就是说水平方向是由相同的颜色线条组成，将此图旋转90度后（10px 宽500px高）。

其垂直方向是由相同的颜色的线条组成，此后者的文件大于前者。

隔行扫描
GIF支持可选隔行扫描，
由于GIF256色的限制，所以不适合用来显示照片，照片所需要的数量远远大于这个数量级。

GIF更适合用来显示图形（图标、LOGO、图标），但PNG8是用来显示图形的最佳格式（正如文章的后节所述）。

GIF格式中使用的LZW的算法。

在以前受专利保护的，但是这个专利已在2004年过了保护期，现在可以自由使用GIF图形。

JPEG
JPEG的意思是联合图像专家小组（Joint Photographic Experts Group），也就是开发了这个标准的组织名称。

JPEG是存储的实际标准。

考虑到人类眼睛对颜色和光线强弱的感知，这种格式通过各种技术来减少显示图片所必须的信息，所以它能在经过高度压缩的文件中存储高分辨率的图像。

有损
JPEG是一种有损压缩格式，用户可以设置自定义质量级别，这个级别决定了有多少图像的信息被丢掉。

质量级别的从0到100，但是就算设置了100，也同样会有一定程度的质量损耗。

当要对某个图像进行多项编辑时，最好使用无损的图片格式来保存中间结果，然后在完成所有的修改后另存为JPEG格式。

否则将会在每次保存是都损耗一些质量。

但有少部分操作是无损的，比如
旋转、
裁切、
翻转、
从标准模式切换到渐进模式，反之亦然。

编辑图像的元数据
透明和动画
JPEG不支持透明或动画。

隔行扫描
除了默认的标准JPEG(Baseline JPEG)，还有一种渐进JPEG（Progressive），支持隔行扫描。

Internet Explorer 不会逐步地渲染渐进JPEG图像，而是在图像下载完才完全显示。

JPEG是WEB上用来存储照片的最佳格式，也被广泛应用在数码相机中。

然而，这个格式不适合用来存储图像，因为有损压缩方法将线条和清晰的颜色过度都变成了“色块”即因高度压缩导致颜色丢失。

PNG
为了引补GIF格式的缺点并避开LZW算法的专利，PNG(Portable Network Graphics，便携式网络图片)应运而生。

实际上，大家开玩笑说PNG代表“PNG is Not GIF”的递贵缩写。

真彩色和调色板PNG格式
PNG格式有几种子类型，但大致分为两种：调色板PNG和真彩色PNG格式。

可以使用调色板PNG来代替GIF格式，使用真彩色PNG格式来代替JPEG格式。

透明
PNG支持完全的Alpha透明，在IE6下会出现两种奇怪的问题，后面提到。

动画
虽然已有相关的实验和实际的应用存在，但到目前为止，针对动画PNG格式，还没有跨浏览器的解决方法。

无损
与JPEG 不同的是，PNG是一种无损压缩的图像格式，即多次编辑不会降低质量。

这使得用真彩PNG来保存JPEG的修改过程中间的产物非常合适。

逐行扫描
和GIF格式一样，相对于那些垂直方向有重复的颜色图像来说，PNG水平方向有哦重复颜色的图像压缩比更高。

隔行扫描
PNG支持隔行扫描，并使用了比GIF更好的算法，它允许对真实的图像进行更好的“预览”，但支持隔行扫描的PNG图像在文件大小上会更大些。

2.3 PNG的更多资料
PNG格式有PNG8、PNG24、PNG32
PNG8是调色板PNG的别称
PNG24是真彩色PNG的别称，但不包含alpha通道。

PNG32是真彩色PNG的别称，包含alpha通道。

注：在Photoshop中导出过程中选择支持透明，导出PNG图像实际上也是PNG32是带有alpha通道的，只不过PNG格式仍然是PNG24。

Fireworks导出的透明PNG图像是PNG32的。

比较PNG和其他图像格式
GIF是为图形设计的，JPEG是为照片设计的，PNG对两种类型的图像都支持。

和GIF JPEG比较
PNG使用了从LZ77派生的一个非专利無失真式壓縮算法（名为DEFLATE）。

这个算法对图像裡的直线进行预测然后存储颜色差值，这使得PNG经常能获得比原始图像甚至比
GIF更大的压缩率。

但也有一些软件不能使用适合的预测，而造成过分臃肿的PNG文件。

PNG8除了不支持动画以外，调色板PNG拥有GIF所有优点，此外它还支持alpha透明，并且压缩比更高，同样质量的图片PNG8与GIF相比最高节省约30%的体积。

所以除了动画以外我们应该使用PNG8来代替GIF。

当图像中的颜色数量超过256色时，需要使用真彩图像格式-PNG32和JPEG。

JPEG的压缩比更高，一般来说，JPEG也是存储照片的标准。

但由于JPEG有损的，而且在高清的颜色过度周围会有大的色块，因此使用PNG会更好。

当图像的颜色略超过25色时，可以在不损耗任何可见质量的前提下，将图像转化为PNG8格式。

当“大色块”（由于高压缩导致颜色丢失）变得不可接受时，比如说含有很多颜色的图像或是软件菜单截图，这时PNG是最好的选择。

PNG透明的奇怪现象
3.自动无损图像优化
不同类型的图像的处理方法不同，但是我们可以使用脚本来完成自动化操作。

我们将在本节讨论如下操作：
优化PNG格式的图像
剥离JPEG中的元数据
将静态GIF（不包含动画）转化为PNG格式
对GIF动画进行优化
3.1 优化PNG图像
PNG格式图像信息保存在“块”中。

这种方式很利于扩展，因为你可以添加一些自定义的快实现额外功能，而且不识别这些块的程序自动忽略这些内容。

但对于Web显示来说，大部分的块都并非必要，我们可以安全地将他们删除。

还有一点好处，当我们将叫做gamma的块删除后，实际上会提升跨浏览器的显示效果，因为各个浏览器对gamma矫正有着迥然不同的支持。

Pngcrush
优化PNG，我们最喜欢用的工具是pngcrush(/pngcrush/),用法如下：
Pngcrush – rem alla – brute – reduce scr.png dest.png
让我们看看pngcrush有哪些参数：
-rem alla
删除所有的块，但保留控制透明的alpha块。

-brute
使用超过100种不同的方法进行压缩，默认值是10种。

加了这个参数以后会慢很多，而且大部分情况下改进的效果很小。

但是如果你是离线进行这个操作，完全可以为这个操作多付出1~2秒的时间，因为这个操作可以找到效果更好的方法来压缩图像。

但如果使用的场景对性能要求很高，就不要使用这个参数了。

-reduce
如有可能，尝试减少调色板中的颜色数量。

Src.png
源图片。

-dest.png
目标（优化后的）图片。

其他PNG优化工具
PNGOUT(/ken/utils.htm)
只能运行在Windows下，没有开源，只有可执行程序。

OptiONG(/)
跨平台，开源，通过命令行调用。

PngOptimizer(/PngOptimizer.php)
Windows 平台，开源，同时包含图形界和命令行借口。

PNGslim(/ea2aced/tech/png/pngslim.zip)
3.2 取出JPEG的元数据
JEPG文件中包含如下的元数据:
注释
应用程序定义的内部消息（比如Photoshop）
EXIF信息，比如拍摄用的相机型号，拍摄日期，拍摄位置，缩略图等，甚至还可以包含音频信息等。

这些元数据不会影响图像显示，可以被安全地移除。

对元数据的处理，凑巧也是我们之前提到的对JPEG进行无损压缩的方法之一，可以将文件中的那些不需要的部分直接剔除，而不会影响视觉质量。

3.3 GIF转化成PNG
正如我们之前讨论的，PNG8格式支持GIF所有的功能，所以将GIF转换成PNG8，视觉上应该感觉不到变化。

你可以使用命令工具ImageMagick(/)来完成这个转换：
Convert souce.gif destination.png
可以通过下面的方式强行将图像转换成PNG8格式：
Convert source.gif PNG8:destination.png
这条命令基本上没什么用，因为GIF图像可以通过任何方式转化为PNG8。

ImageMagick会根据图像的颜色数量来决定合适的格式。

当你将GIF转换为PNG之后，不要忘了使用pngcrush对PNG再进行一遍优化。

你还可以使用imageMagick的验证工具，通过编程方式确定GIF文件中是否包含动画。

例如：Identify-format %m my.gif
如果GIF图像中不包含动画，则这条命令会返回“GIF”。

如果包含GIF动画，将会返回一个类似于“GIFGIFGIF…”的字符串，每个GIF代表其中的一个帧。

如果你通过运行脚本来转换文件，对输出结果的前6个字符进行判断，如果是“GIFGIF”,则表明这是一个动画文件，在这种情况下，你可以直接跳到下一步。

3.4 优化GIF图像
这里有个很有用的工具，就是Gifsicle(/gifsicle).因为动画中包含很多帧，并且图像上的部分内容在不同帧上都是不一样的，所以Gifsicke通过将动画里面连续帧中的重复像素移除，来达到优化的目的。

具体命令如下所示：
Gifsicle-02 scr.gif> dest.gif
3.5 YAHOO在线压缩工具-Smush.it
Smush.it是一个在线的图像优化工具。

具体工作是对多种文件类型应用无损图像压缩。

Smush.it包含一个方便的Firefox扩展，可以一次性将你浏览的任何页面上的所有图像进行优化。

你可以通过下面的步骤经常检查以下，看看究竟可以节省多少字节。

需要注意的是，Smush.it对JPEG的优化很有限，因为没有对JPEG的元数据进行剥离，以防不小心剥离掉版权信息，让JPEG图像变成“孤儿”。

如果你通过上面提到的技术和工具推出了自己的“smushing”工具，并且确定将元数据移除是合适的，之需要在jpegtran后面带上-copy none参数。

3.6 使用渐JPEG进格式来存储大图像
当我们回顾不同的文件格式时，发现有一种叫做渐进JPEG的图像格式，可以唉浏览器中逐步进行渲染，就是允许用户在图像还在传输时，就能看到一个低分辨率的图像。

问题是，渐进JPEG图像的大小和未经过渐进处理的图像相比，是更大还是更小呢？
通过对从Yahoo!图片搜索API随机找到的10000长图像进行试验（/blog/2008/12/05/imageopt-4）,我们得出的结论是无法确定。

实际上，测试结果遍布了整个图表，但从中可以看出一个趋势，大于10KB的图像可以通过转换称渐进JPEG图像来货到更好的压缩率，较小的图像更适合非渐进的标准JPEG图像。

4. Alpha透明：避免使用AlphaImageLoader
在这一节，我们将仔细看看alpha滤镜，这个在老版本的Internet Explorer中用来支持alpha透明度的技术。

Internet Explorer提供了一个叫做AlphaImageLoader的滤镜，它现在非常流行。

根据在Yahoo!的试验和实践，我们得出的结论就是你不应该使用AlphaImageLoader来解决Internet Explorer的透明度问题。

我们将解释这样做的原因，并通过几个渐进增强的PNG8实例来突破这些限制。

4.1 Alpha透明效果
就像你之前看到的那样，透明度有两种类型。

第1种是二进制透明度，每个像素要么完全透明，要么完全不透明。

第2种是alpha透明度，允许你设置不同级别的透明。

Alpha透明在Interne Explorer 6下缺乏足够的支持，对于Web开发者来说，平滑的过渡和阴影已经成为一项挑战。

通常情况下，alpha透明用于那些背景会变化的情况，比如照片，图形或渐变。

在这些例子中，很难模拟透明度，因为你不能确定什么颜色会出现在给定图像的后面。

完美的alpha透明度允许将云状的图像置于任意背景之上，而且都会显示得很漂亮。

二进制透明需要一个更加创新的方法；设计师通过在图像周围添加一些和背景色相近的色块，来实现近似的透明效果。

渐变背景需要对云彩的边缘做更加小心的处理。

如果边缘留得国语宽松，或者在图像上留下了阴影，图像的某些区域就会感觉很暗，在另外的一些区域又会感觉很亮。

这可以让我们尽可能少地留下背景色。

山顶角
另一个例子就是无处不在的圆角模块。

有一点很重要，就是应该避免将背景的颜色很轮廓合并成一张图片，因为这样你需要为每种背景都准备一张和轮廓合并的图片，从而导致HTTP 请求数急剧增加。

从创建可扩展的CSS来考虑，我们应该将轮廓和页面背景色从整块背景或图片中分离出来。

有趣的是，将两者分离需要像素级别的精确选择，并且以来于人眼对平滑过渡趋势的判断。

Dan Cederholm在 A List Apart 上发表的《山顶角（Mountaintop Corns）》(/articles/mountaintop/)中，首次提到这点。

4.2 AlphaImageLoader
Internet Explorer不支持原生的alpha透明。

专有的滤镜就是为了填补这个空白，但是这样做所带来的心梗损耗非常明显。

为了更好地理解这种做法的缺陷，让我们来看看有哪些事情是不应该做的。

示例：使用AlphaImageLoader为PNG图片添加圆角
.myModule .corner {
background-image: url(corner.png);
-background-image:none;
-filter:progid:DXImageTransform.Microsoft.AlphaImageLoder(
Src=’corner.png’,
sizingMethod=’scale’
);
}
示例中，在属性前面添加一个下划线是个hack技巧，这样样式只有在低于Internet Explorer 7的版本中才会生效：
-background-image 属性首先将原来的背景图像corner.png移除。

-filter属性使用Microsoft的AlphaImageLoader滤镜重新加载相同的图片。

只有在Internet Explorer 6 （或者更低的版本）浏览器中才需要这个hack技巧。

Internet Explorer 7及更高版本的浏览器已经支持alpha透明度，就像Firfox,Safari和
Opera一样了。

所有这些浏览器都会忽略以下划线开始的规则，因为这些属性是无法被识别的。

4.3 AlphaImageLoader问题
使用alpha滤镜即会增加维护成本，又会造成直接的性能损耗。

代码分支
从维护的角度来看，在上面这个例子中，就算将代码分支的数量空置到最小，也是非常危险的。

当我们在CSS规则中写入一些例外情况，文件大小就会随着时间不断增长。

还有，假设我们同时使用CSS Sprite 来减少HTTP请求数，就像《高性能网站建设指南》这本数中推荐的一样，那么当使用alpha滤镜后，background-position将不能支持。

在这种情况下，通常会使用clip属性来模拟Internet Explorer下的背景位置。

冻结浏览器
当你使用alpha滤镜后，页面就不再支持渐进渲染。

在所有必须的组件下完成之前，用户只能看到空白页面。

页面上的元素仍然可以并行下载。

但是渲染会被阻塞，因为Internet Explorer会在所有CSS都下载完毕后才开始进行渲染，但是CSS现在却依赖于一张需要经过滤镜处理的图片。

如果你在页面设置了几个AlphaImageLoader滤镜，那么它们的处理过程是串行的，这样问题就被成倍放大了。

比如你有5长图像，每个图像都在服务器上延迟两秒，累加起来，浏览器就要冻结10秒。

增加内存消耗
使用AlphaImageLoader的另外一个页面效果就是增加内存占用，这些内存用于处理和应用滤镜。

我们现在可能会误以为所有的电脑都有着几乎取之不尽的内存，但是对于那些老实的电脑来说绝对不是这样的，而且这样电脑很可能运行着Internet Explorer 6或更低版本的浏览器。

所有这些应用在图片上的开销，每在页面上显示一次就会支出一次，因为滤镜没有修改图像文件本身，而是修改应用这些样式的HTML元素。

如果一个Sprite同时应用在页面中20个元素上，付出的性能损耗不是1份，而是20份！此外，所有元素都在同一个UI线程中处理。

通常这个滤镜用于覆盖在视频上的播放按钮。

这种情况下，任何性能损耗都会体现在页面每一个视频上。

真实案例研究：Yahoo!搜索
对于估算代码修改对性能产生的影响，在实验室中测试是一个很好的途径，但是没有什么比在真实的环境中测试更棒了，这意味着来自真实用户数百万的请求，无数的浏览器设置，不同的地理位置，连接速度，硬件和操作系统。

根据实验室的测试结果，我们估计那些应用了AlphaImageLoader滤镜的HTML元素，每个大约会增加8毫秒的性能成本。

而在从前，搜苏团队使用真彩色的PNG图像和滤镜来制作Sprite，该Sprite在页面中出现了12次。

因此，我们预计可以得到96毫秒的速度提升，但是我们非常急迫地想知道，真实的用户测试跟我们的测试结果是否相似。

这个测试是对两个相同的搜索结果页面进行比较，一个使用AlphaImageLoader滤镜，另外一个没有。

结果集对比了两种不同的人群，显示出了50-100毫秒的提升。

使用Internet Explorer 6的用户的响应时间提升；额100毫秒，而使用Internet Explorer 5 的用户的响应时间提升了50毫秒。

100毫秒（十分之一秒）的速度提升看起来很少，但是Amazon的实验数据显示，响应时间增加100毫秒会导致1%的销售额下降
（/~glinden/stanforddatamining2006-11-29.ppt）.理解了收入和性能之间的直接联系后，巍峨将投资空置在最低水平，必然会将真彩色PNG转化为PNG8。

基于这个测试，推荐你尽可能避免使用AlphaImageLoader。

如何避免呢？在下一节，我们将介绍一些可以避免使用滤镜的技术。

4.4 渐进增强PNG8 Alpha 透明
如果已经决定了必须使用alpha透明，但是又不想承受微软专用alpha滤镜所带来的性能损耗，这时可以采用渐进增强的PNG8.首先创建一个使用alpha透明的图像，然后按照下面的步骤操作：
1.建立一个二进制透明图像，所有的像素要么完全不透明，要么完全透明。

2.编写使用这个图像所需要的CSS.
3.确认这个图像在没有alpha透明的情况下可以正常显示。

4.添加部分透明像素，它们可以被更先进浏览器识别。

你可以使用Photoshop或你喜欢的
其他工具将两个图像分层，并将结果保存为不同的文件，为了将最终的图像保存为支持alpha透明的PNG8，你可能需要Fireworks或一个叫做pngnq的命令行工具。

我们不建议通过软件将真色彩PNG自动转换成PNG8，因为二进制透明的版本不太可能达到可以接受的质量要求。

5.优化Sprite
Dave Shea创造了CSS Sprite 这个术语，指将多个背景图片合并到一个较大的图片中，通过修改背景的位置，在元素上显示背景图片的一部分。

这项技术随后就被Yahoo!采用，通过减少Yahoo!首页上小图标所带来的请求数来提升性能。

有两种方法可以用来优化Sprite：“无所不包”（everything and the kitchen sink）法和模块化面向对象的方法，要想知道哪种方法更适合你的网站，需要问自己几个问题：
你的网站有多少页面？
你的网站是基于模块化开发的吗？
你的团队可以在网站维护上话费多少时间？
上面几个问题的答案可以帮助你在Sprite数量，维护成本和不重复页面数之间做权衡。

你可以选择任意两项，但无法同时选择3项。

5.1 超级Sprite VS 模块化Sprite
如果网站的页面很少，最好的办法是将网站上的所有图像放到一个超级Sprite中，Google 就在搜索结果页面中使用了一个超级Sprite。

另一方面，如果你的网站有很多页面，就需要一个不同的Sprite策略，否则维护成本将会变得非常高。

最终的目标应该是可以很方便地将那些不再使用的模块从网站删除；否则，曾经的高性能网站也将变的笨重起来。

为了实现这种效果，你可以将术语同一个对象的图像合并在一起。

比如：
同一个圆角框的四个角。

模块头部滑动门所用的左右两边。

组成按钮的2~4张图像。

Tab的状态，比如当前、悬浮和正常效果。