在网页中，图片格式有两种：一种是“位图”；另外一种是“矢量图”。下面我们来简单介绍一下。
一、位图
位图，又叫做“像素图”，它是由像素点组成的图片。对于位图来说，放大图片后，图片会失真；缩小图片后，图片同样也会失真。
在实际开发中，最常见位图的图片格式有3种（可以从图片后缀名看出来）：jpg（或jpeg）、png、gif。深入理解3种图片适合在哪种情况下使用，在前端开发中是非常重要的。
- （1）jpg可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，jpg体积较大，并且不支持透明。
- （2）png是一种无损格式，可以无损压缩以保证页面打开速度。此外，png体积较小，并且支持透明，不过不适合存储颜色丰富的图片。
- （3）gif图片效果最差，不过它适合制作动画。实际上，小伙伴们经常在QQ或微信上发的动图都是gif格式的。
这里来总结一下：如果想要展示色彩丰富而高品质图片，可以使用jpg格式；如果是一般图片，为了减少体积或者想要透明效果，可以使用png格式；如果是动画图片，可以使用gif格式。
此外对于位图，我们可以使用Photoshop这个软件来处理。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jpg、png与gif</title>
<style type="text/css">
body{background-color:hotpink;}
</style>
</head>
<body>
<img src="img/1.jpg" alt=""/><br/>
<img src="img/2.png" alt=""/><br/>
<img src="img/3.gif" alt=""/>
</body>
</html>
浏览器预览效果如下图所示。
分析：
body{background-color:hotpink;}表示使用CSS为页面定义一个背景色，以便对比得出哪些图片是透明的，哪些不是透明的。这句代码看不懂不用管，等学了CSS自然就知道了。
从这个例子，我们可以很直观地看出来：jpg图片不支持透明，png图片支持透明，而gif图片可以做动画。
二、矢量图
矢量图，又叫做“向量图”，它是用计算机图形学中点、直线或多边形等表示出来的几何图像。
矢量图是以一种数学描述的方式来记录内容的图片格式。举个例子，我们可以使用y=kx来绘制一条直线，当k取不同值时就会绘制不同角度的直线，这就是矢量图的构图原理。
矢量图最大的优点是：图片无论放大、缩小或旋转等都不会失真。最大的缺点是：难以表现色彩丰富的图片效果（非常差）。
矢量图常见格式有：“.ai”、“.cdf”、“.fh”、“.swf”。其中“.swf”格式比较常见，它指的是Flash动画，其他几种格式的矢量图比较少见，可以忽略。对于矢量图，我们可以使用illustrator或者CorelDRAW这两款软件来处理。
在网页中，很少用到矢量图，除非是一些字体图标（iconfont）。不过作为初学者，我们只需简单了解一下即可。
对于位图和矢量图的区别，我们总结有以下4点。
- （1）位图适用于展示色彩丰富的图片，而矢量图不适用于展示色彩丰富的图片。
- （2）位图组成单位是“像素”，而矢量图组成单位是“数学向量”。
- （3）位图受分辨率影响，当图片放大时会失真；而矢量图不受分辨率影响，当图片放大时不会失真。
- （4）网页中的图片绝大多数都是位图，而不是矢量图。
常见问题：
1、现在的前端开发工作，还需要用到切图吗？
在Web1.0时代，切图是一种形象的说法，它指的是使用Photoshop把设计图切成一块一块的，然后再使用Dreamweaver拼接起来，从而合成一个网页。
到了Web2.0时代，我们依旧有切图一说，只不过这种切图不再是以前那种方式。现在所说的切图不是将图片切片，而是一种设计思路。现在的切图，指的是我们前端工程师拿到UI设计师的图稿时，应该分析页面的布局，哪些用CSS实现，哪些用图片实现，而哪些用CSS Spirit实现，等等。
在Web2.0时代，我们仍然需要掌握Photoshop的一些基本操作。不过我们在开发页面时，就不应该使用Web1.0时代的“拼图”方式了。
2、如果我从事前端开发，对于Photoshop要掌握到什么程度呢？
一个真正的前端工程师，需要能用Photoshop来进行基本的图片处理，例如图片切片、图片压缩、格式转换等。不过如果时间精力有限，我们不必太过于深入，掌握基本操作就完全够了。
