jpg、png、gif、webp详细介绍

位图和矢量图的区别

矢量图                              

1.失量图可以无限放大.而且不会失真.                                

2.矢量图由矢量线组成                                                 

3.矢量图色彩的表现比较少                                            

4.矢量图多用于工程图中,如：CAD

                   

位图

1.位图放大后就会失真

2.位图由像素组成

3.位图色彩的表现比较多

4.位图更多的用于作图中,如：PS

jpg

JPEG代表Joint Photograhic Experts Group（联合图像专家组），扩展名为jpg

优点：支持上百万种颜色、压缩比高

缺点：有损压缩、不支持图形渐进、不支持背景透明、不支持动画

gif

GIF意为Graphics Interchange format（图形交换格式），扩展名是gif。Gif是使用了一种叫作LZW的算法进行压缩的，水平压缩（像素由上到下水平压缩），这也意味着同等条件下，横向的gif图片比竖向的gif图片更加小。例如500*10的图片比10*500的图片更加小。

优点：矢量图色彩的表现比较少

缺点：只有256种颜色，对于照片质量的图片是显然不够的

png

意为可移植网络图形格式(Portable Network Graphic Format)，按存储方式不同，PNG可分为：PNG8、PNG24、PNG32

优点：无损压缩、支持间隔渐进显示（但会造成图片过大）、PNG24和PNG32支持颜色很多

缺点：不支持动画、PNG24和PNG32对IE6支持不好

webp

Google开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，能节省大量服务器带宽资源和数据空间。

优点：体积小

缺点：有损压缩、兼容性不好（android高版本、W3C高版本浏览器支持这种格式、ios不支持）

注意：

JPG和PNG，要看使用场景，JPG比PNG压缩比高，色彩数量越多。PNG明显大于JGP，但是JPG是有损压缩，如果对图片质量不高，例如启动动画、墙纸，可以使用JPG。

大小比较：PNG > JGP > GIF ≈ webp

透明性：PNG > GIF > JPG

色彩丰富程度：JPG > PNG >GIF

兼容程度：GIF ≈ JPG > PNG