前言

内容较多，理论部分比较基础。对于新人而言，从浅入深，比较好理解；对于老手而言，可跳过，可直接看实践部分。 总之，希望对大家有所帮助。

1. 收益

为了提升网站性能，保持网站处于“节食”状态非常重要——确保所有新引入的资源都是最精简的，图像优化就是这样一项工作。 大家不妨猜猜图片流量占总流量的百分比。简单对知名网站中图片在整个页面大小中所占比例做了一个调研。

计算其平均值：44.94%。 不一定绝对精确, 但是非常接近。当然，这里的数据主要以首屏时间段采集数据。 从这个数据可以看出，对于图像的优化（当然要在只有轻微质量损耗或无损的前提下）是具有巨大潜力的。我们只需要改善细节，就可轻松实现减少页面加载时间、节省带宽、节省磁盘空间等。

2. 优化步骤

• 确定所需图像质量的情况下，正确选择图像格式。制作最优图像的一步，就是理解广泛应用在Web上的3中图像格式——JPEG、PNG和GIF——的特点，然后根据实际情况（图像颜色数、清晰度等）来选择合适的格式。
• 利用无损压缩技术尽可能地削减图片大小。这一步特别需要一套工程化的解决方案。手动重复同一项工作是很费时的，实际上，现在已经有很多优秀的开源图优化工具。可以通过编写一个脚本来处理所有的图像文件，首先判断文件类型，然后运行相应的工具来进行优化。

3. 图像特性

3.1 几点理论

3.1.1 位图和矢量图

矢量图：是通过组成图形的一些基本元素，如点、线、面、边框、填充色等信息通过计算的方式来显示图形的。电脑在显示的时候则通过这些数据区绘制出我们定义的图像。矢量图的优点在于文件相对较小，并且放大不会失真。缺点是这些完美的几何图形很难表现出自然度很高的写实图像。 我们在web页面上所使用的图像都是位图，即便有些称为矢量图形（如矢量icon等）也是指通过矢量工具进行绘制然后再转成位图格式在web上使用的。

位图（像素图或栅格图）：通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。位图的优点是利于显示色彩层次丰富的写实图像。缺点是文件大小较大，放大和缩小图像会失真。

3.1.2图 形和照片

不管你使用哪种图像格式、优化方法取决于图像的具体类型：

图形：网站的logo、草图、图标、大部分动画和图标都属于图形。这些图像通过由连续的线条或其他尖锐的颜色过渡组成，颜色数量相对较少。

照片：照片通常有百万数量级的颜色，并且包含平滑的颜色过渡和渐变，想象一下用相机拍摄的日落时的照片。

3.1.3 像素和RGB

图像由像素组成，像素是图像中最小的信息单元。我们可以使用不同的颜色模型来描述像素，在计算机图像处理上，RGB颜色模型是最常用的一种。

在RGB颜色模型中，采用包含红（R）、绿（G）和蓝（B）的数量多少的方式来描述一个像素。R、G和B被称为成分（又称为通道），每种成分的强度值范围在0~255之间。我们经常在HTML合CSS中使用的是十六位进制的成分值，范围从00~FF。将不同强度的成分组合在一起，就可以获得不同的颜色。

3.1.4 真彩色图像VS调色板（索引）图像格式

使用RGB颜色模型到底可以展现多少种不同的颜色呢？答案是多余1600万种：256 * 256 * 256（或者2^24）可以得到16777216种组合。可以支持这么多颜色的图像格式叫做真彩色图像格式，比如JPEG和真彩色类型的PNG。

为了在存储图像信息时节省一些空间，有一项技术是将图像中各种不同的颜色提取出来建立一个表，这个表通常叫做调色板（也可以成为索引）。有了这个颜色表，就可以通过将调色板中的条目和每个像素重新匹配，达到重新绘制整个图像的目的。

调色板可以包含任意RGB颜色值，但是最经常使用的掉色斑图像格式——GIF和PNG8——会限制调色板中最多只能包含256中颜色。这不是说你只可以从256种已经定义好的颜色中选择，恰恰相反，你可以从1600+万的颜色中选择你需要的值，但是单个图像中最多只能包含256种颜色。

3.1.5 透明和alpha通道（RGBA）

RGBA并非另一种截然不同的颜色模型，而是在RGB的基础上做了扩展。额外的成分A代表alpha透明，值的范围也是从0~255，但实际上不同的程序和库会将透明定义为从0%~100%的百分比，或者从0~127的值。alpha通道描述了透过图像像素可以看到下面的内容的程度。

3.1.6 隔行扫描

当网速很慢时，大图像会随着下载的速度逐行显示，从上到下每次显示一行，缓慢地向下递进。为了提高用户体验，部分图像格式支持对那些连续采样的图像进行隔行扫描。隔行扫描可以让用户在完整下载图像之前，看到图像的一个粗略版本，从心理上消除页面被延迟加载的感觉。

3.2 不同图像格式的特性

3.2.1 GIF

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

• 透明

GIF允许一个二进制（是/否）类型的透明度，每个像素要么要完全透明（不包含颜色），要么是完全不透明的（包含一个单色）。这就意味着它不支持alpha（可变的）透明，取而代之的是，调色板中的某个颜色可以被标记为标示透明，而透明像素则会被分配为这个颜色值。所以，如果你为GIF设置了透明像素，那么就会“消耗”一个调色板条目。

gif图像索引色（二进制类型）透明设置透明会"消耗"一个调色板（颜色表）条目

gif图像索引色（二进制类型）透明设置非透明会减少一个调色板（颜色表）条目

• 动画

GIF格式支持动画。GIF动画现在是有一些应用，比如广告条（虽然主要以flash为主），还有在富互联网应用（RIAs）中出现的“加载中”提示符。

• 无损

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

• 逐行扫描

当生成GIF文件时，会使用一个压缩算法（叫做LZW）来减小文件的大小。当压缩GIF时，会从上到下一行一行地对像素进行扫描。这种情况下，当图像在水平方向有很多重复颜色时，可以获得更好的压缩效果。比如，有一个500*10像素的图像，图像上包含一些条纹，就是说水平方向是由相同颜色线条组成的，将这个图像旋转90度后，其垂直方向是由相同颜色的条纹组成的，此时后者的文件要大于前者。

• 隔行扫描

GIF支持可选的隔行扫描

在Photoshop中设置隔行扫描

3.2.2 JPEG

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

• 有损

JPEG是一种有损的格式，用户可以设置自定义质量级别，这个级别决定了有多少图像信息会被丢弃。质量级别的值从0到100，但是就算设置为100，也同样会有一定程度的质量损耗。

当你要对某个图像进行多项编辑操作时，最好使用无损的图像格式来保存中间结果，然后在完成所有的修改后另存为JPEG格式。否则你将会在每次保存时都损耗一些质量。

但也有少数操作是无损的，比如：

　　旋转（只有在旋转90度、180度和270度的情况下）　　裁剪　　翻转（水平或垂直）　　从标准模式切换到渐进模式，反之亦然　　编辑图像的元数据

• 透明和动画

JPEG不支持透明和动画

• 除了默认的标准JPEG(Baseline)，还有一种渐进JPEG(Progressive JPEG)，支持隔行扫描。Internet Explorer不会逐步地渲染渐进JPEG图像，而是在图像完全下载时立即全部显示出来。

3.2.3 PNG

• 真彩色和调色板PNG格式

PNG格式有几种类型（PNG8/PNG24/PNG32），但它们大致分为两种：调色板PNG格式和真彩色PNG格式。你可以使用调色板PNG格式来替代GIF格式，使用真彩色PNG格式来代替JPEG。

对于PNG格式的类型，PNG8是调色板PNG的昵称；PNG24是真彩色PNG的别称，但是不包括alpha通道；PNG32也是真彩色PNG的别称，但是包括alpha通道。还有其他PNG格式（如灰度PNG），使用几率过小，在此不讨论。

• 透明

PNG支持完全的alpha透明，在IE6中使用这种特性会出现两种奇怪的现象。

1> 所有在调色板PNG中的半透明现象都会在IE6下显示为完整透明。2> 真彩色PNG中的alpha透明像素，会显示为有背景色（通常是灰色的）。

对于第一个问题，我们可以在所有现代浏览器上实现“渐进增强”半透明图像的效果，在IE6中实现“优雅降级”为和GIF类似透明度的图像。

• 动画

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

• 无损

PNG是一种无损的图像格式，多次编辑不会降低其质量。这使得用真彩色PNG来保存JPEG的修改过程的中间产物非常合适。

• 逐行扫描

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

• 隔行扫描

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

PNG非逐行扫描时的文件大小

PNG隔行扫描时的文件大小

3.2.4 PNG和其他图像格式的对比

3.2.4.1 和GIF比较

除了不支持动画以外，调色板PNG拥有GIF的所有功能。此外，它还支持alpha透明，并且通常压缩比更高，文件大小更小，所以，应该尽可能使用PNG8来代替GIF。

有一个例外就是那些颜色数很少的小图像，这是GIF的压缩率可能会更高一些。但是这种小图像其实应该被放在CSS Sprite中，因为HTTP请求的开销已经大大超过节省的那点带宽，而且用PNG格式保存Sprite图像可以获得更高的压缩率。

3.2.4.2 和JPEG比较

当图像中的颜色数超过256种时，需要使用真彩色图像格式——真彩色PNG或JPEG。JPEG的压缩比更高，而且一般来说，JPEG是照片存储的实际标准。但由于JPEG是有损的，而且在清晰的颜色过渡周围会有大色块（高度压缩导致的颜色丢失），因此，以下情况使用PNG更合适：

• 当图像的颜色略超过256种时，可以在不损耗任何可见质量的前提下，将图像转换为PNG8格式。令人惊奇的是，有时候就算你剥离了1000种以上的颜色，都不会注意到图像中所发生的变化。
• 当“大色块”变得不可接受时，比如说包含很多颜色的图像，这时候PNG就是更好的选择。

3.2.5 图像特性总结

针对以上各个图像格式的特性，汇总一表格进行比对总结——

图片本身特性

图片在浏览器下的特性

3.3 图像编辑软件

这里主要简单介绍下Photoshop和Fireworks的使用，及其对比。 当了解了上述图片相关理论知识了之后，对于Photoshop及Fireworks中进行图像输出的参数设置，就更加清楚了。

3.3.1 Photoshop

对于Photoshop输出图像中各种参数的含义及设置技巧，请参考淘宝官网UED官方博客里的内容：http://ued.taobao.com/blog/2010/12/jpg_png/#4

PNG8的图像输出设置参数解析

在此汇总要点——

• 对于PNG8的图像输出设置，列出以下要点：

  1> 减低颜色深度算法（指定用于生成颜色表/调色表的方法）与颜色（颜色表中使用的颜色数量）：一般情况下，默认选择“可选择”即可。

  2> 仿色方法和仿色（模拟计算机的颜色显示系统中未提供的颜色的方法）：一般只在图片颜色过多产生失真的情况下才需要选择仿色。建议选择扩散仿色，可以适当调节仿色的百分比，以达到最佳效果。方色度越高文件也就越大。

  3> 透明度和杂边（确定如何优化图像中的透明像素）：建议UI根据实际应用场景在保存之前就处理好透明图像的背景。

  4> 交错（用于标示图像是否支持隔行扫描）：从用户体验的角度，对于尺寸和文件大小相对较大的图片建议勾选此项。

• 对于GIF的图像输出设置，大致等同于PNG8的设置。

• 对于JPEG的图像输出设置，列出以下要点：

  1> 品质：不要存100%品质及50%品质以下的JPEG图像，默认是80%。经实践，建议设置60%质量（等同于Fireworks的80%）。

  2> 优化（创建文件大小稍小的增强型JPEG）：勾选此项。

  3> 连续（使图像支持隔行扫描）：勾选此项在某些情况下可压缩文件大小（图片大小大于10K时），某些情况下会增大文件大小，建议在保存时根据实际情况而定。不过IE6及更早版本的IE不支持JPEG连续显示，而是在图片完全加载后一次成像，用户体验上可能还不如逐行显示的好。

  4> 模糊：建议设置0.1~0.5之间。

  5> 嵌入颜色配置文件：将颜色配置文件与文件保留在一起，供某些浏览器用于色彩校正。

  6> 杂边：指定原稿中透明像素的填充色。

对于JPEG中的“连续”这个参数设置，需要多阐述一些——

我们知道它的设置，使得图像在浏览器中逐步进行渲染，就是允许用户在图像还在传输时，就能看到一个低分辨率的图像。问题是，渐进JPEG图像的大小和未经过渐进处理的图像相比，是更大，还是更小呢？

通过对从Yahoo图片搜索API中随机找到10000张图像进行试验（http://yuiblog.com/blog/2008/12/05/imageopt-4/），我们得出的结论是无法确定。实际上，测试结果遍布了整个图表，但从中可以看出一个趋势，大于10KB的图像可以通过转换成渐进JPEG图像来获得更好的压缩率，较小的图像适合非渐进的标准JPEG图像。下图中展示了原来的文件大小和经过优化的文件大小的差别。图表展示的最大大小是30KB，但是趋势非常平坦，意味着渐进编码所带来的收益是随着文件大小递增的。

文件大小和渐进JPEG图像带来的收益之间的关系。Y轴代表标准图像和渐进图像之间在文件大小上的差别，Y轴的值越大，代表越适合使用渐进编码

3.3.2 Fireworks

• 先看一下对PNG8图像导出的设置——

1> 索引色调色板：

• 最合适：一个派生自文档中的实际颜色的自定义调色板。通常会产生最高品质的图像。
• Web 最适色：其中的颜色已转换为与其最接近的网页安全色的最适色彩调色板。网页安全色是来自“网页 216 色”调色板的颜色。
• 网页 216 色：一个包含 Windows 和 Mac OS 计算机共有的 216 种颜色的调色板。此调色板通常称为网页安全或浏览器安全调色板，这是因为在 8 位显示器上查看时，它在任一个平台上的各种 Web 浏览器中都产生相当一致的效果。
• 精确：包含图像中使用的精确颜色。只有包含 256 种或更少的颜色的图像才能使用“精确”调色板。否则，调色板会切换到“最合适”。
• Windows 和 Mac OS：分别包含由 Windows 或 Mac OS 平台标准定义的 256 种颜色。
• 灰度等级 一个包含 256 种或更少的灰色阴影的调色板。选择此调色板可将图像转换为灰度图像。
• 黑白：一个只包含黑、白两种颜色的调色板。
• 一致：一个基于 RGB 像素值的数学调色板。
• 自定义：一个经过修改或从外部调色板（ACT 文件）或 GIF 文件加载的调色板。

一般情况下，选择”最合适“即可。

2> 抖动

图象抖动是一种在计算机绘图中使用的技术，用来在单色显示器或打印机上产生不同灰度的视觉效果，或在彩色显示器或打印机上产生额外的彩色视觉效果。这种技术的成败取决于如何更合理的对图象区进行分组并更合理的在每一个由多个像素组成的分组中分配黑白像素比例（对单色显示器或打印机而言）或几种彩色像素比例（对彩色显示器或打印机而言）。由于这些分组很小（通常仅仅是几个像素的级别），因此人眼会将其视为一种由分组中几种颜色共同混合而成的某种单一颜色。这就解决了如何在8位显示设备上显示24位或32位颜色的问题。利用Web抖动填充在你需要在网页中使用非Web安全色时是很有用的。如果你没有使用Web抖动，则当你的文档经由一个Web安全色调色板导出时，文档中的非Web安全色会被转换成最接近的Web安全色或完全听命于用户端浏览器抖动算法的处理，而Web抖动填充是通过将两种Web安全色混合在一起从而产生出一种最接近你所需要的非Web安全色的。这样做的好处是避免了因各种不同浏览器所采用的抖动算法的不同而导致同一种非Web安全色在不同的计算机上显示的颜色不同，同时也保证了即使在浏览器的图像抖动被关闭的情况下也不会影响颜色的显示。

抖动主要应用于以下三种情况: a> 将非web安全色使用web安全色混合显示 b> 制作半透明图片 c> 减少递进过程不自然的过渡

3> 其他设置

对于其他设置，等同于Photoshop中的参数设置，如"交错式浏览器显示"等同于ps中”交错“、”渐进式浏览器显示“等同于ps中的”连续“。

3.3.3 Photoshop与Fireworks的对比

这里，我仅仅列出和切图过程及图片导出相关的一些区别。

对于ps的优势，它能够无损处理分层结构，可用于从PSD文件中精确提取局部图层。 对于fw的优势，对于PNG8的alpha透明度有着极好的支持。 对于两者在图像优化方面的对比，可参考文章Fireworks vs Photoshop Compression

对于JPEG格式，我们选择色彩度丰富的图片来做测试（除了品质不同，其他参数均相同。因为ps里的60%效果相当于fs里的80%）——

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  PS与FW对JPEG图像导出大小对比

对于PNG8格式，先选择颜色数量小于256的来做个测试——

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　PS与FW对PNG8图像导出大小对比(颜色值小于256)

对于PNG8格式，再选择颜色数量大于256的来做个测试（对于调色板，ps选择”可选择“，fw选择”抖动100%“）——

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　PS与FW对PNG8图像导出大小对比(颜色值大于256)

由于在平常切图过程中，对于PNG8格式的选取是最多的，且大多颜色数大于256（在256-500之间颜色数的图使用PNG8进行输出，损耗很小），且对于JPEG的输出，Fireworks同样胜出。因此，使用Fireworks导出图片将得到更好的效果。

4.自动无损图像优化

现在已经理解了不同的图像格式的特性及如何使用图像编辑软件有效优化导出图像，然后我们再来看看如何优化这些图像。这个过程的核心之处在于：

• 整个过程是自动的，不需要人工介入
• 所有操作都是无损的，不用担心图像质量会受损
• 使用免费的命令行工具完成

不同类型的图像的处理方法不同，但是我们可以使用脚本来完成自动化操作。主要讨论以下内容：

• 优化PNG格式的图像
• 剥离JPEG中的元数据
• 对GIF进行优化

4.1 优化PNG格式的图像

PNG格式将图像信息保存在”块“中。这种方式很利于扩展，因为你可以添加一些自定义的块实现额外功能，而且不识别这些块的程序会自动忽略这些内容。但对于web显示来说，大部分的块都并非必要，我们可以安全地将它们删除。还有一点好处，当我们将叫做gamma的块删除后，实际上会提升跨浏览器的显示效果，因为各个浏览器对gamma校正有着迥然不同的支持。

对于PNG优化压缩的命令行工具非常之多，请看13 Free Tools to Optimize and Compress PNG to Reduce Image Size。这里我仅仅使用几款比较火的命令行工具进行尝试，简单介绍下这4款——

下面，我们拿一张图片进行测试——

png命令行优化测试图片

测试结果见图——

命令行工具对PNG8压缩率测试

命令行工具对PNG32压缩率测试

可以看到，整体来说，从压缩率来讲，pngout > pngoptimizer > pngcrush > optipng。

4.2 剥离JPEG中的元数据

JPEG文件中包含如下元数据：

• 注释
• 应用程序定义的内部信息（比如Photoshop）
• EXIF(可交换图像文件——Exchangeable Image File Format)信息，比如拍摄用的相机型号、拍摄日期、拍摄位置、缩略图等，甚至还可以包含音频信息等。

这些原数据不会影响图像显示，可以被安全的移除。对元数据的处理，凑巧也是我们之前提到的对JPEG进行无损压缩的方法之一，可以将文件中那些不需要的部分直接剔除，而不会影响视觉质量。当然，要切记只对你自己拥有的图像进行去除元数据的操作。如果将属于别人的图像中的元数据去除，那么很可能会将有关版权和作者的数据也一并去除。这是违法的。 推荐两款工具，jpegtran和jpgoptimiser——

测试图像——

JPEG压缩测试图像

测试结果——

发现压缩率相同（其他JPEG图像也是如此），会猜测到http://jpgoptimiser.com/的线上服务使用的便是jpegtran这个命令行工具。

4.3 对GIF进行优化

对于GIF的优化，我们需要对GIF单帧图片及多帧图片（动画）来分别进行优化。

4.3.1 单帧GIF优化

正如我们之前讨论的，PNG8格式支持GIF所有的功能，所以将GIF转换成PNG8，视觉上应该感觉不到变化。可以使用命令行工具ImageMagick（http://imagemagick.org/）来完成转换。当然，不要忘了将GIF转换为PNG8之后，再使用PNG命令行工具队PNG再进行一遍优化压缩。

4.3.2 多帧GIF优化

核心介绍gifsicle——

对于GIF而言，因为动画包含很多帧，并且图像上的部分内容在不同帧上都是一样的，所以gifsicle通过将动动画里面连续帧中的重复像素移除，来达到优化的目的。

gifsicle --optimize src.gif > desc.gif

gifsicle --batch -i *.gif

OK，我们对一个loading图片进行测试——

oading压缩实例图

接下来看看测试结果——

这里的“-i”参数，使得图像支持隔行扫描。使得图像大小变大。这里主要参考非“-i”的数据即可。

当然，gifsicle同样对单帧gif图片进行优化，但优化效果并不好。看看测试图像——

单帧gif测试图（32595KB）

测试结果——

会看到，gifsicle对单帧gif的优化效果并不是很好。

4.4 多级压缩

每一个命令行工具都有自己的压缩算法，我们不妨试试将图像进行连续使用不同方式进行压缩。

pngcrush -> optipng -> pngout ->pngoptimiser27050     -> 26872   -> 25853  -> 25853pngoptimiser - > pngout -> optipng -> pngcrush 29586          - > 25853   -> 25853  -> 25853

我们会看到，pngout的压缩率是最高的，经过pngout压缩之后的图片，再使用其他工具进行压缩，文件大小保持不变。 从个人而言，确实比较喜欢使用pngout这个工具。官网提供一个windows平台客户端版本——http://www.ardfry.com/pngoutwin/

pngout客户端批量压缩网盘图片

5. 其他图片优化

我觉得，主要的图片优化核心要点就在于上述提到的两步——其一，合理选择图片格式；其二，图片自动无损压缩。

当然，还有不少其他图片优化，不单单是通用的理论性的优化，当然还有根据具体产品具体定制的优化方案。在此，罗列一些常用的图片优化方法——

• 将真彩色PNG转换为索引色PNG

推荐两个工具：pngquant和pngng

个人不建议使用，除非确保颜色数比较靠近256（当然，有时，1000种颜色左右转换为256索引色图像时，也不会发现什么明显差异。），否则会出现比较严重的失真现象。

• 针对alpha透明，避免使用AlphaImageLoader。 它主要针对IE6呢，会造成维护成本提高、冻结浏览器（当使用alpha滤镜后，页面就不再支持渐进渲染）、增加内存消耗。由此，我们最好使用“渐进增强，优雅降级”的方式处理之。
• Sprite应用
• 避免对图像进行缩放

当在HTML中将一张500 * 500像素的图像缩小，就会带来不必要的下载开销：

<img src=http://www.mamicode.com/"image.jpg" width="100" height="100" />

• 优化生成的图像

  第一次请求： 1> 生成图片 2> 写入硬盘 3> 进行压缩 4> 发送

  第二次请求： 1> 服务器端缓存

• 使用CDN

• 缓存

• 图片懒加载

6. 总结

OK，写了不少。主要重点——图片格式选择及无损压缩。是比较基础，但容易被大家忽略的部分。希望大家做好图片优化的第一步。

至于高级的图像优化，欢迎大家来补充。

理论部分，主要来自《高性能网站建设进阶指南》之第十章——图像优化。很不错的一本书，推荐大家阅读。

图片优化调研之理论篇