制作网页常见图片格式及特性介绍

       作为前端开发人员，了解一些常见的图片格式是必不可少的，接下来就简单地介绍一些常见的图片格式，方便日后查阅。图片是网页制作中很重要的素材，图片有不同的格式，每种格式都有自己的特性，了解这些特性可以方便我们在制作网页时选取合适的图片格式。常见的图片格式及一些特性如下：

1. psd

photoshop的专用格式，网页上一般是不用这种格式的，它一般被用来辅助我们做网页，ui设计师给我们的就是这种格式的图片。

优点：完整保存图像的信息，包括未压缩的图像数据，图层，透明等信息，方便图像的编辑。

缺点：应用范围窄，图片容量相对比较大。

2. jpg

网页制作及日常使用最普遍的图像格式，如果网页中不需要透明背景，一般就会用这种图。

优点：图像压缩率高，图像容量相对最小

缺点：有损压缩，图像会丢失数据而失真，不支持透明背景，不能制作成动画。

3.gif

制作网页小动画的常用图像格式，比如平时经常发的动态的表情一般都是gif格式的。

优点：无损压缩，图像容量小，可以制作成动画，支持透明背景。

缺点：图像色彩范围最多只有256色，不能保存为色彩丰富的图像，不支持半透明，支持透明图像但是图像边缘有锯齿，如下图所示：

4. png

网页制作及日常使用比较普遍的图像格式，如果能支持动画则它完全可以取代gif。

优点：无损压缩，图像容量小，支持透明背景和半透明背景，透明图像的边缘是光滑的，这是和gif相比它的一大优点，如下图所示：

缺点：不能制作成动画。

5. webp

将要取代jpg的图像格式。

优点：和jpg格式相同，但是容量相对比jpg还要小。

缺点：和jpg格式相同，但是目前只有极少数的浏览器支持，像一些主流的浏览器谷歌，火狐，IE等都不支持这种格式。

接下来说一下和上面图片实现原理不同的另一种类型的图片。上面介绍的5中图像都属于位图。位图，也叫点阵图，是由一个个的方形的像素点排列在一起拼接而成的，位图在放大时，图像会失真。

矢量图和位图的成像原理不同，它的图像轮廓是由函数曲线生成的，当放大图像时。实际的原理就是将曲线乘以一个倍数，图像可以轻易地放大，而且不出现像素块，图像边缘也不会出现锯齿。一句话说就是位图放大会失真，矢量图放大后不会失真。下面介绍一些常见的矢量图格式。

1. svg

目前首选的网页矢量图格式。

优点：图像容量小，图像放大不失真，支持透明背景和半透明色彩，图像边缘光滑。

缺点：色彩不够丰富。

2. flash

即将退出历史舞台的重量级网页矢量图格式，注意它的后缀是.swf并不是.flash，而且想要在网页中插入flash图片时需要用embed元素而不是img元素，即使在网页中插入了，只有浏览器安装了相应的插件才能够显示，

优点：图像容量小，图像放大不失真，支持透明和半透明色彩，图像边缘光滑，还可以制作动画，可编写交互，以前的一些网页直接就是用flash写的。

缺点：不支持搜索引擎，比如说用百度搜索某个flash格式的图片根本搜不到它，运行慢，浏览器需要装插件才能支持。

总结：

在网页制作中，如何选择合适的图片格式呢？

1. 使用大幅面图片时，如果要使用不透明背景时，首选jpg图片，因为它的容量相对最小；如果要使用透明或半透明背景的图片时，就使用png图片。

2.使用小幅面图片或图标图片时，如果图片含多种颜色，可以使用gif或png图片；如果图片的色彩很单一，而且要求有很好的显示效果放大不失真，可以使用svg图片；如果要求图片是动画的，可以使用gif。

本人是个小白，如果有错误欢迎指正，啦啦啦。