2.1 网页图片简介

在网页中主要包括文字、图片、动画、视频等视觉元素。本章内容主要是围绕图片视觉元素的设计进行讲解，因此先来了解图片在网页版面设计中的相关术语。

1．版面率、图版率

版面率也称空白量。在一个版面里上、下、左、右都有一定的空白，称为留白。留白内侧文字与图片所占空间的面积与版面总面积的比率称为版面率。

图版率指版面中除文字外，图片面积与整个版面的比率。由于图片比文字具有更高的视觉传达性，人们在阅读时，首选图版率高的页面，可见图版率在页面排版中占有很重要的地位。如图2-1～图2-3所示，图版率不同给人以不同的视觉感受。

图2-1 图版率0%，阅读性弱，版面枯燥

图2-2 图版率50%，阅读性较强，版面充满生气

图2-3 图版率100%，具有强烈的视觉冲击力

从上面3张图可以看出，不同图版率的页面拥有不同的页面风格。图版率高的页面较活跃，图版率低的页面较沉稳。如果页面中只有图或只有文字，会降低页面的可读性，削弱页面的视觉效果。因此良好的页面一般都具有图文并茂、区域分明、主题突出等特征。

2．位图、矢量图

网页中的图片有位图和矢量图两种类型。位图也称点阵图，是由像素点组成的。当放大位图时，可见其由无数个小方格构成。位图常采用RGB颜色编码方式，通过分辨率来界定质量，可用Photoshop等软件来制作。常见的位图格式有GIF、JPEG、PNG等。

1）GIF文件的后缀名为“.gif”。采用的是一种基于LZW算法的连续色调的无损压缩格式，压缩率一般在50%左右。在一个GIF文件中可以保存多幅彩色图片，可构成一个简单的动画。

2）PNG文件的后缀名为“.png”。采用从LZ77派生的无损数据压缩算法，设计目的是试图替代GIF和TIFF格式，同时增加一些GIF格式所不具备的特性。使用PNG格式存储灰度图片时，图片深度可多达16位；存储彩色图片时，图片深度可多达48位；还可以存储多达16位的α通道数据。一般应用于Java程序、网页中，原因是其压缩率高，生成的文件体积小。

3）JPEG文件的后缀名为“.jpg”或“.jpeg”。这是与平台无关的格式，具有调节图片质量的功能，允许按不同的压缩比例对文件进行压缩，压缩比例通常在10:1到40:1之间。不过，这种压缩是有损耗的。JPEG格式压缩的主要是高频信息，对色彩信息保留较好，可以支持24位真彩色JPEG格式适合应用于网络，可减少图片的传输时间。

4）矢量图是根据几何特性来绘制图形。矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内存空间较小，可以包含独立的分离图片，可以自由无限制地重新组合。

综上所述，矢量图的特点是和分辨率无关，放大后不失真，适用于图形/图标设计、标志设计等。位图的特点是和分辨率紧密相关，色彩艳丽、形式多样；在缩放情况下会失真，表现为图片边缘有锯齿；文件较大，不利于网络传输，因此作为网页图片时一般保持分辨率为72像素。