9种前端图片格式

JPG / JPEG

最常用的静态图片格式之一。

这种格式的图片能比较好的表现各种色彩，主要在压缩的时候会有所失真，也正因为如此，造就了这种图片格式体积的轻量。

优点：

1、兼容性强

2、色彩丰富

3、压缩率高，图片小

4、支持渐进

缺点：

1、不支持动画、透明

2、不适合存储企业类logo，线框类高清图片

PNG

PNG 格式是有三种版本的，分别为 PNG-8 ， PNG-24 ， PNG-32 ，所有这些版本都不支持动画的。

即 PNG 有3种不同的位深度：8位深度/24位深度/32深度（2的8次方种颜色/...）

PNG-8 跟 GIF 类似的属性是相似的，都是索引色模式，而且都支持背景透明。相对比 GIF 格式好的特点在与背景透明时，图像边缘没有什么噪点，颜色表现更优秀。

PNG-24 其实就是无损压缩的 JPEG 。不透明

而 PNG-32 就是在 PNG-24 的基础上，增加了透明度的支持。 如果没有动画需求推荐使用 PNG-8 来替代 GIF

pc端多用 PNG-32 ；wap端多用 PNG-8 alpha透明。

优点：

1、像素丰富

2、支持透明

3、支持交错

4、压缩时几乎不失真

5、兼容性强

缺点：

文件较大

JPG 和 PNG 的区别

1、 JPG 是有损压缩格式， PNG 是无损压缩格式

2、 JPG 图片没有透明背景， PNG 有透明背景

GIF

GIF 是一种索引色模式图片，所以 GIF 每帧图所表现的颜色最多为256种。

GIF 能够支持动画，也能支持背景透明，这点连古老的IE6都支持，所以在以前想要在项目中使用背景透明图片，其中一种方案就是生成 GIF 图片。

优点：

1、支持动画

2、高兼容性

3、灰度表现佳

4、支持交错

缺点：

1、最多支持 8 位 256 色，色阶过渡糟糕，图片具有颗粒感

2、支持透明，但不支持半透明，边缘有杂边

BASE64

图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址，图片随着 HTML 的下载同时下载到本地，不再单独消耗一个http来请求图片。

优点：

1、不需要额外的HTTP请求

2、适用于极小或简单图片

3、没有跨域问题，无需考虑缓存、文件头或者cookies问题

缺点：

1、相对于其他图片格式，要大至少1/3

2、不适用于中等以上图片

SVG

SVG 是一种基于 xml 的矢量图形格式，它将图像的内容指定为一组绘图命令，这些命令创建形状、线条、应用颜色、过滤器等等。 SVG 文件是理想的图表，图标和其他图像，可以准确地绘制在任何大小。因此， SVG 是现代 Web 设计中用户界面元素的流行选择。

优点：

1、你可以对其放大、缩小，而不用担心损失质量

2、对于其他常用的图片格式来说，他要更小

3、支持动画

4、html、js、css都可以对其操作，更灵活，与DOM无缝衔接

缺点

1、渲染时间较长，尤其是在它较复杂时

2、不适用于游戏等高互动动画

WEBP

有损 WEBP 图像平均比视觉上类似压缩级别的 JPEG 图像小25-35% 。

无损耗的 WEBP 图像通常比 PNG 格式的相同图像小26% 。

WEBP 还支持动画: 在有损的 WEBP 文件中，图像数据由 VP8位流表示，该位流可能包含多个帧。 包括体积小、色彩表现足够、支持动画。 主要是Safari低版本和IE低版本不兼容。

优点：

1、同等质量更小

2、压缩之后质量无明显变化

3、支持无损图像

4、支持动画

缺点

兼容性相对较差，相对 JPG 、 PNG 、 GIF 来说

PNG 、 GIF 、 JPG 比较

大小比较： PNG ≈ JPG > GIF 。 8位的 PNG 完全可以替代掉 GIF

透明性： PNG > GIF > JPG

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

兼容程度： GIF ≈ JPG > PNG

图片格式	优点	缺点	使用场景
GIF	文件小，支持动画、透明，无兼容性问题	只支持256种颜色	色彩简单的logo、icon、动图
JPG	色彩丰富，文件小	有损压缩，反复保存图片质量下降明显	色彩丰富的图片/渐变图像
PNG	无损压缩，支持透明，简单图片尺寸小	不支持动画，色彩丰富的图片尺寸大	logo/icon/透明图
WEBP	文件小，支持有损和无损压缩，支持动画、透明	浏览器兼容性相对而言不好	支持 WEBP 格式的app和webview