5.1　关于Web图像

让我们来看看创建Web图像时应记住的六个要素。

1. 格式

在纸上打印图像的人不必担心读者将使用什么查看图像。但Web设计人员就要考虑这个问题。每天，人们通过数以百万计的Mac、基于Windows的PC、手机、平板电脑等各种各样的设备访问Web。网站中的图像应该采用这些操作系统都能识别的格式。当前，Web上用的最广泛的三种格式是GIF、PNG和JPEG。当前的浏览器都能查看这三种图像格式。

你应该选择质量最高，同时文件最小的格式。

JPEG格式适用于彩色照片，因为它包含大量的颜色并进行了合理的压缩，使文件变得比较小，参见图5.1.1。它是一种有损的格式，因此在将图像保存为JPEG时会丢失一部分原始信息，但通常这样做是值得的，因为你的页面可以更快地加载。我们将在“速度”一节继续讨论这个问题。

图5.1.1　全彩的照片应保存为JPEG或PNG-24格式

PNG和GIF格式通常用于保存拥有大量纯色和图案或有透明度的标志之类的文件。对于连续的颜色或重复的图案，PNG和GIF格式的压缩效果要好于JPEG的。选择PNG通常更好一些，因为它对小文件的压缩算法更好，且具有更高级的透明度支持（alpha透明度），参见图5.1.2。

图5.1.2　标志和计算机生成的其他图像（即只有少数几种颜色的图像）可通过ZIP有效地压缩，因此通常保存为PNG-8格式

1. 颜色

大多数计算机显示器可以显示数以百万计的颜色，但也有例外的情况。有的图像格式的调色板是有限的。GIF和PNG-8图像只能拥有256种颜色（对标志和图标来说这已经够了）。

照片和复杂的插图应保存为JPEG或PNG-24格式，因为它们要在单张图片中包含更多的颜色。

1. 尺寸和分辨率

数字图像以像素为单位进行度量。300万像素的数码相机可以照出2048像素宽、1536像素高的照片。这有多大呢？视情况而定。如果用256 ppi（pixels per inch，像素每英寸）的打印机打印图像，它的尺寸就是8英寸×6英寸（约20厘米×15厘米）。但如果在网页上使用这个图像，它的尺寸就取决于访问者显示器的分辨率了。分辨率大约为86 ppi（可能低至约72 ppi，或高至约100 ppi），这时图像将显示为28英寸×21英寸（约71厘米×53厘米）。这太大了，参见图5.1.3。

图5.1.3　这个图像为2048像素宽。在Photoshop中，使用256 ppi的输出分辨率，它只有6英寸×8英寸（约15厘米×22厘米）。而在这里的Firefox中，分辨率是由访问者的显示器决定的。假定分辨率为72 ppi，该图就有28英寸（约71厘米）宽

也许，最好根据平均网页宽度考虑图像的尺寸。由于长期以来1024像素×768像素的屏幕分辨率都是标准的分辨率，网页设计人员已习惯于让页面保持960像素宽，从而避免产生横向滚动条，让访问者可以看到整个页面的内容（参见图5.1.4）。

图5.1.4　这个图像有500像素宽，大约为1024像素宽的浏览器窗口宽度的一半

事实上，已有越来越多的人开始使用更大的显示器（现在，超过85%的分辨率大于1024像素×768像素），但这并不意味着人们会让单个浏览器窗口填满这些更大的显示器。如果不查看其他的程序（或其他的浏览器窗口），在过宽的浏览器中阅读文本是一件很累的事。不过，仍有设计人员倾向于扩宽他们的设计，并使用宽度灵活的设计，让内容可随着浏览器窗口放大或缩小。

同时，智能手机和平板电脑的使用已变得越来越多，因此应该始终考虑屏幕大小和受限的下载速度。

这里，分辨率可以代表两种不同的概念：一个是显示器或图像中的实际像素数量（如640×480），一个是显示器或图像上1英寸的像素数量（如72或86 ppi）。不管怎样，分辨率越高，像素越多。在纸上，像素可以增加细节或尺寸。在屏幕上，则总是像素越多，图像就越大。

1. 速度

Web图像与可打印图像的另一项区别在于Web访问者必须等待图像下载（试想等待早报上的图像逐渐显现的情形！）。

如何让下载时间最短呢？最容易的办法就是使用小图像。图像文件越大，访问者看到它之前所花的时间就越长。

第二种提高下载速率的方式就是对图像进行压缩。JPEG的强大之处在于它可以大幅降低文件的大小，但JPEG有两个主要的缺点。首先，它的压缩信息占用大量空间，因此不适合小图像。其次，它是有损压缩——为了节省空间，可能会永久性地牺牲一些细节。对图像进行解压也找不回丢失的数据。如果想在未来某个时候对图像进行编辑，就需要用无压缩格式（如PSD或TIFF）进行保存，直到编辑完成以后再保存为JPEG。

PNG和GIF是无损的格式，因此它们可以在保证质量的情况下压缩图像。拥有大片单色区域的图像（如标志、显示的文本、插图等）最适合用这两种格式。此外，PNG的压缩质量比GIF好一些。

1. 透明度

出于两个原因，透明度很重要。首先，使用透明度将一个图像置于另一个图像的后面可以创建复杂的布局。其次，可以利用透明度为图像创建非矩形的边缘，增强页面的视觉吸引力。PNG和GIF都支持透明度，但JPEG不支持。

在GIF格式中，一个像素要么是透明的，要么是不透明的。而PNG则支持alpha透明。alpha透明既支持全透明，又支持半透明。这意味着具有复杂透明背景的图像使用PNG的效果要好于使用GIF的效果，因为使用PNG可以让边缘变得平滑，避免产生锯齿。

1. 动画

纸上永远也看不到的一样东西就是动画。但在万维网上，它们随处可见。动画可以保存为GIF，但不能是JPEG或PNG。

在图像内显示动画已经用得越来越少了。通常可以使用Flash、CSS动画和JavaScript创建动画。近几年，由于iOS不支持Flash，且JavaScript和CSS的功能逐渐变强，因此万维网上用Flash创建的动画已经变少了。