HTML图像技术

一、概述

 

在设计网页时，常用的两个图像格式是GIF和JPEG/JPG。目前网页上最常见的图片格式还有PNG格式。微软IE浏览器还支持BMP图形格式， Netscape Navigator目前还不支持这种格式的图形文件。我们来看几种主要的图象格式。GIF文件特别适合于图标、线条等简单图象，这是因为GIF最多支持 256色，故不适于高度细节化的图像。JPEG则支持任意多的色彩，并且它是一种高压缩方式，故生成的文件比同样的GIF文件小得多。

 

1． GIF:GIF(Graphics Interchange Format)格式是网页上常用的图像格式之一　。GIF图像是一种压缩格式的图像，它的压缩方式是无损的。但是，它只支持256种颜色。

 

GIF图像有版本之分，最常见的版本是GIF87a和GIF89a。GIF89a更为流行，这是因为它支持下列几种技术：透明性;交错技术;动画特性。透明性是使GIF文件中某种颜色不可见的功能，当GIF文件在Web页上显示时，图象下的背景可透过图象的透明部分，产生图象浮在背景上的效果。交错功能则能在显示时慢慢加强分辨率而渐渐清晰。GIF89a这两种特性的有效应用可产生漂亮的Web页面。

 

2． JPEG:JPEG(Joint Photographic Experts Group)格式的图像也是一种压缩格式的图像，它的特点是采用有损压缩算法,获得较小的文件大小，它可以支持16色，24色，32色等真色彩。JPEG 是Joint Photographic Experts Group的缩写，由于其先进性，受到越来越多的支持。

 

3． PNG:PNG是Portable Network Graphic的缩写，中文通常译作便携网络图像。这是一种新的图像格式，它被提议作为将来的一种标准

 

对图像进行处理的程序中，最有名的工具有PhotoImpact ? 4.0和Photoshop 5.0。可能还需要一种GIF87转换为GIF89a的小工具GIFTool。它可创建透明的交错储存图像，并且可对一组GIF文件进行批处理(可一次对整个目录下的文件进行转换)。如果想让图像变成动画，那就需要GIFCon32。它可在GIF图象中加入控制，在Web页上不断变化，产生极好的效果。

 

二、用<IMG>元素嵌入图像

 

要在网页中插入图像，可以用元素<IMG>或<OBJECT>。<IMG>元素它实际上就是告诉浏览器在哪个地方要放图，<IMG>元素没有内容,所以，它是个空标记，SRC是它的属性，它告诉浏览器，应该上哪儿去找图。< IMG>元素的标准用法如下：

 

<IMG SRC="imagefile.gif">

 

注意：在网页中，实际上，图不是放在网页中的，而是在网页中表明在哪个地方有图，浏览器应该在哪儿去找图。

 

<IMG>元素的属性定义

 

　　前面已经讲过，<IMG>元素是空元素，只有起始标记，没有结束标记<IMG>元素有下面几种属性。

 

　　SRC：取URL值型，指定图像资源的位置

 

　　ALT．取值文本类型。对于不能支持图像显示浏览器，ALT属性值给出一段替换文本。

 

　　LONGDESC：取URL值型。指定关于图像描述的文件的链接，图像描述文件是 ALT属性描述文字的补充 ( 就是如果目标图片不能显示时,在屏幕上显示的图片,greenerycn补充.).

 

　　HEIGHT：指定在浏览器窗口内图像显示的高度

 

　　WIDTH：指定在浏览器窗口内图像显示的宽度

 

　　ALIGN：指定图像在页面中的位置及与上-卜文的对齐方式

 

　　BORDER：取整数值。指定图像四周的边框宽度

 

　　HSPACE：取整数值。指定图像左右应留的空

 

　　VSPACE：取整数值。指定图像上下应留的空

 

　　ISMAP，指定图像为服务器端Image map图像映射

 

　　USEMAP，为图像建立客户端Image map图像映射

 

三、图像与上下文的对齐方式

 

在<IMG>标记中定义ALIGN属性可以实现图像和文字的混排。语法如下所示：

　　<IMG SRC="imgagefile．gif'ALIGN="alignment choice">

 

属性ALIGN指定如下在页面中的位置及与上下文的对齐方式，其属性值意义如下：Bottom,Top,Middle,Left,Right

 

四，HTML图像映射：

 

1,图像映射是指可点击的图形，它将访问者从一个URL连接到另一个，无论目的地是你的站点的其它网页还是互联网其它的什么地方。常见的例子包括导航按钮和站点映射。

 

2,客户端图像映射允许你提供不依赖于CGI、Web服务器、HTTP（超文本传输协议）或是你的Internet供应上的可点击的图像。当你创建客户端的图像时，你直接在你的Web文档中放置映射的坐标信息。所有的过程在访问者的PC上完成。传统的图像映射依赖于Web服务器处理映射信息并指挥浏览器该往哪里去，而客户端图像映射过程由客户完成，因此它是独立于服务器的。但是客户端图像映射需要访问者的浏览器支持。最新版本Internet Explorer 和 Netscape支持客户端图像映射。

 

3,建立客户端图像映射

 

图像坐标映射格式

形状类型	坐标格式
RECT（矩形）	左上角x，左上角y，右下角x，右下角y
POLY()（多边形）	x1, y1, x2, y2, 等
CIRCLE（圆形）	圆心x，圆心y，半径

<IMG SRC="3C.gif" USEMAP="#ThreeColorMap">
<IMG SRC="Flag.Gif" USEMAP="ThreeColorMap">
<MAP NAME="ThreeColorMap">
<AREA SHAPE="RECT" COORDS="3,4,85,197" 
=>HREF="blue.html">
<AREA SHAPE="RECT" COORDS="86,4,212,197" 
=>HREF=white.html">
<AREA SHAPE="RECT" COORDS="212,4,327,197" 
=>HREF=red.html">
</MAP>

 

五，透明图像

 

一幅透明图像包含自动与HTML页面背景颜色相融合的成分。网页背景能够透过图像的透明部分很容易地展现出来。

 

Web格式唯一支持透明颜色的是G1F89a和PNG，而GIF89a格式最流行。从技术上来说， 只有89a版本的GIF格式支持透明图像，但一些图形编辑程序允许我们把GIF89a存为87a 同时保留透明信息。

 

工业标准图表应用软件，例如Adobe photoshop(http：//www．adobe．com)可以改变图像及创造透明颜色。较少数量的强有力的软件JASC Paintshop pro(http：//www.asc．com)也只有这种功能。

 

六，交错技术

 

有很多用户上网的速度很慢，有时候显示一张图片时，等很久都不能显示图，如果，没用交错技术的话。那么用户要等图全下载完了才能看见。有交错技术那么图可以一部分一部分的显示出来。让用户可以提前知道内容。

 

图像隔行扫描:电视是隔行扫描，而电脑屏幕是逐行扫描，De-Interlace（隔行扫描）就是用来模拟电视屏幕的显示方式的。包括隔行GIF和逐级JPG方式。

 

1,交错图:如果图像是一幅交错图，则它在页面上逐步出现的时候，会以类似百叶窗的效果显示。

 

注意：一般默认情况下，图是以50%为单位显示。

 

PNG图像和GIF图像都支持这种交错格式。

 

隔行GIF是指图像文件是按照隔行的方式来显示的，比如先出奇数行，再出偶数行，造成图像是逐渐变清楚的。将图像文件保存成隔行GIF格式的方法是，在Photoshop中进行保存时，选择“Interlaced”（不要选择“Normal”），在Paint Shop Pro中进行保存时，点击“Option…”按钮，选择“Interlaced”（不要选择“Non Interlaced”）。

 

 

2,渐进图:如果图像是一幅渐进图，则它在页面上逐步出现的时候，会首先显示较模糊的整幅图像，然后逐渐变得清晰。这样，浏览者可以在下载过程中尽早了解图像的大致轮廓。

 

JPG/JPEG图像支持这种渐进格式。

 

逐级JPG文件可以让图像先以比较模糊的形式显示，随着图像文件数据不断从网上传过来，图像会逐渐变清晰。这样做的好处是图像可以尽快地显示出来，虽然图像不很完美，但是却让浏览者看到了希望，并且图像在不断地变好。将图像文件保存成逐级JPG格式的方法是，在Photoshop中进行保存时，选择“Progressive”，在Paint Shop Pro中进行保存时，点击“Option…”按钮，选择“Progressive encoding”。

 

3,还有一种让浏览者可以耐心等待图像显示出来的办法，那就是使用预览图像。即在显示原图之前，先显示一幅字节数比较小，画面质量相对较差的图片。由浏览者决定是否浏览原图。通常，预览图像都是主图像的低分辨率、高压缩率的版本。使用预览图像的方法是：<IMG SRC=“temp.gif” LOWSRC= “preview.gif”>，其中temp.gif是原图，而preview.gif是预览图。

 

七，动画图像（GIF）

GIF格式的图片如此流行的一个原因就是因为它能够让我们把几幅GIF图放在一起而达到动画片的效果。GIF动画就是动态的GIF图片，它实际上就是通过某种机制，将多幅图片连接在-起，然后顺序播放，看着就象是连续的一样。 

//-----------------------------------------------------------------------------------------------------------------

来自:http://www.deepcast.net/wiki/ow.asp?HTML%CD%BC%CF%F1%BC%BC%CA%F5