转载

前端开发之网页图片格式的选择

在进行前端页面开发时，不可避免的会遇到图片格式选择的问题，它虽是一个细节问题，但对会影响文档的大小，进而网页的加载性能产生一定的影响。比较常见的图像文档格式有三种：JPG/JPEG、PNG8/PNG24、GIF。

*************************************************************************************************************************

首先聊一下三者中的大师兄——JPEG

它是Joint Photographic Experts Group（联合图像专家小组）的缩写，是第一个国际图像压缩标准，简称为JPG。它的图像压缩技术可以说是所有图像压缩技术的基础，同时它也是一种比较典型的使用破坏性压缩的图像文档格式，比较简单粗暴了点儿。它以24位存储单个位图，因此比较适合存储那些允许轻微失真的颜色丰富的图片场合，正因为其色彩的丰富性，掩盖了一些细节线条边缘的失真，常见的用武之地如数码照片、高清图、壁纸等。

其次再来说一下网络上最流行的活力精灵——GIF

GIF就是图像交换格式（Graphics Interchange Format）的缩写，它采用的是无损的压缩存储，没有任何信息丢失，但是采用的是8位信息存储，同时还支持透明色，这也使它具有了短小精悍的特点，我们可以放心大胆的拿它来存储一些小图标，然而这些都不是它的活力体现，它最具特色就是擅长存储动态图片（即由若干帧图片联结而成的图片，还记得你聊微信时经常遇到的逗比表情吗，对，它就是gif格式的图片），这些还不够，gif还支持隔行扫描，所谓隔行扫描就是能够令图片在浏览器中更快的加载和显示，哈哈，是不是没有理由不爱上它了。

最后来聊一下三者中的完美主义者——PNG

前边说的老大哥JPEG存储的文件大小也忒大了，而短小精悍的GIF你支持的色彩也忒单调了，那么好了，该我PNG出马了，PNG 同样使用了无损压缩格式，同样支持透明效果，传说PNG 的开发就是因为 GIF 所使用的无损压缩格式专利问题而诞生的（GIF格式采用LZW算法进行压缩，此算法是Unisys申请的一项专利。在很久很久之前，如果你想使用GIF格式，那么就意味着你需要向Unisys付费申请专利许可。不过值得高兴的是，此项专利技术已于2003年6月20日过期，我们现在可以免费的使用GIF了）。先来一个PNG8，它跟GIF实际上差不多，当你想存储一些颜色不是很丰富的静态图片是，它就派上用场了，LOGO啊神马的都可以尽管放马过来吧。PNG24，见名知意，它支持了多达 160 万个色彩！虽然PNG24看起来是如此的perfect，但是它的文档大小会相对PNG8增加，并且，比较不幸的是IE6不支持透明的PNG图片，对于IE6的种种诟病，作为前端开发的我们早已司空见惯，啥，想知道如何医治这个诟病？来，给你一副包治病根的药方： http://www.zhangxinxu.com/wordpress/?p=14

正文到此结束