I am houbiao beta 0.1

图像优化(一)深入了解GIF、JPEG、PNG

分类:Optimize

多彩多样的图像会为站点增色不少,但是你想没想过,在你创造这些美丽的图像的同时,网站的负荷也在随之增加,怎么办呢?总不能为了性能抛弃图像吧?当然不!几个很简单的动作便可让你的图像或轻微有损或无损的大大“瘦身”,我们着重点放在无损上,也就是在不损耗质量的前提下,将文件大小减到最小。就算精确到像素级别,优化后的图像和原图在视觉质量上也是一样的。如果不对图像进行优化,就会通过网络发送一些对用户体验没有任何帮助的额外数据。我们应该毫不犹豫的学习这门技术并应用到实际的项目中。

制作最优图像第一步,就是理解GIF、JPEG、PNG这三种广泛应用于WEB上的图像特点。然后根据实际情况来选择最适合的格式。

图形 VS 照片

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

照片:照片通常包含百万数量级的颜色,并且包含平滑的颜色过渡和渐变(Gradual),想象一下用相机拍摄的日落照片,或是绘画作品(比如蒙娜丽莎的微笑),这些更接近于照片,而不是图形。

就图像格式而言,GIF通常用来显示图形,而JPEG更适合显示照片。PNG两者都适合,甚至用调色板PNG(palette PNG即PNG8)显示图形比GIF会更好一些。

继续,我们来了解下GIF、JPEG、PNG这三种格式的区别。

GIF

GIF是图形交换格式(Graphics Interchange Format)的缩写,是一种调色板图像格式。

透明

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

动画

GIF格式支持动画。包含动画的图像由若干帧组成,就像几个图像同时包含在一个文件中一样。比如loading的加载符。

无损

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

逐行扫描

当生成GIF文件时,会使用一个压缩算法(LZW)来减小文件的大小。当压缩GIF时,会从上到下一行一行的对像素进行扫描。这种情况下当图像在水平方向有很多重复颜色时,可以获得更好的压缩效果。比如一个500*100的图像有很多水平的条纹,如果将这个图像90旋转,变成100*500,水平条纹变成垂直的了,那么后者的文件大小要大于前者。来个图说明。图像优化(一)深入了解GIF、JPEG、PNG这张水平的图大小为1.8KB,当把他做个90度的旋转后,图像优化(一)深入了解GIF、JPEG、PNG现在就变成了4.2KB。

隔行扫描(也称交错式扫描)

GIF文件支持可选的隔行扫描,在上图1的情况时,开启隔行扫描文件大小会轻微加大,图2影响则极小。

×GIF格式中使用的LZW无损数据压缩算法在2004年前是受专利保护的。

JPEG

JPEG意指联合图像专家小组(Joint Photogranphic Experts Group),也就是开发了这个标准的组织名称。JPEG是照片存储的实际标准。考虑到人类眼睛对颜色和光线强弱的感知,这种格式通过各种技术来减少显示图片所必需的信息,所以他能在经过高度压缩的文件中存储高分辨率的图像。

有损

JPEG是一种有损格式,用户可以自定义图像的质量级别,范围从0~100,不过就算你设置了100仍然会有质量的损耗。当你需要对一个图像反复进行修改的时候最好用无损图像格式来保存中间结果,然后再修改完成后再存为JPEG格式,否则你将在每次保存时都损耗一些质量。

当然这也有例外,下边的几个操作是无损的。1.旋转,只有在旋转90度的倍数情况下;2.裁剪;3.水平或垂直翻转;4.从标准模式切换到渐进模式(这个我没明白呢);5.编辑图像的元数据(移出照片拍摄的设备信息、光圈信息等对于用户体验没有直接用处的辅助数据)。

透明和动画

JPEG不支持透明和动画。

隔行扫描

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

JPEG是WEB上用来存储照片的最佳格式,然而这种格式不适合用来存储图形,因为有损的压缩方法将线条和清晰的颜色过渡都变成了“大色块”。

PNG

为了弥补GIF格式的缺点并规避LZW算法专利问题,PNG出现了。

调色板(PNG8)和真彩色PNG格式

PNG有几种子类型,大致分为两种:调色板PNG格式和真彩色PNG格式。你可以用调色板PNG代替GIF格式,使用真彩色PNG代替JPEG格式。

透明

PNG支持完全的alpha透明,但IE6是个例外。

动画

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

无损

PNG是无损的格式,可用来存储JPEG的中间修改过程。

逐行扫描

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

隔行扫描

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

综上所述,结论是,PNG更适合网络的传输及图像的展示。

与GIF比较

除了不支持动画以外,调色板PNG拥有GIF的所有功能。此外还支持alpha透明,并且通常压缩比更高(确实更高),文件大小更小,所以,应尽可能的使用PNG8来代替GIF。这里也有个例外,就是那些颜色数很少的小图像,这时GIF的压缩比可能会高一些。但是这种小图像我们应该都放在CSS Sprite中,应该HTTP请求的开销已经大大超过节省的那点贷款,而且用PNG格式保存CSS Sprite图像可以获得更高的压缩率。

与JPEG比较

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

1.当图像的颜色略超256种时,可以在不损耗任何可见质量的前提下,将图像转换为PNG8格式。令人惊奇的是,有时就算你剥离了1000+的颜色,都不会注意到图像中所发生的变化。

2.当“大色块”变得不可接受时,比如说包含很多颜色的图像或软件菜单的截图,这时候PNG就是更好的选择。

PNG在IE6的透明问题已经有很多开源的JS解决了,就不介绍了,再说下PNG8,这种格式很不幸,大部分图像编辑程序包括PS,只能保存二进制透明,目前的一个例外是FIREWORKS,这个软件对alpha有着极好的支持,另外还有一些命令行工具,可以将真彩色PNG转换为调色板PNG。书上介绍的是pngquant,需要的可以自己试试看,我就不写了。

本节先到这,下节分享图像优化的具体优化步骤及注意事项。

4464 reads 0 comment

上一篇:网站性能刻不容缓-从新认识CSS Images JS

暂时还没有回复信息

Leave a comment

*