3.3　页面中的图像应用

图像是网页构成中最重要的元素之一，美观的图像会给网页增色不少。另一方面，图像本身也是传达信息的重要手段之一，与文字相比，它可以更直观容易地把那些文字无法表达的信息表达出来，易于浏览者理解和接受，所以图像在网页中非常重要。

3.3.1　常见的网页图像格式

网页中常用的图像格式通常有3种，即GIF、JPEG和PNG。目前，GIF和JPEG文件格式的支持情况最好，使用大多数浏览器都可以查看它们。PNG文件具有较大的灵活性，并且文件较小，它对于几乎所有类型的网页图形来说，都是最适合的。但是，Microsoft Internet Explorer和Netscape Navigator只能部分支持PNG图像的显示，所以建议使用GIF或JPEG格式，以满足更多人的需求。

1．GIF格式

GIF是英文单词Graphic Interchange Format的缩写，即图像交换格式，该种格式文件最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，如导航条、按钮、图标、徽标，或其他具有统一色彩和色调的图像。

GIF格式的最大优点是用来制作动态图像，可以将数张静态文件作为动画帧串联起来，转换成一张动画文件。

GIF格式的另一个优点是可以让图像以交错的方式在网页中呈现。所谓交错显示，就是当图像尚未下载完成时，浏览器会先以马赛克的形式让图像慢慢显示，让浏览者可以大略猜出所下载图像的雏形。

2．JPEG格式

JPEG是英文单词Joint Photographic Experts Group的缩写，它是一种图像压缩格式。该种文件格式是用于摄影或连续色调图像的高级格式，这是因为JPEG文件可以包含数百万种颜色。随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。通常，可以通过压缩JPEG文件，在图像品质和文件大小之间达到良好的平衡。

JPEG格式是一种压缩得非常紧凑的格式，专门用于不含大色块的图像。JPEG的图像有一定的失真度，但在正常的损失下，肉眼分辨不出JPEG和GIF图像的区别，而JPEG文件大小只有GIF文件大小的1/4。JPEG对图标之类的含大色块的图像不是很有效，不支持透明图和动态图，但它能够保留全真的色调板格式。如果图像需要全彩模式才能表现效果的话，JPEG就是最佳的选择。

3．PNG格式

PNG（Portable Network Graphics）图像格式是一种非破坏性的网页图像文件格式，它提供了将图像文件以最小的方式压缩却又不造成图像失真的技术。它不仅具备了GIF图像格式的大部分优点，还支持48-bit的色彩，能更快地交错显示，支持跨平台的图像亮度控制、更多层的透明度设置。

3.3.2　网页中应用图像的注意要点

网页设计与一般的平面设计不同，网页图像不需要很高的分辨率，但是这不代表任何图像都可以添加到网页上。在网页中使用图像还需要注意以下几点。

• 图像不仅仅是修饰性的点缀，还可以传递相关信息。所以在选择图像前，应主要选择与文本内容及整个网站相关的图像。图3-8所示的图像与网站的内容相关。
• 除了图像的内容以外，还要考虑图像的大小，如果图像文件太大，浏览者在下载时会花费很长的时间去等待，这将会大大影像浏览者的下载意愿。所以一定要尽量压缩图像的文件大小。
• 图像的主体最好清晰可见，图像的含义最好简单明了，如图3-9所示。图像文字的颜色和图像背景颜色最好鲜明对比。
• 在使用图像作为网页背景时，最好能使用淡色系列的背景图。背景图像像素越小越好，这样将能大大降低文件的质量，又可以制作出美观的背景图。图3-10所示为淡色的背景图。
• 对于网页中的重要图像，最好添加提示文本。这样做的好处是，即使浏览者关闭了图像显示或由于网速而使图像没有下载完，浏览者也能看到图像说明，从而决定是否下载图像。

3.3.3　让图片更合理

网页上的图片也是版式的重要组成部分，正确运用图片，可以帮助用户加深对信息的印象。与网站整体风格协调的图片，能帮助网站营造独特的品牌氛围，加深浏览者的印象。

网站中的图片大致有以下3种：Banner广告图片、产品展示图片、修饰性图片，图3-11所示的网页中使用了各种图片。