前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >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.6K0
举报

目录

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.5K0
探索现代图片格式:从GIF到HEIF,优势与适用场景一览
每个像素所能显示的彩色数为2的8次方,即256种颜色。这种彩色深度适用于较古老的显示设备和简单的图像场景。它在色彩表现方面相对较弱,颜色过渡可能显得不够平滑,导致图像呈现出颗粒感,不适合表现细腻的色彩变化。
linwu
2023/07/27
8780
探索现代图片格式:从GIF到HEIF,优势与适用场景一览
计算机图形处理的一些知识
最近在搞opencv来做一些简单的图像识别,既然涉及到图像识别,那么首先我们要把图像重新认识一下,大部分人看到一张照片可能就是单纯的一张照片,在一些做图像处理的人的眼中,可不就这么简单了。 计算机图形的分类 (1)位图(Bitmap) 也叫做点阵图,删格图象,像素图,简单的说,就是最小单位由象素构成的图,缩放会失真。构成位图的最小单位是象素,位图就是由象素阵列的排列来实现其显示效果的,每个象素有自己的颜色信息,在对位图图像进行编辑操作的时候,可操作的对象是每个象素,我们可以改变图像的色相、饱和度、明度,从而
我是攻城师
2018/05/15
1.6K3
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.4K0
GIF/PNG/JPG和WEBP/base64/apng图片优点和缺点整理
位图/矢量图/GIF/PNG/JPEG/WEBP一网打尽
大家好,我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder。
前端柒八九
2024/03/07
6100
位图/矢量图/GIF/PNG/JPEG/WEBP一网打尽
位图和矢量图区别
位图和矢量图是计算机图形中的两大概念,这两种图形都被广泛应用到出版,印刷,互联网[如flash和svg]等各个方面,他们各有优缺点,两者各自的好处几乎是无法相互替代的,所以,长久以来,矢量跟位图在应用中一直是平分秋色。
全栈程序员站长
2022/09/20
1.2K0
关于前端中图片的性能优化方案
在本地执行 node index.js 后,将会输出一串的<svg>标签,将其直接放入HTML文件中即可。非常的方便
学前端
2020/04/07
2K0
PNG文件解读(1):PNG/APNG格式的前世今生
png是一种无损压缩的位图片形格式,其设计目的是试图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。PNG使用从LZ77派生的无损数据压缩算法——LZW专利(Lempel-Ziv-Welch)压缩算法专利由Unisys持有,Unisys限制了GIF用在自由软件上的使用,也因此才有PNG格式的诞生。
周陆军
2021/08/07
1K0
如何为应用选择最合适的图像格式
要是问你,你知道当下都有哪些图像格式嘛?我猜你肯定说不全,因为现在图像格式真的太多了,但是应该能说出这几个常用的格式:jpg、gif、png和svg。然后我再问你,知不知道这几个格式有什么区别?各自的适用场景又是什么呢?logo应该是选择 svg 还是 png ?而截图是选 jpg 还是 png 好?在不生成过大文件的前提下,文件的最优质量是多少?了解每个图像格式的工作原理以及它们各自的利弊可以帮助回答这些问题。
用户4456933
2021/06/01
1.2K0
如何为应用选择最合适的图像格式
图片格式:JPG;RAW ;TIFF;PNG;GIF的解析
这期我们就来给大家全方位解析常用的图片格式:JPG;RAW ;TIFF;PNG;GIF
狼啸风云
2021/03/03
5K0
现代图片性能优化及体验优化指南 - 图片类型及 Picture 标签的使用
图片资源,在我们的业务中可谓是占据了非常大头的一环,尤其是其对带宽的消耗是十分巨大的。
Sb_Coco
2023/03/01
1.1K0
现代图片性能优化及体验优化指南 - 图片类型及 Picture 标签的使用
【优化】1338- 分享一下图像优化原理
我们都喜欢有图片的网页,图片很美好,很有趣,同时它涵盖了丰富的信息。所以,在加载网页时,大部分流量被图像资源所占据(平均60%,数据可能不准确)。
pingan8787
2022/06/07
8960
【优化】1338- 分享一下图像优化原理
这个开发者易忽略的优化点,腾讯视频竟靠它省上千万元
👉腾小云导读 在互联网行业降本增效的大背景下,如何结合业务自身情况降低成本是每个业务都需要思考的问题。腾讯视频业务产品全平台日均覆盖人数超2亿。图片作为流媒体之外最核心的传播介质,庞大的业务量让静态带宽成本一直居高不下——腾讯视频各端日均图片下载次数超过 100 亿次,平均图片大小超 100kb,由此带来的图片静态带宽成本月均超千万。本文将详细介绍腾讯视频业务产品借助腾讯云数据万象来优化静态带宽成本过程中的挑战与解决方案,输出同领域通用的经验方法,希望可以对广大开发爱好者有所启发。 👉看目录,点收藏 1 背
云存储
2023/03/29
7460
这个开发者易忽略的优化点,腾讯视频竟靠它省上千万元
TRTC案例:截图体积与清晰度
业务场景和架构:TRTC安卓端与小程序端实现视频互通,房间旁路到直播,采用直播云端截图。
singleli
2020/10/24
2.7K0
TRTC案例:截图体积与清晰度
常用图片格式
photoshop的专用格式。 优点:完整保存图像的信息,包括未压缩的图像数据、图层、透明等信息,方便图像的编辑。 缺点:应用范围窄,图片容量相对比较大。
Devops海洋的渔夫
2019/06/02
1.6K0
拿到大厂前端offer的前端开发是怎么回答面试题的
如果是 HTTP 1.0 版本协议,一般情况下,不支持长连接,因此在每次请求发送完毕之后,TCP 连接即会断开,因此一个 TCP 发送一个 HTTP 请求,但是有一种情况可以将一条 TCP 连接保持在活跃状态,那就是通过 Connection 和 Keep-Alive 首部,在请求头带上 Connection: Keep-Alive,并且可以通过 Keep-Alive 通用首部中指定的,用逗号分隔的选项调节 keep-alive 的行为,如果客户端和服务端都支持,那么其实也可以发送多条,不过此方式也有限制,可以关注《HTTP 权威指南》4.5.5 节对于 Keep-Alive 连接的限制和规则。
loveX001
2022/11/09
3370
图像处理基础知识
注:这学期开了一门Photoshop的课程,第一节课讲了图像处理的相关知识,特将内容整理如下,方便日后学习和查阅。 软件环境:PhotoshopCS6 一、位图与矢量图 1、位图 位图也称点阵图,它是由许多点组成的,这些点称为像素。当许多不同颜色的点组合在一起后,便构成了一副完整的图像。 位图可以记录每一个点的数据信息,从而精确地制作色彩和色调变化丰富的图像。但是,由于位图图像与分辨率有关,它所包含的图像像素数目是一定的,若将图像放大到一定程度后,图像就会失真,边缘出现锯齿。 2、矢量图 矢量图也称向量式图
Zoctopus
2018/06/04
2.5K0
平面设计常用的图像文件格式
1.bmp bmp格式是微软制定的图形标准,最大的优点就是在pc上兼容度一流,就算不装任何看图软件,用windows的画笔一样可以看。储存为bmp格式的图形不会失真,但容量会很大。 2.jpg jpg格式是目前网络上最流行的图形格式,它可以把文件容量压缩到最小的格式。jpg支持不同程度的压缩比,您可以视情况调整压缩倍率,压缩比越大,品质就越低;相反地,压缩比越小,品质就越好。不过要注意的一点是,这种压缩法属于失真型压缩,文件的压缩会使得图形品质下降。 3.gif gif与jpg一样是目前网络上最常见
用户7657330
2020/08/14
1.5K0
人工智能:数字图像类型和常见格式介绍
位图:位图是利用像素点来表示一幅图像,并且每一个像素都具有颜色和位置属性,是数字图像处理的常见表示方法。
小明互联网技术分享社区
2023/01/08
1.8K0
人工智能:数字图像类型和常见格式介绍
推荐阅读
相关推荐
常见图片格式了解 前言概念了解图片类型图片比较与场景应用一图胜前言总结引用 & 参考
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档