网站图片格式与性能的专题研究

图片格式问题对性能产生的影响金蝶友商网用户体验与前端开发团队Martilo图片文件格式BMP、PCX、TIFF(TaglmageFileFormat)、GIF(GraphicsInterchangeFormat)、JPEG(JointPhotographicExpertsGroup联合图像专家组)、TGA(TaggedGraphics)、EXIF、FPX、SVG、PSD、CDR、PCD(KodakPhotoCD)、DXF(DrawingExchangeFormat)、UFO、EPS、PNG(PortableNetworfGraphics)运用在互联网页面中的图片常见基本格式GIF(GraphicsInterchangeFormat)JPEG(JointPhotographicExpertsGroup联合图像专家组)PNG(PortableNetworfGraphics)GIF(GraphicsInterchangeFormat)的原义是“图像互换格式”，是CompuServe公司在1987年开发的图像文件格式。GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50％左右，它不属于任何应用程序。目前几乎所有相关软件都支持它，公共领域有大量的软件在使用GIF图像文件。GIF图像文件的数据是经过压缩的，而且是采用了可变长度等压缩算法。所以GIF的图像深度从lbit到8bit，也即GIF最多支持256种色彩的图像。GIF格式的另一个特点是其在一个GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。GIF分为静态GIF和动画GIF两种，支持透明背景图像，适用于多种操作系统，“体型”很小，网上很多小动画都是GIF格式。其实GIF是将多幅图像保存为一个图像文件，从而形成动画,所以归根到底GIF仍然是图片文件格式。但GIF只能显示256色。GIF(GraphicsInterchangeFormat)JPEG格式是目前网络上最流行的图像格式，是可以把文件压缩到最小的格式，在Photoshop软件中以JPEG格式储存时，提供11级压缩级别，以0—10级表示。其中0级压缩比最高，图像品质最差。即使采用细节几乎无损的10级质量保存时，压缩比也可达5：1。以BMP格式保存时得到4．28MB图像文件，在采用JPG格式保存时，其文件仅为178KB，压缩比达到24：1。经过多次比较，采用第8级压缩为存储空间与图像质量兼得的最佳比例。JPEG格式的应用非常广泛，特别是在网络和光盘读物上，都能找到它的身影。目前各类浏览器均支持JPEG这种图像格式，因为JPEG格式的文件尺寸较小，下载速度快。JPEG(JointPhotographicExpertsGroup联合图像专家组)PNG(PortableNetworfGraphics)的原名称为“可移植性网络图像”，是网上接受的最新图像文件格式。PNG能够提供长度比GIF小30％的无损压缩图像文件。它同时提供24位和48位真彩色图像支持以及其他诸多技术性支持。由于PNG非常新，所以目前并不是所有的程序都可以用它来存储图像文件，但Photoshop可以处理PNG图像文件，也可以用PNG图像文件格式存储。PNG(PortableNetworfGraphics)计算机绘图分为点阵图(又称位图或栅格图像)和矢量图形两大类，认识他们的特色和差异，有助于创建、输入、输出编辑和应用数字图像。位图图像和矢量图形没有好坏之分，只是用途不同而已。因此，整合位图图像和矢量图形的优点，才是处理数字图像的最佳方式。在看GIF图片或者动画的时候往往能感觉到颜色很单调，如果是颜色变化复杂的图片转换成GIF格式甚至都会出现失真，虽然GIF是种无损压缩格式，不过它只支持索引颜色，索引颜色是在早在DOS时代流行的，早应该淘汰了，因为只有256色，对于颜色变化复杂的图片是显然不够的。至于JPG，也许看上去颜色是没有瑕疵的，的确，它支持上百万种颜色，可是JPG却是种有损压缩格式，有损压缩会放弃图像中的某些细节，以减少文件长度。而且有损压缩对图像会产生不可恢复的损失，所以经过压缩的JPG的图片一般不适合打印，在备份重要图片时也最好不要使用JPG。还有，JPG也不如GIF图像那么灵活，它不支持图形渐进、背景透明，更不支持动画。最后说说PNG格式，PNG代表PortableNetworkGraphics（可移植网络图形），Fireworks的默认存盘格式就是PNG。这种新的图片文件格式集合了GIF和JPG格式的优点，从目前来看，它必将在未来的Web网页中大显身手，成为Web中的主要图片格式。PNG支持背景透明、图形渐进和动画，而且是种无损压缩格式，压缩比例要大大超过LZW等传统的图片无损压缩算法。同时它也支持几百万种颜色，既适合艺术线条，也适合照片。可移植网络图形压缩效果PNG-8PNG-24•位图毛边锯齿无•矢量图无无•跟具不同情况分析图片输出效果•图片色彩的深浅对输出图片的大小有影响相对较深的图片色彩下PNG比GIF容量大而且图片质量要高相对较浅的图片色彩下PNG比GIF容量小而且图片质量要高•JPG不需特效要求最佳选择存储空间与图像质量兼得的最佳比例但是是有损压缩，再次利用效果不佳图片切割输出效果对比位图矢量图透明图层PNG图片网格化效果•PNG-8PNG-24•位图白边无•矢量图无无我们明显的可以看到在这里：相对较深的图片色彩下PNG比GIF容量大而且图片质量要高•跟具不同情况分析图片输出效果•图片色彩的深浅对输出图片的大小有影响相对较深的图片色彩下PNG比GIF容量大而且图片质量要高相对较浅的图片色彩下PNG比GIF容量小而且图片质量要高•JPG不需特效要求最佳选择存储空间与图像质量兼得的最佳比例但是是有损压缩，再次利用效果不佳图片切割输出效果对比位图矢量图透明图层PNG图片网格化效果•PNG-8PNG-24•位图白边无•矢量图无无我们明显的可以看到在这里：相对较浅的图片色彩下PNG比GIF容量小而且图片质量要高•跟具不同情况分析图片输出效果•图片色彩的深浅对输出图片的大小有影响相对较深的图片色彩下PNG比GIF容量大而且图片质量要高相对较浅的图片色彩下PNG比GIF容量小而且图片质量要高•JPG不需特效要求最佳选择存储空间与图像质量兼得的最佳比例但是是有损压缩，再次利用效果不佳图片切割输出效果对比位图矢量图透明图层存储空间与图像质量兼得的最佳比例所以网页中运用广泛！提供透明的无损压缩图片最佳选择！什么情况下用GIF图片?动态、透明、邮件图片JPEGGIFPNG上图呈现的是在网页中出现的图片格式比例197KJPG格式ChromeFirefox浏览器有这种图片压缩特性！渐进式的下载模式压缩模式是在图片在一定的大小范围内启用！一般200K左右注意点：1、隐藏你要通过输入的文字2、分割时要保持他的整体意义整体性3、尽量让每一部分是完整的4、注意一些交互上操作切片工具对整体进行合理的分割1、尽量少图片；尽量好交互浏览器页面尽量少用图片或精细化图片2、图片尽量用色彩和像素点代替解决好美观和下载速度这把双刃剑3、做切割对比测试制作人员掌握图片切割规律提高浏览器访问页面速度我们设计和制作中能做的：醒目性：指用户把注意力集中到你诱导起浏览的部分和内容可读性：指网站的内容让人容易读懂明快性：指准确、快速转达网站的构成内容造型性：维持整体外型上的稳定感和均衡性创造性：有鲜明个性，创意是必不可少的布局的构成原则上是:统一、协调、流动、强调、均衡Tips:网页布局–主要构成原则提高浏览器下载页面效率