一.图像术语
图形和照片
图形
网站的logo、草图、图表、大部分动画和图标都属于图形。这些图像通常由连续的线条或者其他尖锐的颜色过渡组成，颜色数量相对较少
照片
照片通常有百万数量级的颜色，并且包含平滑的颜色过渡和渐变，想象一下用相机拍摄的日落时的照片。绘画作品的图像（比如蒙娜丽莎的微笑）更接近于照片，而不是图形
就图像格式而言，GIF通常用来显示图形，而JPEG更适合显示照片。PNG两者都适合，甚至用调色板PNG（palette PNG）显示图形比GIF会更好一些
像素和RGB
图像由像素组成，像素是图像中最小的信息单元。我们可以使用不同的颜色模型来描述像素，在计算机图像处理上，RGB颜色模型是最常用的一种
在RGB颜色模型中，采用包含红（R）、绿（G）和蓝（B）的数量多少的方式来描述一个像素。R、G和B被称为成分（又称为通道），每种成分的强度值范围在0-255之间。我们经常在HTML和CSS中使用的是十六进制的成分值，范围从00~FF。将不同强度的成分组合在一起，就可以获得不同的颜色。比如：
红色是rgb(255, 0, 0)或十六进制的#FF0000
蓝色是rgb(0, 0, 255)或十六进制的#0000FF
灰色阴影很可能有着三个相同的成分值，比如，rgb(238, 238, 238)或十六进制的#EEEEEE
真彩色图像和调色板图像格式
使用RGB颜色模型到底可以展现多少种不同的颜色呢？答案是1600万种：256*256*256（或者2的24次方）可以得到16777216种组合。可以支持这么颜色的图像格式叫做真彩色图像格式，比如JPEG和真彩色类型的PNG
为了在存储图像信息时节省一些空间，有一项技术是将图像中各种不同的颜色提取出来建立一个表，这个表通常叫做调色板（也可以称为索引）。有了这个颜色表，就可以通过将调色板中的条目和每个像素重新匹配，达到重新绘制整个图像的目的
调色板可以包含任意RGB颜色值，但是最经常使用的调色板图像格式——GIF和PNG8都会限制调色板中最多只能包含256种颜色。这不是说你只可以中256种已经定义号的颜色中选择，恰恰相反，你可以从1600+万的颜色中选择你需要的值，但是单个图像中最多只能包含256种颜色
透明和alpha通道（RGBA）
RGBA并非另一种截然不同的颜色模型，而是在RGB基础上做了扩展，额外的成分A代表alpha透明，值的范围也是从0~255，但实际上不同的程序和库会将透明定义为从0%~100%的百分比，或者从0-127的值。alpha通道描述了投过图像像素可以看到下面内容的程度
假设已经做出了一个网页，设置了背景，并在上面放置了一个蓝色的图像。如果图像上某个像素的透明度设置为0，那么该像素下面的背景就不可见。如果alpha透明度设置为最大值100%，那么图像上的像素将会隐藏，而背景则会“浮现出来”。加入设置为中间值，比如50%，就可以同时看到背景和图像上的像素
隔行扫描
当网速很慢时，大图像会随着下载的进度逐行显示，从上到下每显示一行，缓慢地向下递进，为了提高用户体验，部分图像格式支持对那些连续采样的图像进行隔行扫描。隔行扫描可以让用户在完整下载图像之前，看到图像的一个粗略版本，从心理上消除页面被延迟加载的感觉
二.不同图像格式的特性
GIF、JPEG和PNG这3种格式的区别：
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支持可选的隔行扫描
由于GIF有256色的限制，所以不适合用来显示照片，照片所需的颜色数量远大于这个数量级。GIF更适合用来显示图形（图标、logo和图表），但PNG8是用来显示图形的最佳格式，所以，只有在需要动画时才应该用GIF
GIF格式中使用的LZW无损数据压缩算法，在以前是受专利保护的，但是这个专利在2004年过了保护期，现在已经可以自由使用GIF了
JPEG
JPEG的意思是联合图像专家小组（Joint Photographic Experts Group），也就是开发了这个标准的组织名称，JPEG是照片存储的实际标准。考虑到人类眼睛对颜色和光线强弱的感知，这种格式通过各种技术来减少显示图片所必需的信息，所以它能在经过高度压缩的文件中存储高分辨率的图像，有以下特性；
有损
JPEG是一种有损的格式，用户可以设置自定义质量级别，这个级别决定了有多少图像信息会被丢弃。质量级别的值从0到100，但是就算设置为100，也同样会有一定程度的质量损耗
当要对某个图像进行多项编辑操作时，最好使用无损图像格式来保存中间结果，然后在完成所有的修改后另存为JPEG格式，否则将会在每次保存时都损耗一些质量
但也有少数操作时无损的，比如：
旋转（只有在旋转90度、180度和270的情况下）
裁剪
翻转（水平或者垂直）
从标准模式切换到渐进模式，反之亦然
编辑图像的元数据
透明和动画
JPEG不支持透明或动画
隔行扫描
除了默认的标准JPEG（Baseline JPEG），还有一种渐进JPEG（Progressive JPEG），支持隔行扫描。Internet Explorer不会逐步地渲染渐进JPEF图像，而是在图像完全下载时立即全部显示出来
JPEG是web上用来存储照片的最佳格式，也被广泛应用在数码相机中，然而，这种格式不适合用来存储图形，因为有损的压缩方法将线条和清晰的颜色过渡都变成了“大色块”
PNG
为了弥补GIF格式的缺点并规避LZW算法的专利问题，PNG（Portable Network Graphics，便携式网络图片）应运而生。实际上，人们常开玩笑说PNG代表“PNG is Not Gif”的递归碎屑，有以下特性：
真彩色和调色板PNG格式
PNG格式有几种子类型，但它们大致可以分为两种：调色板PNG格式和真彩色PNG格式。可以使用调色板PNG格式来代替GIF格式，使用真彩色PNG格式来他代替JPEG格式
透明
PNG支持完全的alpha透明，在Internet Explorer6中使用这种特性会出现问题（透明区域变成粉蓝色，锯齿等等，更多相关问题请查看IE6下png背景不透明问题的综合拓展）
动画
虽然已经有相关实验和实际应用存在，但截至目前，针对动画PNG格式，还没有跨浏览器的解决方案
无损
与JPEG不同的是，PNG是一种无损的图像格式：多次编辑不会降低其质量。这使得用真彩色PNG来保存JPEG的修改过程的中间产物非常合适
逐行扫描
和GIF格式一样，相对于那些垂直方向有重复颜色的图像来说，PNG格式对那些水平方向有重复颜色的图像压缩比更高
隔行扫描
PNG支持隔行扫描，并使用了比GIF更好的算法，它允许对真是图像进行更好的“预览”，但是支持隔行扫描的PNG图像在文件大小上会更大一些
三.PNG
PNG的分类
PNG分为PNG8、PNG24和PNG32：
PNG8
调色板PNG
PNG24
真彩色PNG，但不包括alpha通道
PNG32
真彩色PNG，包括alpha通道
PNG和GIF
除了不支持动画以外，调色板PNG拥有GIF的所有功能。此外，它还支持alpha透明，并且通常压缩比更高，文件大小更小，所以，应该尽可能使用PNG8来代替GIF
有一个例外是颜色数很少的小图像，这是GIF的压缩率可能会更高一些，但是这种小图像其实应该被放在CSS Sprite中，因为HTTP请求的开销已经大大超过节省的那点带宽，而且用PNG格式保存Sprite图像可以获得更高的压缩率
PNG和JPEG
当图像中的颜色数超过256种时，需要使用真彩色图像格式——真彩色PNG或者JPEG。JPEG的压缩比更高，而且一般来说，JPEG也是照片存储的实际标准。但由于JPEG是有损的，而且在清晰的颜色过渡周围会有大色块，因此以下情况使用PNG更合适：
当图像的颜色略超过256种时，可以在不损耗任何可见质量的前提下，将图像转换为PNG8格式。令人惊奇的是，有时候就算你玻璃了1000种以上的颜色，都不会注意到图像中所发生的变化
当大色块变得不可接受时，比如说包含很多颜色的图像或软件菜单的截图，这时候PNG就是更好的选择
四.优化CSS Sprite
有一些优化原则，能够让Sprite变得更小：
按照颜色合并
比如将颜色调色板相近的图标组合在一起
避免不必要的空白
让图像在移动设备上更容易处理
将元素水平排列
而不是春植的，这样Sprite会稍微变小
将颜色限制在256种以内
这是PNG8格式的颜色数量上限
先优化单独的图像，再优化Sprite
在调色板色值有限的情况下，可以更容易减少颜色数
通过控制大小和对齐减少反锯齿像素的数量
如果一个图标稍微接近正方形，通常可以通过在水平方向或垂直方向对齐来减少反锯齿像素的数量
避免使用对角线渐变
这种渐变无法被平铺
避免在IE6中使用alpha透明图像
将需要真彩色alpha透明的图像保存在单独的Sprite中
每2~3个像素改变渐变的颜色
而不是每个像素都改变
处理logo时候要小心
logo很容易识别，就算非常小的修改也会很容易被注意到
五.总结
按照上面的解释，一般情况下PNG似乎是最好的选择，动画用GIF，高清图片用JPEG
其实WebP格式也已经出现很久（2010年）了，目前兼容性还不是特别好，但有相应的解决方案，更多信息请查看WebP 探寻之路
参考资料
- 《高性能网站建设进阶指南》
