作为前端开发人员，了解一些常见的图片格式是必不可少的，接下来就简单地介绍一些常见的图片格式，方便日后查阅。图片是网页制作中很重要的素材，图片有不同的格式，每种格式都有自己的特性，了解这些特性可以方便我们在制作网页时选取合适的图片格式。常见的图片格式及一些特性如下：
 
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。
 
本人是个小白，如果有错误欢迎指正，啦啦啦。
 
 
 
 
 
 

1.jpg：有损压缩格式
 靠损失图片本身的质量来减少图片的体积，适用于颜色丰富的图像；（像素点组成的越多越清晰）
 2、gif：无损压缩格式
 靠损失图片的色彩量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像；
 3、png无损压缩格式
 损失图片的色彩量来减少图片的体积，支持透明，不支持动画，适用于颜色数量较少的图像；
 4、svg：可缩放矢量图
 svg图像在放大或改变尺寸的情况下其图形质量不会有所损失 与其他图像格式相比，使用svg的优势在于：
 svg可被非常多的工具的工具读取和修改
 svg与jpg和gif图像比起来，尺寸更小，且可压缩性更强
 svg图像可在任何的分辨率下被高质量地打印
 svg可在图像质量不下降的情况下被放大
 svg图像中的文本是可选的，同时也是可搜索（很适合制作地图）
 svg格式的图片可以通过阿里的iconfont图库进行生成，或者使用在线工具将其他格式转svg格式。

 
 
 动画文件的格式
 
 
 
  
 
 
 
 
 
 
  
 
   
 
    
 
     
 
      1、GIF动画格式
        GIF图像采用无损数据压缩方法中压缩率较高的LZW算法，文件尺寸较小，因此被广泛采用。GIF动画格式可以同时存储若干幅静止图像并进而形成连续的动画，目前Internet上大量采用的彩色动画文件多为这种格式的GIF文件。很多图像浏览器如《豪杰大眼睛》等都可以直接观看此类动画文件。
     
 
     
 
      2、FLIC,FLI/FLC格式
        FLIC是Autodesk公司在其出品的Autodesk Animator / Animator Pro / 3D Studio等2D/3D动画制作软件中采用的彩色动画文件格式，FLIC是FLC和FLI的统称，其中，FLI是最初的基于320×200像素的动画文件格式，而FLC则是FLI的扩展格式，采用了更高效的数据压缩技术，其分辨率也不再局限于320×200像素。FLIC文件采用行程编码(RLE)算法和Delta算法进行无损数据压缩，首先压缩并保存整个动画序列中的第一幅图像，然后逐帧计算前后两幅相邻图像的差异或改变部分，并对这部分数据进行RLE压缩，由于动画序列中前后相邻图像的差别通常不大，因此可以得到相当高的数据压缩率。它被广泛用于动画图形中的动画序列、计算机辅助设计和计算机游戏应用程序。
     
 
     
 
      3、SWF格式
        SWF是Micromedia公司的产品Flash的矢量动画格式，它采用曲线方程描述其内容，不是由点阵组成内容，因此这种格式的动画在缩放时不会失真，非常适合描述由几何图形组成的动画，如教学演示等。由于这种格式的动画可以与HTML文件充分结合，并能添加MP3音乐，因此被广泛地应用于网页上，成为一种“准”流式媒体文件。
     
 
     
 
      4、AVI格式
        AVI是对视频、音频文件采用的一种有损压缩方式，该方式的压缩率较高，并可将音频和视频混合到一起，因此尽管画面质量不是太好，但其应用范围仍然非常广泛。AVI文件目前主要应用在多媒体光盘上，用来保存电影、电视等各种影像信息，有时也出现在Internet上，供用户下载、欣赏新影片的精彩片段。
     
 
     
 
      5、MOV、QT格式
        MOV、QT都是QuickTime的文件格式（有关QuickTime的知识在2001年第21期本版的《流媒体播放三剑客》一文中有详细介绍）。该格式支持256位色彩，支持RLE、JPEG等领先的集成压缩技术，提供了150多种视频效果和200多种MIDI兼容音响和设备的声音效果，能够通过Internet提供实时的数字化信息流、工作流与文件回放，国际标准化组织(ISO)最近选择QuickTime文件格式作为开发MPEG4规范的统一数字媒体存储格式。
     
 
     
 
      
 
     
 
     
 
      注意：动画是视频的一类，但视频还包括由摄像机连续拍摄得到的图像，不是人工一幅一幅制作的动画，视频有更多格式在使用着，格式包括：
     
 
     
 
      AVI, ivX, Div, Xvid, MPGE, MPG, DAT, WMV, ASF, ASX, RM, RMVB, MOV, QT, 3GP, 3G2, MP4, M4V, FLV
      
 
     
 
     
 
      
 
     
 
    
 
   
 
  
 
 
 

前端面试必备个人总结
 
浅谈web网页常见的图片格式
 
知道网页制作的过程中常用的图片格式有哪些？
 
图片在整个网页中占有重要的地位，大多数的网页的图片占比达到60%左右，所以在不同的场景中使用不同的图片对于web页面的性能会有很大的优化。文本页面常用的图片格式有：gif、png、jpg、webp等。
 
图片格式的分类：
 无压缩：无压缩的图片格式不对图片数据进行压缩处理，能够准确的呈现原图片。bmp格式是其中之一。
 无损压缩：压缩算法对图片的所有的数据进行编码压缩，能在保证图片的质量的同时降低图片的尺寸。png是其中的代表。
 有损压缩。压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸。其中的代表是jpg。
 gif：是一种无损的基于索引色的图片格式，采用的是无损压缩，相对于bmp格式，尺寸更小，并且能够支持透明和动画，但gif只能够存储8位的索引，最多保存256种的颜色，遇到相对复杂的、细节丰富的图片不适合保存为gif，只能适合简单的logo、icon、线框图之类的。
 png：png的图片分为png-8和png-24，两者都是采用无损压缩，相比于gif对于透明的支持更好。png-8是基于8位索引色的位图格式，不支持动画，但是在相同质量的情况下，相比gif尺寸更小。png-24是基于直接色的位图格式，图片质量较高，但是尺寸相比于bmp等过大，在相对极高品质的图片要求中更推荐使用jpg。
 jpg：jpg是一种有损的基于直接色的图片格式，由于是直接色，jpg可以使用的颜色高达1600w之多，jpg非常适合色彩丰富的图片，并且将图片的尺寸大幅度的减小。
 webp:webp（发音weppy）是一种支持有损压缩和无损压缩的图片的格式，派生自图像编码格式VP8，是Google公司在2010年推出的一种图片格式，图片的压缩的体积大约只有jpg的2/3，并且能够节省大量的服务器带宽资源和数据空间。
 在面试的情况下，一定要说出上述的几种常见的图片格式（jpg，png，gif，webp），尤其是webp一定要着重提到，相比于其他的格式webp更加的年轻，意味着你是否对新事物是否了解。