网站图片的优化技术研究

中国铁路信息技术中心中铁信计算机工程公司 谢玉洁

网站图片的优化技术研究

中国铁路信息技术中心中铁信计算机工程公司 谢玉洁

本文在对常用的网络图片格式进行分析基础上，集中讨论了网络图片的优化问题。从网络图片格式的选择与使用、图片数据的预处理、网络图片的自适应加载显示和动态压缩传输等方面论述了图片优化的方法。上述方法的综合使用在实际网站的优化过程中表现出了良好的技术性能，显著提高了网站的访问速度和负载能力。

网页；图片格式；动态压缩；自适应显示

1.引言

随着信息网络技术的快速发展，各种图片在网络上大量传输和显示。由于图片表现的信息和内容非常丰富，所以在各种网络应用、网站、数据库中都有大量的使用[1,2]。根据针对国内外网络信息的统计，图片内容所表示的信息和容量占到了当今网络数据的60%以上；网络图片在为网络用户带来非常直观、愉悦体验的同时也消耗了大量的网络传输、存储和计算机运算处理能力。

为了提高用户的网络体验、加快网络传输速度、节约使用计算机资源。对网页图片的优化是一个非常重要的问题。国内外的大型网络服务提供商均把网络图片的优化技术作为工作的重点，制定了一系列的图片性能优化规范和措施，研究开发了一系列与图片优化存储、传输有关的程序框架、软件工具；上述工作为优化网站性能、提高传输和处理速度、节约网络和计算机资源做出了重要贡献，提高了网络用户的体验和感受。本文将在对网络图片数据格式进行简要介绍和分析对比基础上，对网络图片数据的处理、存储、传输等优化技术进行介绍。

2.网络图片数据格式

网络系统中常见的图片格式主要包括JPEG、GIF、PNG、APNG、WebP、SVG等格式，BMP等格式图片由于没有采用任何压缩技术，所需要存储和传输的数据量特别大，所以在网络图片中一般不推荐使用。

各种常用的图片格式可以分为标量图和矢量图两种格式。标量图表现的内容丰富、以图像的像素为基础通过压缩得到，传输效率高，不直接支持动态缩放显示。矢量图以基本的图形元素（点、线等）和色彩为基础，可以任意缩放显示，在工程图中具有特别重要的地位。

JPEG图像是在网络图片中使用最为广泛的一种图片数据格式，它把原始图片数据根据标准算法和设定的压缩参数有损压缩（压缩后的图片不可能完全还原为原来的位图数据图片）的方式得到目标图片，在显示时再解压显示。JPEG可以支持显示任意复杂的图片，对图片的颜色及形状等没有任何特殊要求，与所有的浏览器均具有良好的兼容性。JPEG图像格式不支持显示透明图片、也不支持显示动画。所以其使用也具有一定的限制。

GIF图片是另外一种使用非常广泛的图片格式，它采用的是无损压缩算法，与目前所有的浏览器可以良好兼容。GIF图片支持显示动画和透明图片，所以在网络上被大量使用。由于GIF图片压缩后图片数据较大，采用较为简单的颜色搭配和图像元素可以部分弥补其压缩率不高的特点。GIF图片一般被用于显示小尺寸的各种动画。

PNG图片也是一种在网络上应用非常广泛的图片格式，它采用的也是无损压缩的方式，所以其图片数据量较大。PNG的优点是可以支持以比较高效的方式显示透明图片，但是不支持动画显示。所以在网络上需要显示大尺寸的透明图片的时候一般优先选用PNG格式的图片方式。

此外，对于新版本的浏览器（Firefox、Chrome、Safari等），支持一些新型的图片格式的显示，例如APNG、WebP等格式。APNG是一种无损压缩格式的图片，支持半透明效果的动画。WebP是一种有损的压缩方式，可以支持复杂的图像和颜色的显示。上述图像格式由于支持的浏览器有限制，所以一般被用于某些浏览器平台可预知的场合。如果网页需要在不同的浏览器环境下正常显示，并不建议采用上述格式存储和传输图片。但是随着浏览器的发展和网络终端设备的不断更新，APNG、WebP等格式的应用也会逐渐增加。

SVG是一种无损压缩的矢量图格式，一般用于图形简单，同时又需要良好的缩放体验的场合，可以实现动态控制的图片显示特效。SVG对浏览器也有一些要求，一般应在IE8及其兼容的浏览器上才能正常显示。

3.网络图片使用

针对特定的网络应用，网络图片数据的优化首先需要考虑的问题是是否需要使用图片的方式来表示必要信息，合理使用图片可以优化网站的整体性能和显示效果，大量不合理使用图片，同时不采取必要的针对图片的优化显示技术，将使网站整体性能严重降低，同时也不利于提高用户的使用体验。在某些未经过优化的网站中，把需要而且可以用文字方式显示的信息在服务器上通过软件生成图片并缓存起来或者直接将可用文字显示的信息用图片方式显示。这种网页不但无法被基于文字的搜索引擎检索，也严重增加了网络负担。

合理使用外部的图片数据处理库，也可以降低网络图片数据量，在各种网站上经常需要显示一些图片的特效（例如：渐变、阴影、圆角等），这些都可以用HTML、CSS、SVG代码实现，所使用的程序代码非常简洁，虽然使用了额外加载的图片处理库，但是在整体上可以显著降低数据量的大小和网页刷新显示速度。一般而言，额外加载的图片处理库在数据量上比图片要小很多，而一个库文件可以处理多张图片，所以效果非常显著。图像特效库的表现效果非常丰富，而且所需要的存储空间很小，传输方便，可以在分辨率不同的多种终端设备上展现出良好的效果。国内外很多的大型网站都通过使用 CSS效果、CSS动画等技术进行了优化，取得了较好的效果，实现了与分辨率无关的显示效果，可在任何分辨率和缩放级别上清晰显示图像，占用空间极小，运算处理速度快。

此外，网络字体的合理使用也可以起到降低图片使用量的效果。网络字体的使用在保持较好的显示效果的同时还可以保持文字的可搜索性，扩展了显示的样式，所以被大量使用于网页优化过程中。

在网页布局和设计阶段，对图片数据的合理规划是非常重要的一个环节。在良好规划的网站中合理使用各种图片数据，可以保证网站的简洁、高效、可维护等特点。直接、大量地使用各种照片、图片在网站建设过程中是非常不可取的，这将严重降低系统的性能。

此外，在不可避免或有必要使用图片的情况下，应对图片数据进行必要的预先处理，调整图片内容和格式也是非常重要的一个环节。图像的预处理包括图像内容的调整和图片裁剪、缩放、图片压缩格式和参数的调整等方面。在对图片进行裁剪时，尽量贴合需要显示的图形区域，避免留下空白区域，否则将增加输出图片的实际