网页中通常使用的图像只有三种格式,即GIF、JPEG和PNG。
GIF格式
网页中最常用的图像格式是GIF(Graphical Interchange Format,可交换的图像格式)。经过多次修改和扩充,其功能已经有了很大的改进。
使用GIF格式的图像最多可以显示256种颜色。此格式的特点是图像文件占用磁盘空间小,支持透明背景,支持动画和交织下载。
1、可以使用Firewords等工具创建透明图像。
GIF图像有时会出现一定程度上和失真现象,即“毛边”。对于色彩不丰富、棱角分明的图像,建议采用GIF格式存储,这样可以有效地避免出现“毛边”现象。
2、逐层显示
GIF图像可以存储为交织文件格式。具有交织文件格式的GIF图像,在浏览器中显示时会一层一层地显示。随着图像的慢慢下载,画面会逐渐由模糊变清晰。使用交织文件格式对网络连接慢的浏览者很有利,可以在没有全部下载时看到图像的模糊版本。
若想把图片存储为交织文件格式,通常使用各种图像处理软件和【保存】或者【另存为】命令,文件格式选择GIF,并单选类似的【交错】选项即可。
3、GIF动画
GIF格式可以存储动画图片,这也是它最突出的特点。用户在图像处理软件中制作好GIF动画中的每一幅单帧画面,然后把这些静止的画面连在一起,设定好帧与帧之间的时间间隔,再保存成GIF格式即可制作一个动画。
JPEG格式
另一种经常使用的图像格式是JPEG(Joint Photographic Experts Group,直译为联合图像专家组)格式。JPEG文件的扩展名.jpg或.jpeg。其压缩技术十分先进,使用有损压缩的方式去除冗余的图像和彩色数据,在获取极高压缩率的同时能展现十分丰富生动的图像,因此特别适合在网上发布照片。
JPEG图形文件格式的特性如下:
1、支持大约1670万种颜色,可以很好地再现摄影图像,尤其是色彩丰富的大自然照片。
2、JPEG格式支持很高和压缩率,文件占用磁盘空间小。
3、有损压缩的JPEG格式可能会造成图像质量上的损失。
可以通过设置生成的JPEG图像的较高【品质】,来弥补图片质量的缺陷,但这样会增大磁盘占用空间。通常选择80%的图像【品质】,肉眼就很难分辨原始图片和压缩过的图片之间的显示差别。
用户可以根据自己的需要,在保存JPEG图形文件时自定义图像质量。
PNG格式
PNG(Portable Network Graphic,可移植网络图形)开发于1995年。它是一种新的无显示质量损耗的文件格式,同时还可以避免出现GIF自身的一些缺点。
1、PNG格式汲取了GIF和JPEG二者的优点,存储形式丰富,兼有GIF和JPEG的色彩模式。
2、PNG格式能把图像文件大小压缩到极限以利于网络的传输,却不失真。PNG采用无损压缩方式来减少文件的大小,在这方面与牺牲图像品质以换取高压缩率的JPEG格式相比有所不同。
3、PNG格式的图像显示速度快,只需下载1/64的图像信息就可以显示出低分辨率的预览图像。
4、PNG格式同样支持透明图像的制作。采用这种格式可以有效地避免出现GIF格式中出现的“毛边”现象。
5、PNG是第一种支持监视器的伽码设置修正的图像文件格式,这使得PNG格式的图像在任何平台上都可以得到同样的显示效果。
PNG也有缺点。作为一种图像文件格式,与JPEG的有损耗压缩方式相比,PNG提供的压缩量较少;PNG对多图像文件或动画文件不提供任何支持,在这方面不如GIF格式;同时它只有少部分浏览器支持,应用不够广泛。
此外,网页中偶尔也能看到BMP格式的图像,最常见的是网站注册页面或登录页面中的“验证码”,其实它一般就是网站程序自动生成的bmp格式小图片。BMP文件通常是不压缩的,所以它们通常比同一幅图像的压缩图像文件格式要大很多。例如,一个800×600的24位几乎占据1.4MB空间。因此它们通常不适合在因特网或者其他低速或者有容量限制的媒介上进行传输。
Favicon.ico(网站小图标)
所谓favicon,即Favorites Icon的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站。当然,这不仅仅是Favicon的全部,根据浏览器的不同,Favicon显示也有所区别:在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中,favicon不仅在收藏夹中显示,还会同时出现在地址栏上,这时用户可以拖曳favicon到桌面以建立到网站的快捷方式;除此之外,标签式浏览器甚至还有不少扩展的功能,如FireFox甚至支持动画格式的favicon等。
在网页中使用Favicon最简单的办法便是将制作好的图标文件命名为Favicon.ico,然后将其上传到网站的根目录即可,浏览器会自动调用该图像文件。
如果您需要将Favicon.ico放到其他目录下(例如dir目录),或者希望让不同的网页显示不同的Favicon,就需要在网页HTML文件中做设定了,具体设置也很简单,在Html中的<head>部分加入如下的代码:
<link rel=”shortcut icon” href=”/dir/favicon.ico” type=”image/x-icon”>
需要说明的是,在很多关于Favicon.ico的说明中,常见到要求图片为16色的说法,应该说这类说法大大过时:在早期如Windows 95时期,16色的Favicon.ico可能是个稳妥的选择,保证其在大多数情况下正常使用,但现在,完全不存在那类限制,16色只能使图标的展示效果大大降低。
Firefox还支持GIF动画格式的Favicon,使用方法如下:
首先制作一个16*16的gif动画,然后在html代码 中加入如下代码:
<link rel="icon" href="animated_favicon.gif" type="image/gif">