jpg、gif、png、svg、bmp、WebP图像格式的区别以及应用场景

站长手记作者： 2024-08-28 02:35:01

jpg：非常适合作为储存像素色彩丰富的图片、例如照片等等，png：分为 png-8 以及 png-24 两种格式，gif：非常适合用来表现图标、 UI接口、线条插画、文字等部分的输出，也可用来展示小的动画。

一、jpg格式

1、透明性：它不支持透明性
2、动画：它不支持动画
3、损耗性：除了一些比如说（仅仅是90、180、270度旋转），裁切，从标准类型到先进类型，编辑图片的原数据之外，所有其它操作对jpeg图像的处理都会使得它的质量损失，所以我们在编辑过程一般用png作为过渡格式。
4、隔行渐进显示，它支持隔行渐进显示（但是ie浏览器并不支持这个属性，但是ie会在整个图像信息完全达到的时候显示）。由上可以看出Jpeg是最适web上面的摄影图片和数字照相机中。根据惊叹我们在页面中使用的商品图片、采用人像或者好、实物素材制作的广告更适合采用JPG格式保存。

二、gif格式

1、透明性：gif是一种布尔透明类型，即它可以使全透明，也可是全不透明，但是它并没有半透明的（alpha透明）。
2、动画：gif格式支持动画。
3、无损耗性：gif是一种无损耗的图像格式，这也意味着你可以对gif图片做任何操作也不会使得图像质量产生损耗。
4、水平扫描：gif是使用一种叫做LZW的算法进行压缩的，当压缩gif的过程中，像素是由上到下水平压缩的，这也意味着同等条件下，横向的gif图片比竖向的gif更加小。例如500*10的图片比10*500的图片更加小。
5、间隔渐进显示：gif支持可选择性的间隔渐进显示。

三、png格式

1、类型：Png这种图片格式包括了许多类，但是在实践的大致中可以分为256色的png和全色的png，你完全可以用256色的png代替gif，用全色的png代替jpeg。 2、透明性：png是完全支持alpha透明的（透明、半透明、不透明），尽管有两个怪异的现象在ie6（下面详细讨论）
3、动画：它不支持动画

四、svg格式

可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。

1、SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
2、SVG 用来定义用于网络的基于矢量的图形
3、SVG 使用 XML 格式定义图形
4、SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
5、SVG 是万维网联盟的标准
6、SVG 与诸如 DOM和 XSL 之类的W3C标准是一个整体