Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >BMP、GIF、TIFF、PNG、JPG和SVG格式图像的特点

BMP、GIF、TIFF、PNG、JPG和SVG格式图像的特点

作者头像
不脱发的程序猿
发布于 2021-01-20 02:20:26
发布于 2021-01-20 02:20:26
4.3K0
举报

目录

1、BMP格式图像

2、GIF格式图像

3、TIFF格式图像

4、PNG格式图像

5、JPG格式图像

6、SVG格式图像

7、总结

7.1、有损vs无损

7.2、索引色vs直接色

7.3、点阵图vs矢量图

7.4、总结


一张图片可以储存为多种格式,为什么有的几十KB,有的几百MB,有的静止不动,有的是好几个画面循环播放?在项目开发的过程中经常会读取或保存图像文件,不同类型的图像特点不同,适用的范围也不同,简要介绍BMP、GIF、TIFF、PNG、JPG和SVG格式图像的特点。

1、BMP格式图像

BMP是英文Bitmap(位图)的简写,它是Windows操作系统中的标准图像文件格式,能够被多种Windows应用程序所支持。随着Windows操作系统的流行与丰富的Windows应用程序的开发,BMP位图格式理所当然地被广泛应用。这种格式的特点是包含的图像信息较丰富,几乎不进行压缩,但由此导致了它与生俱生来的缺点是占用磁盘空间过大。所以,目前BMP在单机上比较流行。

BMP(Bitmap-File)图形文件是Windows采用的图形文件格式,在Windows环境下运行的所有图象处理软件都支持BMP图象文件格式。Windows系统内部各图像绘制操作都是以BMP为基础的。BMP位图文件默认的文件拓展名是BMP或者bmp(有时它也会以.DIB或.RLE作扩展名)

虽然同时支持索引色和直接色是一个优点,但是太大的文件格式格式导致它几乎没有用武之地,现在除了在Windows操作系统中还比较常见之外,我们几乎看不到它。在同样的图片质量下,BMP格式的图片文件大小是GIF格式的很多倍。

2、GIF格式图像

GIF是Graphics Interchange Format的简写,它是图形转换格式,采用LZW压缩算法进行编码,用于以超文本标志语言(Hypertext Markup Language)方式显示索引彩色图像,在因特网和其他在线服务系统上得到广泛应用。GIF是一种公用的图像文件格式标准,版权归Compu Serve公司所有。

GIF是无损的,采用GIF格式保存图片不会降低图片质量。但得益于数据的压缩,GIF格式的图片,其文件大小要远小于BMP格式的图片。文件小,是GIF格式的优点,同时,GIF格式还具有支持动画以及透明的优点。但是GIF格式仅支持8Bit的索引色,即在整个图片中,只能存在256种不同的颜色。

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

3、TIFF格式图像

TIFF是Tag Image File Format的简写,它是标签图像文件格式,TIFF(Tag Image File Format)图像文件是图形图像处理中常用的格式之一,其图像格式很复杂,但由于它对图像信息的存放灵活多变,可以支持很多色彩系统,而且独立于操作系统,因此得到了广泛应用(拓展性支持Mac跟Windows系统交叉使用)。在各种地理信息系统、摄影测量与遥感等应用中,要求图像具有地理编码信息,例如图像所在的坐标系、比例尺、图像上点的坐标、经纬度、长度单位及角度单位等。

4、PNG格式图像

PNG是Portable Network Graphics的简写,它是便携式网络图形,PNG是一种无损压缩的位图片形格式,其设计目的是试图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。PNG压缩比高,生成文件体积小,PNG结合了GIF和TIFF优点,能够支持压缩不失真、透明背景、渐变图像的制作要求,现在广泛应用于PS软件以及互联网之中。

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

5、JPG格式图像

JPG是JPEG(Joint Photographic Experts Group)的简写,它是一种比较常见的图画格式。它的特点是压缩比高,生成文件体积小。

JPEG格式是目前网络上最流行的图像格式,是可以把文件压缩到最小的格式,JPG图片格式的设计目标,是在不影响人类可分辨的图片质量的前提下,尽可能的压缩文件大小。这意味着JPG去掉了一部分图片的原始信息,也即是进行了有损压缩。JPG的图片的优点,是采用了直接色,得益于更丰富的色彩,JPG非常适合用来存储照片,用来表达更生动的图像效果,比如颜色渐变。

不过它的缺点也很明显,编辑和重新保存 JPG 文件时,JPG 会混合原始图片数据的质量下降,而且这种下降是累积性的。打个比方,你在微信里面收到被转发很多次的JPG图片会发现图片比原图模糊许多,且泛绿色。

6、SVG格式图像

SVG是Scalable Vector Graphics的简写,它是可缩放矢量图形,SVG图片由直线和曲线以及绘制它们的方法组成。当你放大一个SVG图片的时候,你看到的还是线和曲线,而不会出现像素点。这意味着SVG图片在放大时,不会失真,所以它非常适合用来绘制企业Logo、Icon等。

SVG作为W3C所推荐的基于XML的开放标准,能够与其他网络技术进行无缝集成,特点是使用XML来描述图片。借助于前几年XML技术的流行,SVG也流行了很多。使用XML的优点是,任何时候你都可以把它当做一个文本文件来对待,也就是说,你可以非常方便的修改SVG图片,你所需要的只需要一个文本编辑器。

7、总结

每种类型图像都有不同的指标特点,总结如下:

7.1、有损vs无损

图片文件格式有可能会对图片的文件大小进行不同程度的压缩,图片的压缩分为有损压缩和无损压缩两种。

  • 有损压缩。指在压缩文件大小的过程中,损失了一部分图片的信息,也即降低了图片的质量,并且这种损失是不可逆的,我们不可能从有一个有损压缩过的图片中恢复出全来的图片。常见的有损压缩手段,是按照一定的算法将临近的像素点进行合并。
  • 无损压缩。只在压缩文件大小的过程中,图片的质量没有任何损耗。我们任何时候都可以从无损压缩过的图片中恢复出原来的信息。

7.2、索引色vs直接色

计算机在表示颜色的时候,有两种形式,一种称作索引颜色(Index Color),一种称作直接颜色(Direct Color)。

  • 索引色。用一个数字来代表(索引)一种颜色,在存储图片的时候,存储一个数字的组合,同时存储数字到图片颜色的映射。这种方式只能存储有限种颜色,通常是256种颜色,对应到计算机系统中,使用一个字节的数字来索引一种颜色。
  • 直接色。使用四个数字来代表一种颜色,这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度。现在流行的显示设备可以在这四个维度分别支持256种变化,所以直接色可以表示2的32次方种颜色。当然并非所有的直接色都支持这么多种,为压缩空间使用,有可能只有表达红、绿、蓝的三个数字,每个数字也可能不支持256种变化之多。

7.3、点阵图vs矢量图

  • 点阵图,也叫做位图,像素图。构成点阵图的最小单位是象素,位图就是由象素阵列的排列来实现其显示效果的,每个象素有自己的颜色信息,在对位图图像进行编辑操作的时候,可操作的对象是每个象素,我们可以改变图像的色相、饱和度、明度,从而改变图像的显示效果。点阵图缩放会失真,用最近非常流行的沙画来比喻最恰当不过,当你从远处看的时候,画面细腻多彩,但是当你靠的非常近的时候,你就能看到组成画面的每粒沙子以及每个沙粒的颜色。
  • 矢量图,也叫做向量图。矢量图并不纪录画面上每一点的信息,而是纪录了元素形状及颜色的算法,当你打开一付矢量图的时候,软件对图形象对应的函数进行运算,将运算结果[图形的形状和颜色]显示给你看。无论显示画面是大还是小,画面上的对象对应的算法是不变的,所以,即使对画面进行倍数相当大的缩放,其显示效果仍然相同(不失真)。

7.4、总结

图片的压缩方式有无损压缩和有损压缩两种。前者压缩后比后者要大。

1、图片的颜色表示有直接颜色和索引颜色两种。前者比后者更丰富,体积更大。

2、BMP采用无损压缩和直接色,所以体积最大。太大的文件格式格式导致它几乎没有用武之地。

3、GIF采用无损和索引色的,适用于对色彩要求不高同时需要文件体积较小的场景,比如企业Logo、线框类的图等。支持动画和透明。

4、JPEG(JPG)采用有损压缩和直接色,不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊,而直接色的选用,又会导致图片文件较GIF更大。而适合作为摄影类的图片。.

所以小图片尽量使用png、要想支持动画则使用gif、大型图片使用jpg。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/10/02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
常见图片格式了解 前言概念了解图片类型图片比较与场景应用一图胜前言总结引用 & 参考
作为一个客户端开发,对于图片格式一直没有一个清晰的了解,这里简单的罗列出各种图片格式的区别,文章中有部分是他人的引用,会在底部放上链接,望轻喷。
菜的黑人牙膏
2019/03/19
1.2K0
每个前端工程师都应该了解的图片知识(长文建议收藏)
随着web的发展,网站资源的流量也变得越来越大。据统计,60% 的网站流量均来自网站图片,可见对图片合理优化可以大幅影响网站流量,减小带宽消耗和服务器压力。
桃翁
2019/05/31
1.4K0
TRTC案例:截图体积与清晰度
业务场景和架构:TRTC安卓端与小程序端实现视频互通,房间旁路到直播,采用直播云端截图。
singleli
2020/10/24
2.6K0
TRTC案例:截图体积与清晰度
图像处理基础知识
注:这学期开了一门Photoshop的课程,第一节课讲了图像处理的相关知识,特将内容整理如下,方便日后学习和查阅。 软件环境:PhotoshopCS6 一、位图与矢量图 1、位图 位图也称点阵图,它是由许多点组成的,这些点称为像素。当许多不同颜色的点组合在一起后,便构成了一副完整的图像。 位图可以记录每一个点的数据信息,从而精确地制作色彩和色调变化丰富的图像。但是,由于位图图像与分辨率有关,它所包含的图像像素数目是一定的,若将图像放大到一定程度后,图像就会失真,边缘出现锯齿。 2、矢量图 矢量图也称向量式图
Zoctopus
2018/06/04
2.5K0
图片知多少?
谈到图片,就离不开像素这个概念,像素是指由图片的小方格组成的,这些小方块都有一个明确的位置和被分配的色彩数值,小方格颜色和位置就决定该图像所呈现出来的样子。
瓜大三哥
2020/05/29
1.7K0
图片知多少?
常用图片格式
photoshop的专用格式。 优点:完整保存图像的信息,包括未压缩的图像数据、图层、透明等信息,方便图像的编辑。 缺点:应用范围窄,图片容量相对比较大。
Devops海洋的渔夫
2019/06/02
1.5K0
图片格式:JPG;RAW ;TIFF;PNG;GIF的解析
这期我们就来给大家全方位解析常用的图片格式:JPG;RAW ;TIFF;PNG;GIF
狼啸风云
2021/03/03
4.9K0
如何为应用选择最合适的图像格式
要是问你,你知道当下都有哪些图像格式嘛?我猜你肯定说不全,因为现在图像格式真的太多了,但是应该能说出这几个常用的格式:jpg、gif、png和svg。然后我再问你,知不知道这几个格式有什么区别?各自的适用场景又是什么呢?logo应该是选择 svg 还是 png ?而截图是选 jpg 还是 png 好?在不生成过大文件的前提下,文件的最优质量是多少?了解每个图像格式的工作原理以及它们各自的利弊可以帮助回答这些问题。
用户4456933
2021/06/01
1.2K0
如何为应用选择最合适的图像格式
探索现代图片格式:从GIF到HEIF,优势与适用场景一览
每个像素所能显示的彩色数为2的8次方,即256种颜色。这种彩色深度适用于较古老的显示设备和简单的图像场景。它在色彩表现方面相对较弱,颜色过渡可能显得不够平滑,导致图像呈现出颗粒感,不适合表现细腻的色彩变化。
linwu
2023/07/27
7930
探索现代图片格式:从GIF到HEIF,优势与适用场景一览
为你重新系统梳理下, Web 体验优化中和图有关的那些事(万字长文)
Web 页面性能优化,解决了图片相关,问题就解决了大半。本文从 Web 常见的图片格式入手,引出与图片优化相关的有效方案,期望对大家能有一点帮助。
lucifer210
2019/11/15
1.3K0
【优化】1338- 分享一下图像优化原理
我们都喜欢有图片的网页,图片很美好,很有趣,同时它涵盖了丰富的信息。所以,在加载网页时,大部分流量被图像资源所占据(平均60%,数据可能不准确)。
pingan8787
2022/06/07
8590
【优化】1338- 分享一下图像优化原理
了解最常用的图片文件格式
对于数据可视化而言,我们在使用软件可视化做图之后,还要把图片进行保存。所以对于图片的格式就需要有一些认识。
医学数据库百科
2022/04/01
2.1K0
了解最常用的图片文件格式
这个开发者易忽略的优化点,腾讯视频竟靠它省上千万元
👉腾小云导读 在互联网行业降本增效的大背景下,如何结合业务自身情况降低成本是每个业务都需要思考的问题。腾讯视频业务产品全平台日均覆盖人数超2亿。图片作为流媒体之外最核心的传播介质,庞大的业务量让静态带宽成本一直居高不下——腾讯视频各端日均图片下载次数超过 100 亿次,平均图片大小超 100kb,由此带来的图片静态带宽成本月均超千万。本文将详细介绍腾讯视频业务产品借助腾讯云数据万象来优化静态带宽成本过程中的挑战与解决方案,输出同领域通用的经验方法,希望可以对广大开发爱好者有所启发。 👉看目录,点收藏 1 背
云存储
2023/03/29
7250
这个开发者易忽略的优化点,腾讯视频竟靠它省上千万元
GIF/PNG/JPG和WEBP/base64/apng图片优点和缺点整理
阅读目录 GIF(Graphics Interchange Format) PNG(Portable Network Graphics) JPG(Joint Photographic Experts Group) base64 APNG   GIF/PNG/JPG/WEBP/APNG都是属于位图(位图 ,务必区别于矢量图);   GIF/PNG和JPG这三种格式的图片被广泛应用在现今的互联网中,gif曾在过去互联网初期慢速的情况下几乎是做到了大一统的地位,而现如今随着互联网技术应用和硬件条件的提高,png和
逸鹏
2018/04/11
3.3K0
GIF/PNG/JPG和WEBP/base64/apng图片优点和缺点整理
PNG文件解读(1):PNG/APNG格式的前世今生
png是一种无损压缩的位图片形格式,其设计目的是试图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。PNG使用从LZ77派生的无损数据压缩算法——LZW专利(Lempel-Ziv-Welch)压缩算法专利由Unisys持有,Unisys限制了GIF用在自由软件上的使用,也因此才有PNG格式的诞生。
周陆军
2021/08/07
9850
位图和矢量图区别
位图和矢量图是计算机图形中的两大概念,这两种图形都被广泛应用到出版,印刷,互联网[如flash和svg]等各个方面,他们各有优缺点,两者各自的好处几乎是无法相互替代的,所以,长久以来,矢量跟位图在应用中一直是平分秋色。
全栈程序员站长
2022/09/20
1.2K0
jpg和jpeg的区别是什么_jpeg和jpg的区别是什么
JPG文件的优点是体积小巧,并且兼容性好,因为大部分的程序都能读取这种文件,这是因为JPG格式不仅是一个工业标准格式,而且更是web的标准文件格式。JPG文件如此拥有如此便利的条件,难怪得到了业余玩家的推崇。不过另一方面,JPG之所以很小的原因是:当文件在创建的时候会有一些数据被遗失,即通过“有损”的压缩方式来建立文件,这就是其文件小的原因所在了。 如果数码相机采用了JPG作为照片存储的格式虽然可以节省宝贵空间,但不利的一面也必须看清:凡是可以在相机中调整的诸如色温、色彩平衡、图像锐度等经过相机的处理后都记录在文件内,后期调整只能通过photoshop处理来进行,但是经过调整的图像质量将会有所损失。 JPEG在远程传送上有很好的优势,为了不影响肉眼的观看请不要将压缩比小于8,如果是局域网传送,请你用JPEG的无损压缩(12)或者说直接用TIFF。 JPEG与TIFF转印在最好的铜版纸上,在JPEG压缩指数是12的前提下,二者的区别几乎没有,外行与内行(不用放大镜看印刷点阵)都看不出分别,因为真彩(24位以上)转换成印刷格式的四色模式时,颜色信息的损失比从TIFF到JPEG的过程损失得多得多,所以内、外行单看印刷品几乎不能判断图片有没有经过JPEG格式的转换! 就打印而言,用当今最好的色彩管理软件(德国的BEST COLOE)加上最好的打印机技术(墨滴为4微微升),输出的图面质量也没有印刷品好!特别的暗部的过度!但他可以做到比印刷品质丽!但很硬!JPEG在远程传送上有很好的优势,为了不影响肉眼的观看请不要将压缩比小于8,如果是局域网传送,请你用JPEG的无损压缩(12)或者说直接用TIFF。JPEG与TIFF转印在最好的铜版纸上,在JPEG压缩指数是12的前提下,二者的区别几乎没有,外行与内行(不用放大镜看印刷点阵)都看不出分别,因为真彩(24位以上)转换成印刷格式的四色模式时,颜色信息的损失比从TIFF到JPEG的过程损失得多得多,所以内、外行单看印刷品几乎不能判断图片有没有经过JPEG格式的转换! 就打印而言,用当今最好的色彩管理软件(德国的BEST COLOE)加上最好的打印机技术(墨滴为4微微升),输出的图面质量也没有印刷品好!特别的暗部的过度!但他可以做到比印刷品质丽!但很硬!一般打印机只是有一个很很普通的色彩管理程序!对颜色的解释根本达不到专业要求!因为BEST COLOE软件现在在中国要二万四左右(各位,放弃买盗版的想法,它是硬件加密:))你就别指望你家中几千块的打印机为你安装此软件,当你觉得你打出的东西又艳丽又好看时,不好意思,那是颜色失真了:(,如果你觉得你家的打印机打出的东西就是很优秀时,对不起,那你在图片色彩学方面需要进修了:)相信大家对JPEG这种图像格式都非常熟悉,在我们日常所接触的图像中,绝大多数都是JPEG格式的。JPEG的全称为Joint Photographic Experts Group,它是一个在国际标准组织(ISO)下从事静态图像压缩标准制定的委员会,它制定出了第一套国际静态图像压缩标准:ISO 10918-1,俗称JPEG。由于相对于BMP等格式而言,品质相差无己的JPEG格式能让图像文件“苗条”很多,无论是传送还是保存都非常方便,因此JPEG格式在推出后大受欢迎。随着网络的发展,JPEG的应用更加广泛,目前网站上80%的图像都采用JPEG格式。 但是,随着多媒体应用领域的快速增长,传统JPEG压缩技术已无法满足人们对数字化多媒体图像资料的要求:网上JPEG图像只能一行一行地下载,直到全部下载完毕,才可以看到整个图像,如果只对图像的局部感兴趣也只能将整个图片载下来再处理;JPEG格式的图像文件体积仍然嫌大;JPEG格式属于有损压缩,当被压缩的图像上有大片近似颜色时,会出现马赛克现象;同样由于有损压缩的原因,许多对图像质量要求较高的应用JPEG无法胜任…… 针对这些问题,从1998年开始,专家们开始为下一代JPEG格式出谋划策,希望新标准能具有更高压缩率以及更多新功能,而且更有利于用户对图像进行数字化处理。但这几年间,由于在算法选取问题上耽误了不少时间,直到今年3月的东京会议,彩色静态图像的新一代编码方式“JPEG2000”的编码算法才确定,其最终标准将于今年12月出台。JPEG2000的编码算法一经确定,许多著名的图形图像公司如Corel、Pegasus(美国神马成像公司)等就迫不及待地在新开发的图像工具软件中集成JPEG2000图像压缩技术;而Microsoft、Netscape等在浏览器领域竞争的公司也开始将JPEG2000的新技术集成到其下一个版本的浏览器中——因为相对于JPEG来说,JPEG2000可以说具有革命性的改变!
全栈程序员站长
2022/09/19
2.9K1
现代图片性能优化及体验优化指南 - 图片类型及 Picture 标签的使用
图片资源,在我们的业务中可谓是占据了非常大头的一环,尤其是其对带宽的消耗是十分巨大的。
Sb_Coco
2023/03/01
1.1K0
现代图片性能优化及体验优化指南 - 图片类型及 Picture 标签的使用
前端图片优化机制
IMWeb前端团队
2017/12/28
3.2K0
前端图片优化机制
浅谈性能优化之图片压缩、加载和格式选择
在计算机中,一般用二进制数来表示像素。在不同的图片格式中,像素与二进制位数之间对应的关系是不同的。一个像素对应的二进制位数越多,它能表示的颜色种类就丰富,成像效果也就越精致,图片所需的存储空间相应也会越大。
唐志远
2023/08/01
5510
浅谈性能优化之图片压缩、加载和格式选择
推荐阅读
相关推荐
常见图片格式了解 前言概念了解图片类型图片比较与场景应用一图胜前言总结引用 & 参考
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文