图像入门

首页 > 图像入门

■ 目录

各种图像文件

GIF文件

百度百科:GIF文件

◆ JPEG文件

百度百科:JPEG文件

◆ BMP文件

百度百科:BMP文件

◆ PNG文件

百度百科:PNG文件

制作图像文件

介绍几个制作图像文件的方法。

◆ 使用画图板

“画图板”是 Windows 自带的软件。可以用来绘画或者对图像进行缩放等各种简单操作。处理完成后可保存为各种格式。

◆ 使用数码相机或扫描仪

有些数码相机的像素很多,拍出来的照片非常大,这时候可以用上面介绍的画图板来使它缩小一点,只要先缩放再裁剪可以了。想把自己的书、图画、文件之类的东西做成图像,可以使用扫描仪。

◆ 使用免费的图像

网上有很多免费的图像,下载下来就能使用了。当心别使用声明了版权的图像。

◆ 请专业人士制作

如果是用在比较正式的场合的话,那就出钱去找专业人士制作吧。

把BMP图像转换成GIF图像

下面介绍怎么把BMP图像转换成GIF图像。(把BMP文件的扩展名从 .bmp 改成 .gif 是没有用的。IE有可能会显示,但是其他很多浏览器都无法显示。)

◆ 用画图板转换

用画图板打开BMP文件,选择文件菜单里的“另存为”,在对话框下面的文件格式里选择GIF就可以了。

◆ 用Photoshop、PaintShop Pro转换

方法和上面的画图板一样,找到“另存为”选项后选择指定的文件格式。

背景透明的GIF图像

GIF图像可以指定一种颜色为透明色。把背景色指定为透明的话,就算把图像放在白色以外的网页里,图像周围的空白也看不见。Photoshop或者PaintShop Pro等软件都可以,具体教程请网上搜索。

交织渐层GIF图像

显示图像的时候先显示画质比较粗糙的图,随着图片的下载进程逐渐变得清晰的GIF图像。Photoshop或者PaintShop Pro等软件都可以,具体教程请网上搜索。

GIF动画图像

GIF动画是用复数的GIF图像组成的,用来表现简单动画的图像。帧数较多的动画会占用较大的硬盘空间,具体教程请网上搜索。

Progressive JPEG图像

同交织渐层GIF图像类似,Progressive JPEG图像是一种由 JPEG 改进而来的格式,它在开始装人图像时只显示一个模糊的图像,随着数据的装人,图像逐步变得清晰。这样可以给人以较短等待时间的感觉。具体教程请网上搜索。

减少图像色位数

把图像的色位数减少的话,可以有效减少图像的字节数。比如数码相机拍摄的照片,在缩小图片的同时也可以试试减少色位数。字节数小的图片在网络中传输得更快。

关于图像文件的注意事项

◆ 缩小图像

缩小图像尺寸,减少图像色位数,可以使图像更快显示在浏览器上。

◆ 光把图像显示的效果缩小无法提高网页打开的速度

用img标签的width属性和height属性把显示在网页上的图像缩小的话,图像本身的字节数并没用变少,网页打开的时间跟本来没有区别。

◆ 检查图片在256色下的显示效果

在真彩色下很漂亮的图片,放到256色下有可能会变得很难看,别忘了看看256色的显示效果。详细内容请参考色彩入门

◆ 设置height和width属性

使用<img>标签的时候,指定height和width属性时的图像显示的速度比不指定要更快一些,因为不指定的话浏览器会先显示原图再把它缩放到合适的尺寸。

◆ 设置ALT属性

使用<img>标签的时候,设置alt属性可以让使用无法显示图片的浏览器的人也能明白图片的内容。

可点击领域图像

可点击领域图像可以让用户在点击图像上的不同区域的时候,跳转到不同的链接目标。

◆ 服务器端可点击领域图像

根据服务器的不同实现方法也各不相同。不推荐。

◆ 客户端可点击领域图像

请参考<map>标签。

◆ 排列普通的可点击图片

把可点击图片排列起来也能实现简单的可点击领域图像。简单易用,推荐用此方法。

<table cellspacing=0>
<tr>
<td><a href="aa.html"><img
       border=0 src="aa.gif" alt="aa" width=40 height=40></a></td>
<td><a href="bb.html"><img
       border=0 src="bb.gif" alt="bb" width=40 height=40></a></td>
</tr>
<tr>
<td><a href="cc.html"><img
       border=0 src="cc.gif" alt="cc" width=40 height=40></a></td>
<td><a href="cc.html"><img
       border=0 src="cc.gif" alt="dd" width=40 height=40></a></td>
</tr>
</table>