图片优化调研之理论篇

前言

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

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压缩工具	官网	命令	备注
pngcrush	http://pngcrush.com/	pngcrush -rem alla -reduce src.png dest.png	-rem alla ： 删除全部的块，但保留控制透明的alpha块 -reduce   ： 若有可能，尝试减小调色板中的颜色数量
optipng	http://optipng.updatestar.com/	1> 直接进行压缩(覆盖源文件)：optipng src.png 2> 批量压缩（使用通配符）：optipng *.png 3> 指定压缩输出路径：optipng *.png -dir dirname	-dir：指定输出目录
pngout	http://advsys.net/ken/utils.htm	pngout src.png desc.png
pngoptimizer	http://www.pngoptimizer.com/

 

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

png命令行优化测试图片

测试结果见图——

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

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

能够看到，总体来讲，从压缩率来说，pngout > pngoptimizer > pngcrush > optipng。

4.2 剥离JPEG中的元数据

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

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

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

jpeg压缩工具	官网	命令	备注
jpegtran	http://jpegclub.org/jpegtran/	jpegtran -copy none -optimize src.jpg dest.jpg	-copy none：设置不包含任何元数据 -optimize：强制对霍夫曼表进行优化，从而得到更高的压缩比
jpgoptimizer	http://jpgoptimiser.com/		线上服务

 

测试图像——

JPEG压缩测试图像

测试结果——

bt_huodong.jpg	73437	73437
jpegtran	72548
jpgoptimizer		72548
节省(Byte)	889	889
节省(%)	1.21%	1.21%

发现压缩率相同（其余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经过将动动画里面连续帧中的重复像素移除，来达到优化的目的。

gif优化工具	官网	命令	备注
gifsicle	http://www.lcdf.org/gifsicle/	gifsicle --optimize src.gif > desc.gif gifsicle --batch -i *.gif	-i：使得对应gif图片支持隔行扫描 --batch：直接替换原有文件

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

oading压缩实例图

接下来看看测试结果——

img_loading.gif	2003	2003
gifsicle --optimize	968
gifsicle --optimize -i		968
节省(Byte)	1035	1035
节省(%)	51.67%	+51.67%

 

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

固然，gifsicle一样对单帧gif图片进行优化，但优化效果并很差。看看测试图像——

 

单帧gif测试图（32595KB）

测试结果——

btn_icon.gif	32595	32595
gifsicle --optimize	31816
gifsicle --optimize -i		35679
节省(Byte)	779	+3084
节省(%)	2.39%	+9.46%

 

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

4.4 多级压缩

每个命令行工具都有本身的压缩算法，咱们不妨试试将图像进行连续使用不一样方式进行压缩。

pngcrush -> optipng -> pngout ->pngoptimiser
27050     -> 26872   -> 25853  -> 25853

pngoptimiser - > 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="image.jpg" width="100" height="100" /> 

• 优化生成的图像

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

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

• 使用CDN

• 缓存

• 图片懒加载

6. 总结

OK，写了很多。主要重点——图片格式选择及无损压缩。是比较基础，但容易被你们忽略的部分。但愿你们作好图片优化的第一步。

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

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