【面试题集 —— No.01】常见图片格式BMP、JPG/JPEG、PNG、GIF、TIFF、SVG的区别

在平时的前端工作中,大家对于各类图片的处理一定很熟悉。但是它们各个格式之间的具体区别你是否清楚呢?亏我之前还自诩做过UI设计,对于这个问题我都不是很清楚,惭愧之余,虚心总结了这一篇博客。

格式 压缩标准 透明度 矢量性 动画性 图片质量 文件大小
BMP 几乎不压缩 不支持 位图 不支持 超高
JPG/JPEG 有损压缩 不支持 位图 不支持 高(可选)
PNG 无损压缩 支持 位图 不支持
GIF 无损压缩 支持 位图 支持
TIFF 不支持压缩 不支持 位图 不支持
SVG 无损压缩 支持 矢量 不支持 超高

BMP

BMP是英文Bitmap(位图)的简写,它是Windows操作系统中的标准图像文件格式,能够被多种Windows应用程序所支持。BMP位图文件默认的文件扩展名是BMP或者bmp(有时它也会以.DIB或.RLE作扩展名)。它的显著特点是:

  • 几乎不压缩,包含的图像信息较丰富,图片品质最好;
  • 文件太大,不利于网络传输;

正是因为BMP格式本身不利于网络传输,所以后续才陆续诞生了其他的图片压缩算法,来制定新的图片格式,比如我们常用的JPG/JPEG、PNG、GIF、TIFF、SVG等等。

【面试题集 —— No.01】常见图片格式BMP、JPG/JPEG、PNG、GIF、TIFF、SVG的区别_第1张图片

JPG/JPEG

JPG/JPEG(Joint Photographic Experts Group)是一种面向连续色调静止图像的压缩标准。是目前网络上最流行的图像格式。它的设计目标是在不影响人类可分辨的图片质量的前提下,尽可能的压缩文件大小。典型特点如下:

  • 在网络传输中应用广泛;
  • 采用有损压缩,压缩比可自定义;

这意味着JPG去掉了一部分图片的原始信息,也即是进行了有损压缩。并且压缩比是可以自定义的:在Photoshop中进行图片导出JPG/JPEG格式时,可自由设置图片的品质,有0~12个等级可选。

【面试题集 —— No.01】常见图片格式BMP、JPG/JPEG、PNG、GIF、TIFF、SVG的区别_第2张图片

图片品质越高(压缩比越低),对应的图片质量越高,图片文件越大,反之亦然。图片品质在9以上时,图片质量也是相当不错的,肉眼很难分辨出来,同时也有效的降低了图片的文件大小。

GIF

GIF(Graphics Interchange Format)是图形转换格式,采用LZW压缩算法进行编码。特点有:

  • 支持动图和透明属性;
  • 色彩范围较小,只支持256色;

适用于对色彩要求不高同时需要文件体积较小的场景,比如企业Logo、线框类的图等。很多人以为GIF指的就是动图,其实GIF不仅有动画GIF,还有静态GIF,因其体积小的特点,现在GIF被广泛的应用在各类网站中。

TIFF

TIFF(Tag Image File Format)是标签图像文件格式。其图像格式很复杂,但由于它对图像信息的存放灵活多变,可以支持很多色彩系统,在Mac跟Windows系统上均可使用,因此得到了广泛应用。

  • 常用的印刷格式,色彩真实;
  • 支持保存图层等编辑信息,类似于PSD文件;

PNG

PNG(Portable Network Graphics)是便携式网络图形,PNG是一种无损压缩的位图片形格式,其设计目的是试图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。典型特点有:

  • 采用无损压缩:
    绝大多数情况下,同样的图片,PNG格式的图片质量要优于JPG,但图片大小也略大于JPG格式;而且无损压缩的图片在多次保存中也不会出现图片质量的损坏。
  • 支持透明通道,广泛用于LOGO,Icon的制作;

【面试题集 —— No.01】常见图片格式BMP、JPG/JPEG、PNG、GIF、TIFF、SVG的区别_第3张图片

PNG格式有8位、24位、32位三种形式,其中8位PNG支持两种不同的透明形式(索引透明和alpha透明),24位PNG不支持透明,32位PNG在24位基础上增加了8位透明通道,因此可展现256级透明程度。

SVG

SVG(Scalable Vector Graphics)是可缩放矢量图形。它是基于XML(Extensible Markup Language),由World Wide Web Consortium(W3C)联盟进行开发的。SVG图片实质为一段代码,由直线和曲线以及绘制它们的方法组成。

  • 代码实现;
  • 矢量性,放大缩小时,不会失真;
  • 文件体积小,可二次编辑;

我们在Iconfont图标库中使用某个Icon时,就支持SVG格式的下载或者直接复制SVG代码的功能。

【面试题集 —— No.01】常见图片格式BMP、JPG/JPEG、PNG、GIF、TIFF、SVG的区别_第4张图片

常见的矢量文件格式还有ai、cdr、eps格式:

  • ai —— Adobe公司旗下软件 Adobe Illustrator 生成的可再编辑矢量图片;
  • cdr —— Corel公司旗下软件CorelDRAW生成的可再编辑矢量图片,CorelDRAW是目前多数广告公司用的广告产品排版软件;
  • eps —— 是Encapsulated PostScript的简写,严格说并不是一种图片格式,它主要用于矢量图像和光栅图像的存储。 可以保存其他一些类型信息,例如多色调曲线、Alpha通道、分色、剪辑路径、挂网信息和色调曲线等,因此EPS格式常用于印刷或打印输出。

继续在上述的Iconfont图标库中,点击 AI下载 按钮后,下载的具体格式就是EPS文件,支持在Adobe Illustrator或者CorelDRAW中二次编辑。

【面试题集 —— No.01】常见图片格式BMP、JPG/JPEG、PNG、GIF、TIFF、SVG的区别_第5张图片

你可能感兴趣的:(面试题集,svg,图片格式)