张子国：图片在网页设计中的重要作用及实现方法

    【内容摘要】：近年来，全国各地网络化、信息化工作有了突飞猛进的发展，统计系统也不例外，统计四大工程建设，尤其是企业一套表工作促使全系统网络化、信息化工作迈上了新台阶。从国家局到县市局都建成了信息发布、信息交流的信息网站。本文就网页设计中图片信息所起的重要作用，以及网页图片预处理工作中应注意的问题加以阐述。希望能对我们的网页设计、编辑和维护工作有所裨益。

　　【关键词】：图片网页重要作用实现方法

　　根据CNNIC发布数据显示，到2016年底中国网民人数已达7.31亿，网络媒体已打破传统四大媒体，一跃跻身为第四大媒体。网络给人们提供了非常好的学习、工作和生活环境，人们学习、工作和生活已经离不开网络。支撑网络的是什么？信息。是什么将这些信息组织起来在网络上流动呢？网页。对于各类型的网站来讲，不管你是盈利的或是非盈利的，你的网页就是你的脸面，这张脸漂不漂亮、耐不耐看、吸不吸引网民主要靠的是三种信息：文字信息、图片信息和视频信息。充斥于网页中的大量文字信息，是靠着内涵丰富、生动漂亮的图片装饰点缀。应该说，图片信息在网页中既起着承载信息又起着点缀装饰的双重作用。

　　一、发现问题

　　统计网络和信息化建设，历经二十多年，从硬件到软件都得到了长足发展。统计系统从国家局、省局到地市局乃至县级局都建设了自己的信息网站，统计网络化、信息化建设工作步入新台阶。各级统计网站已成为信息发布、信息交流和学习借鉴的公共平台。笔者从这个平台中学习到了很多东西，但在浏览和学习过程中也发现了一些美中不足：1、网页设计的挺漂亮，但网页打开用时较长；2、网页图片看上去失真明显，有的“人瘦楼高”，有的“人矬地阔”，有的轮廓如锯齿似在波纹之中（为达特殊效果，故意为之的不在此讨论之列）。这些现象都会影响网页的观感，使受访者产生不耐其烦的情绪。鉴于这种情况，笔者有针对性的浏览了很多省级、地级和县级网站，发现省级网页出现此类情况较少，地级和县级网页出现这种情况较多。

　　二、问题解析

　　经过研究发现，出现上述问题大部分原因是网页图片没做预处理，或者预处理不当所致。

　　（一）、网页打开速度慢，造成原因为：1、直接使用数码相机拍摄的原始照片，不经剪裁和处理；2、网页图片虽经处理，但图片大小还是远远超过显示空间的大小，且使用图片数量太多；3、使用flash动画较多，动画尺寸较大、内容较复杂；4、使用javascript特效代码动态显示的图片太多，图片文件太大。

　　（二）、网页图片看起来纵向或横向失真，轮廓出现毛刺，造成原因是使用width和hight属性强行把大尺度图片压缩到网页设计的显示空间中，具体为：1、图片剪裁尺寸纵向合适，而横向远远超过网页中显示空间的横向尺寸，造成横向压缩比超过纵向压缩比，出现人瘦楼高现象；2、图片剪裁尺寸横向合适，而纵向远远超过网页中显示空间的纵向尺寸，造成纵向压缩比超过横向压缩比，出现人矬地阔现象；3、图片未经剪裁处理，或虽经剪裁但剪裁后图片纵向横向尺寸都远远超过网页中显示空间的纵向横向尺寸，造成高比例双向压缩，而且图片的精度还远远超过网页显示的精度72DPI（数码照片精度能达到300DPI），就会造成图片轮廓出现毛刺现象，看起来似在波纹之中，感觉很不美观。

　　三、做法建议

　　（一）、常用图片预处理软件的特点

　　网页图片预处理常用的软件有Photoshop（以下简称PS）和Fireworks（以下简称FW）。PS是由Adobe公司设计开发的图像处理软件，它拥有众多且强大的编修与绘图工具，可以更有效的进行图片编辑处理工作。FW是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是设计专家还是业余爱好者，使用FW都可以轻松地制作出十分动感的GIF动画，轻易地完成大图切割、动态按钮、动态翻转图等处理工作。两种软件都支持JPG、GIF和PNG格式文件。

　　（二）、常用图片存储格式的特点

　　网页图片文件的存储通常有三种格式：JPG、GIF和PNG。1、JPG（或JPEG）是“联合图像专家组”（JointPhotographicExpertsGroup）的首字母缩写，是一种广泛适用的压缩图像标准方式，JPG能够保存色彩丰富的图片，最适合在web中展示美丽的摄影图片和产品图片，支持高级压缩，可以使用不同的压缩比控制文件大小，但是它不支持透明，不支持动画，有损耗压缩会使原始图片质量下降。2、GIF(GraphicsInterchangeFormat)的原义是“图像互换格式”，是CompuServe公司开发的图像文件格式。它是网络上非常流行和普遍使用的一种无损压缩图形文件格式。一个GIF文件可以存储多幅彩色图像，多幅图像逐幅读出可构成简单的动画。GIF解码较快，其隔行存放的图像会让人感觉显示速度比其他图像快。GIF支持透明（全透明和全不透明）、支持动画。但GIF最多支持256种色彩的图像，所以比较适合背景图像、图画图形、栏目标题图片和色彩要求不太高的摄影图片，可以把色彩较少的图片压缩的很小。3、PNG(PortableNetworkGraphics)的原名称为“可移植性网络图像”，是网上接受的最新图像文件格式。PNG可以提供24位至48位真彩色图像。PNG支持高级无损耗压缩，支持alpha通道透明度，支持伽玛校正，支持交错。PNG受最新的Web浏览器支持。另外，PNG完全支持alpha透明（透明，半透明，不透明），但不支持动画。

　　PNG作为编辑JPEG的过渡格式可以保留更多的色彩；作为编辑动画GIF的过渡格式可以保留所有通道和帧图像，有利于重复编辑动画。对于非动画图片而言，GIF适合图形，JPG适合照片，PNG图形照片都适合，但PNG格式文件一般都比较大。

　　（三）、根据网页设计的具体要求，选择合适的图片预处理软件和合适的图片存储格式

　　表一是使用PS和FW软件预处理同一照片的情况。从“一区”中可以看出：减小图片精度可以同等比例减小图片的纵向和横向的像素数量，同时可以大幅度缩减储存图片文件的大小。

　　从“二区”和“三区”可以看出：在显示质量基本相同的情况下，用PS和FW处理过的图片分别以PNG、JPG和GIF格式存储时，其图片文件大小依次为PNG格式的>JPG格式的>GIF格式的，对于同种存储格式的图片文件，用PS软件处理比用FW软件处理的要大。

　　综上所述，要想把网站设计制作好、使之富有吸引力、让受访问者喜欢，不仅要使网页各栏目内容丰富、观点独特、内涵深刻、极具知识性和感召力，而且还要用图片配合好内容，将网页装扮的漂亮而不至过于艳丽、恬静之中不失活泼、给人以美的享受，同时还要控制好网页图片的数量、精度和大小，使得网页打开速度尽量快，没有停顿或停滞现象，让网页图片真正起到既承载信息又装扮网页、美化网页的作用。具体做法如下：

　　第一、标准页面为A4幅面大小，即8.5×11英寸，主页原则上宽度不超过一屏之宽，长度不超过3屏之长。全尺寸banner为468×60px，半尺寸为234×60px，小尺寸为88×31px，全尺寸banner大小不超过14K。其他位置图片的尺寸大小、文件大小网络上都有规范，这里不再赘述。

　　第二、彩色照片和产品图片选用PS软件，其他一般性图片选用FW软件预处理。图片尺寸要直接剪裁成预设显示空间的尺寸，图片精度减小到72DPI，不要使用width和hight属性强行缩小图片，避免造成网页图片纵向、横向或者纵横双向失真。彩色照片和产品图片用JPG格式存储，其他的选用GIF格式存储。

　　第三、页面上的边框和背景，尽可能使用CSS方式处理。非使用图片不可的，应使用FW软件剪裁成与网页显示空间同大的色深较小的GIF格式文件，使得图片文件尽可能的小。对于幅面较大的图片要使用FW的切割功能，将一个大型图片切割成几个小型图片，分块显示，可有效提高加载速度。

　　第四、对于动画图片，能使用GIF制作动画的，就不使用flash或javascript特效代码制作动画。当然，用flash和javascript特效代码制作的动画效果要优于GIF动画，但其动画文件块头也比较大，所谓有一利必有一弊。处理动画总的原则是在动画效果和文件大小上搞好平衡。

　　第五、确需提供受访者浏览的高清大图片，要使用文字或小图片链接方式浏览。删除image文件夹中所有不使用的图片文件，通过小图片链接浏览的大图片要另置文件夹保存，这也是提高图片加载速度的通用做法。主页中静态图片和动画图片总和应视情况尽量控制在100K以内，确保图片加载速度比较快。