【面试题集 —— 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等等。
JPG/JPEG
JPG/JPEG(Joint Photographic Experts Group)是一种面向连续色调静止图像的压缩标准。是目前网络上最流行的图像格式。它的设计目标是在不影响人类可分辨的图片质量的前提下,尽可能的压缩文件大小。典型特点如下:
- 在网络传输中应用广泛;
- 采用有损压缩,压缩比可自定义;
这意味着JPG去掉了一部分图片的原始信息,也即是进行了有损压缩。并且压缩比是可以自定义的:在Photoshop中进行图片导出JPG/JPEG格式时,可自由设置图片的品质,有0~12个等级可选。
图片品质越高(压缩比越低),对应的图片质量越高,图片文件越大,反之亦然。图片品质在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的制作;
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代码的功能。
常见的矢量文件格式还有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的区别相关推荐
- 常见图片格式jpg、jpeg、png、gif等之间的区别
jpg.jpeg.png.gif.bmp.tiff.ai.cdr.eps 对于做设计这一行的人来说,这几个图片格式是最常用的,也是最常见的,几乎每一天都要与他们打交道.刚刚入门的新人通常不知道在什么地 ...
- 常见图片格式与调色算法
一.常见图片格式 1):JPEG 格式 同等于 JPG 和 JPE 格式 有损压缩 储存空间小 除RGB三色外,无法保留透明度.动画等任何信息 颜色品质不错,但是在压缩过程中图像品质会有着肉眼可见的下 ...
- [Image_Codec]常见图片格式的封装及编解码-Android平台(三)JPG
文章目录 JPG图片格式 压缩模式和步骤 JPG文件结构 libjpeg编解码Jpeg图片 JPG图片格式 JPG全称Jpeg(Joint Photographic Experts Group),是一 ...
- 前端常见图片格式整理
前端常见图片格式整理 PNG (Portable Network Graphics,便携式网络图形,1996) PNG有8位.24位.32位三种形式,其中8位PNG支持两种不同的透明形式(索引透明和a ...
- c语言判断后缀是否为bmp,c语言_常见图片格式判断
c语言_常见图片格式判断 我想尽各种思路.今天,终于把图片判断搞定了. 在此,我写一下我的思路.希望对那些不想看代码的朋友们有帮助. 常风的的图片格式有:bmp,png,jpg,gif等图片格式. 我 ...
- 制作网页常见图片格式及特性介绍
作为前端开发人员,了解一些常见的图片格式是必不可少的,接下来就简单地介绍一些常见的图片格式,方便日后查阅.图片是网页制作中很重要的素材,图片有不同的格式,每种格式都有自己的特性,了解这些特性可以方便我 ...
- 几种常见图片格式优缺点分析
有损vs无损 图片文件格式有可能会对图片的文件大小进行不同程度的压缩,图片的压缩分为有损压缩和无损压缩两种. 有损压缩.指在压缩文件大小的过程中,损失了一部分图片的信息,也即降低了图片的质量,并且这种 ...
- 常见图片格式转换的方法介绍
大家如果测试应用层软件的话,会涉及到各种图片格式的测试,现简单总结下,给大家介绍三种方法. 方法1.使用windows自带的画图工具直接转换,支持基本图片格式的转换:如下所示,支持PNG.JPEG.B ...
- 常见图片格式归纳总结
BMP格式 BMP格式是标准的Windows及0S/2的图像文件格式,是Photoshop中最常用的位图格式.此种格式在保存文件时几乎不经过压缩,因此它的文件体积较大,占用的磁盘空间也较大.此种存储格 ...
最新文章
- 【UWP】拖拽列表项的排序功能实现
- linux系统在硬盘上安装程序,在硬盘中安装Linux操作系统最简单的方法
- [Issue Fixed]-repo-error: .repo/manifests/: contains uncommitted changes
- SQL——字段分组合并
- 常见的几个大数据名词:OLAP、OLTP、BI到底代表着什么?
- Redis服务器的启动过程分析
- 一张图看懂智联车管理云平台
- Linux命令解释之fdisk
- ELKStack之操作深入(中)
- C++的对象,变量初始化
- Java之spring新手教程(包教包会)
- Linux内核“问题门” - 学习问题、经验集锦
- 图片太大怎么改小kb?简单的图片压缩方法分享
- 【STM32F429的DSP教程】第6章 ARM DSP源码和库移植方法(MDK5的AC5和AC6)
- Android 10.0之后系统获取不到IMEI和UUID解决办法
- iphone的Safari浏览器中HTML5上传图片方向问题解决方法
- 用dosbox执行汇编程序步骤
- 计算机用户身份识别,计算机用户身份识别装置及使用方法与流程
- 【夏季美女们穿的“清凉”容易引男生的狼眼】
- Intellij IDEA 占满CPU