网络图片编辑：JPEG、GIF和PNG格式详解

（1）了解常用的网页图片格式；

（2）熟练掌握图片的插入和设置技巧。

图片是生动、形象和富有吸引力的网页元素，网页中以<IMG>格式来表示图片。在网页中恰当运用图片，会使网页更加具有活力和吸引浏览者的眼球，但不能滥用图片，否则会使浏览者审美疲劳。网络图片支持很多种格式，常用的格式有JPEG、GIF和PNG。下面分别对这3种格式进行简单介绍。

JPEG是由联合照片专家组（Joint Photographic Experts Group）研发并制定的一套图片压缩格式。这种格式具有极高的压缩率，失真的效果不明显，所以通常用于显示色彩丰富的图片，是目前互联网上非常流行的图片格式。该格式扩展名为“.jpg”和“.jpeg”。

GIF的全称是“Graphics Interchange Format”，原义是“图像交换格式”，在网页中的图片格式可以以透明的方式显示，还支持多幅图片的连续播放，并保存为一张图片中的动画效果。该格式扩展名为“.gif”。

PNG 的全称是“Portable Network Graphic Format”，原义是“可移植网络图形格式”，它具有高保真性、透明性和占用空间小的特点。它综合了JPEG和GIF两种图片格式的优点，通常在网页中用于制作效果图，该格式扩展名为“.PNG”。

下面介绍图片标记img的常见属性，如图2-2-1所示。

图2-2-1　图片【属性】面板

（1）“图像”属性：设置图像的名字。

（2）“宽”属性：设置图片的宽度。

（3）“高”属性：设置图片的高度。

（4）“源文件”属性：设置显示图片的源文件地址。

（5）“链接”属性：设置图片超链接的链接地址。(www.xing528.com)

（6）“目标”属性：设置图片超链接目标地址的打开方式。

（7）“替换”属性：设置图像的替换文本。

（8）“地图”属性：设置图像的热点区域名字。

（9）“ID”属性：设置图片唯一标识。

（10）“类”属性：设置图片使用CSS样式规则中的名称。

本节以图片编辑的方法和技巧为实验重点，仍然以“MyWebsite”站点为例。

电脑操作系统Windows 7/8/10、Dreamweaver CS6软件，Chrome/360/IE浏览器。