图片格式-HTML入门基础（018）

今天我们分享一下关于图片格式的内容，纯理论，无代码，会有点无聊。

图片格式分为两种：一种是位图，一种是矢量图。

 

位图：

 

位图，又称点阵图像，是由像素单点组合而成的。通常位图分为8位、16位、24位和32位。

 

所谓的8位位图并不是图像只有8种颜色，而是2的8次方，即256种颜色，8位指的是8个bits，比如11111111，00000000，01010101等。

 

从人的视觉来讲，16位色基本可以满足需求了。24位又称为真彩色，2的24次方，大概1600万种颜色，这个是人眼分辨的极限了。32位色，不是2的32次方，也是24位，多余的8位是灰度，可以理解为透明度。

 

在制作网页时，设计者一般会选择24位图像。32位图像虽然质量好，但是图像容量大，页面加载慢，容易造成网页卡顿的现象。所以在肉眼难分辨的情况下，选择24位图像。

 

关于位图，给大家举个例子，便于理解：

 

我们的显示器，早期的CRT显示器，就是那种屁股很大的台式显示器，由电子枪向屏幕发射电子，逐行显示图像的，因为速度比较快速，所以大家感觉不到刷新频率，看到的图像就是由像素点构成的。

 

比如我要在屏幕上打一个字母x，可以这样，我们想象一个简单的屏幕出来，10 * 10 像素，

 

	●							●
		●					●
			●			●
				●	●
				●	●
			●			●
		●					●
	●							●

 

上图有点类似字母X，虽然比较丑，大家见谅啊，位图的实际效果也是这样的，由许多个点构成，每个点可以由红、绿、蓝三色之一构成，这样一张图片就会呈现出它的样子来；

 

但是位图拉伸图像时会失真，就是因为像素点缺失导致图像失真的，比如原来10 * 10，一共100个像素点的图像，拉伸为 100 * 100 ，一共10000个像素点，原来点与点之间新添加的像素点，会采用平均值的方式，这样图像就失真了。

 

常见的位图格式有，jpg，png和gif三种；

jpg，可以很好的处理大面积色调的图像，比如照片等；

png，支持透明信息，它是专门为web创造的图片格式，设计logo时，多会使用png格式；

gif，只支持256色以内的图像，效果一般比较差，通常作为一些图标等显示；

 

矢量图：

 

又称为向量图。是一种使用数学公式来描述图像的格式。矢量图的优点是，无论如何缩放或者旋转图像，都不会失真，因为它的图像信息都是保存为数学公式的。缺点是难以表现色彩层次丰富的图像，比如照片。

 

它的文件格式后缀有 .ai ，.swf等，了解一下即可。

 

矢量图一般都需要学习Photoshop等软件，主要从事网页设计等前端美化工作，像我们这样准备在代码的学习上下功夫的人，了解即可。

 

 

下面我们对内容总结一下：

 

在HTML中，图像标签为<img>。它是一个自闭合标签，可以写成<img>或<img/>。常用属性有三个，分别是src，alt和title。

 

语法：

 

•  

<img src="" alt="" title="">

 

其中src和alt是必选属性，

src，图像的文件地址，可以选择绝对路径或者相对路径，

alt，图像未加载时的文字提示，

title，图片的描述，鼠标停留在图片上显示给用户看的。