下载掌阅APP，畅读海量书库
立即打开
图片在电脑中以文件形式存在，图片的格式很多，不同格式的文件大小也不同。在网页中对图片不同格式的理解非常重要。在网页制作中，制作者最关心的是如何在保持图片质量的同时，能尽量压缩图片的文件大小。
说明 ：影响网页表现的最大瓶颈是网络的带宽。网页的元素中，图片文件大小相对较大、较占带宽，影响网页打开速度。所以网页图片文件越小，打开网页越快，浏览者才有兴趣继续看网页。
图片文件的格式是计算机存储这幅图的方式与压缩方法，要针对不同的使用目的来选择合适的格式。不同程序也有各自的图片格式，如“PSD”是PhotoShop软件的格式，内部格式带有软件的特定信息，如图层与通道等。不过很多程序无法打开“PSD”格式，它不属于通用格式，网页制作中更不会使用它。
不同的图片格式各自以不同的方式来表示图形信息，常用的格式如下。
（1）BMP。这是微软公司自身图形文件的点位图格式，比如读者采用Windows自带的画图程序绘画，默认生成的就是BMP格式的图片。
BMP格式保存的图像没有失真，由于它保存每个像素的信息，不支持文件压缩，所以文件也比较大。网页制作中很少使用BMP格式的图片。
（2）JPEG。JPEG是与平台无关的格式，支持最高级别的压缩。不过，这种压缩是有损耗的，即压缩比越大，文件越小，图片质量越差。
正因为JPEG图片可以选择多种压缩级别，非常灵活，所以使用非常广泛。比如，大多数码相机默认的照片存储格式就是JPEG。
在肉眼无法明显分辨质量损耗的前提下，JPEG文件大小可以远远小于BMP，所以JPEG也广泛应用于网页制作领域。
（3）GIF。GIF图片以8～256色存储图片数据。GIF图片支持透明度、压缩、交错和多图像图片（动画GIF）。GIF透明度不是alpha通道透明度，所以不能支持半透明效果。GIF文件规范的GIF89a版本中支持动画GIF。
也就是说，GIF的特点是颜色数量少，很多情况下图片文件大小可以远远小于JPEG，而且支持透明度。最有意思的是，GIF支持动画图片，所以GIF格式非常适合网上传输。
（4）PNG。PNG图片格式可以任何颜色深度存储图片，它也是与平台无关的格式。PNG也支持透明度，以及压缩。PNG格式分为PNG-8和PNG-24，PNG-8格式类似于GIF格式，支持8～256色。而PNG-24格式质量最好，因为PNG-24压缩不失真并支持透明背景和渐显图像的制作。IE浏览器对PNG支持不是很好，所以目前网页制作中很少使用。
说明 ：由于PNG的高品质及透明度支持，Flash动画制作中比较常用。
在D:\web\目录下创建img目录，放入BMP、JPEG和GIF这3种格式的图片，并分别命名为bmp.bmp、jpeg.jpg和gif.gif。创建网页文件，命名为img_type.htm，编写代码如代码5.1所示。
代码5.1 不同的图片格式展示：img_type.htm
在浏览器地址栏输入http://localhost/img_type.htm，浏览效果如图5.1所示。
图5.1 不同的图片格式展示
以上3种格式的图片虽然视觉差别不大，但文件大小相差甚远。
那么在建设网站时，图片的不同格式如何选择呢？上一节说过BMP是没有压缩的图片格式，文件非常大，所以不予选择。也就是说制作网页时，图片格式一般在JPEG和GIF中选择，先比较一下JPEG和GIF各自的特点。
JPEG是有损压缩，以24位颜色存储，颜色比GIF更为丰富。一般适用于对颜色丰富程度要求高的图片，如照片。
注意 ：24位颜色不是24种颜色，而是2的24次方种颜色。
GIF最多只能存储256种颜色，在颜色数量少的图片中能保持更小的文件大小，并且支持透明度及动画。一般适用于颜色少的图片，如企业标志、小图标和网页动画广告。
JPEG格式和GIF格式没有绝对的谁好谁坏之分，根据网页对图片的不同需要选择。
相比JPEG格式，颜色越多的图片，GIF格式文件大小占劣势，并且图片质量差；颜色越少的图片，GIF格式文件大小占优势，并且能保持图片质量。