赋能网——汇集资讯,供您参阅。共赋知识能量,共享生活阳光。
 字体大小:

前端基础系列之bmp、jpg、png、gif、svg常用图片格式浅谈(一)

发布人:赋能网  发布时间:2022-04-14
摘要:WEB技术为多媒体信息传播提供的快捷可靠的方式。在多媒体信息当中,图像信息占了很大比例。通过网站传播的图像信息,大多数以图片文件的方式提供。所以,花一点时间来了解常用的图片文件格式和特点,很有意义!

IT小客栈  作者:大腰子

WEB技术为多媒体信息传播提供的快捷可靠的方式。在多媒体信息当中,图像信息占了很大比例。通过网站传播的图像信息,大多数以图片文件的方式提供。所以,花一点时间来了解常用的图片文件格式和特点,很有意义!

文章表述内容仅为个人观点,仅供参考。未经许可,谢绝转载。

作为网站前端开发者,掌握了的图片文件的格式和要点,便会有意无意地去优化要发布的图片,给网站用户提供最优质、最流畅的浏览体验;作为互联网的参与者,通过了解图片格式和特点,一方面有助于了解主流网站技术对用户产生内容(UGC)的处理(比如,百度贴吧中上传的图片应该怎样处理,微信聊天发送图片时为什么要压缩和优化,淘宝网的详情页中使用大量的图片有什么坏处等等),另一方面,用户知识水平的提高,会促进评判能力的提高,进而反向影响和促进网站开发者、内容发布者的职业素养,积极影响网络生态环境。

评判图片文件本身的质量(非评判图片内容的质量,如照片取景、书画意境,不在本文讨论范围),可以综合考虑这些要素:像素数(尺寸×分辨率)、失真情况(有损、无损、压缩与否)、字节数(图片文件的二进制尺寸)。

小贴士:“尺寸”一词,英文是 Size。传统意义中,尺寸(Size)是对空间维度的一种度量方式,比如物体的长宽高,单位是厘米、毫米等。而随着计算机技术的产生,尺寸(Size)一词出现了新的意义,那就是对二进制维度的度量,即字节数,常用的有字节(Byte,简写B)、千字节(KB)、兆字节(MB)、吉字节(GB)等。这就使某些场景下“尺寸”的表述出现了理解混乱,比如,别人问你,某个图片文件的尺寸是多少时,没法一下分辨出对方究竟想知道的是图片长宽各多少厘米,还是图片文件占多少字节。为了避免对“尺寸”一词的理解困难,建议大家只使用其空间维度上的意思,而用到二进制维度上的度量需求时,请直接使用“字节数”进行表述。

在需要处理图片时,综合考虑上述参数,结合不同图片文件格式的特点,有助于我们选择最优的图片存储格式。

bmp、jpg、gif、png、svg不同文件格式的特点对比表

图片格式

描述

存储内容是否失真

透明与否

是否可为动态图

文件名示例

bmp

位图,全称bitmap。此格式图片对每个像素点的色彩进行采样,采用非压缩的存储方式,文件字节数非常大。

存储不失真

无透明度

微奇帆

.bmp

jpg、jpeg

位图,常用格式,做到了图像内容质量与字节数相平衡。相比bmp格式,jpg使用的压缩技术。牺牲一部分保真度,大大缩减文件字节数,利用存储和传输

有失真

无透明度

微奇帆

.jpg

gif

索引位图。将图像看作有限的颜色种类(256中颜色以内),每个像素仅存储色彩对于的索引值。适合色彩少的图像,恰当使用,字节数较小。

有失真

有,简单的透明处理方式,仅支持100%透明或100%不透明,没有中间状态。

是,可做简单动画

微奇帆

.gif

png(8bit)

类似于gif格式

有失真

类似于gif格式

微奇帆

.png

png(24bit)

位图,常用格式。老版本IE浏览器不支持透明显示。可以直接导入PhotoShop作为透明图层使用

存储不失真

有,支持复杂的透明度,比如1%透明度

svg

矢量图,移动设备端常用。色彩数不宜多。可无限放大不失真

不失真,可无限缩放

有,简单的透明处理方式,仅支持100%透明或100%不透明,没有中间状态。

微奇帆

.svg

什么是像素数

计算机是采用数字化技术处理信息的,第一步就是信息采样:把自然界中连续的信息量按一定的单位进行切割,间断的存储起来。比如对声音进行数字化处理,自然界的声音波形可以看作连续的一维曲线,采样就是间隔一定的时间在声波上取一系列的信息点。信息点的密度足够大时,就足以用来描述声音的特征了。这里仅简要描述,想全面了解声音采样,还请看官自行了解 采样频率 采样位深度等概念,参见一道计算题:WAV格式,采样频率44.1KHZ,双声道,32位量化位数,播放4分钟,优盘容量大小至少为多少

1649394270942017.jpg

对自然界中的图像采集的信息点的数量就是像素数。比起一维的声音曲线采样,图像采样多了一个维度,有长宽两个维度,比如长宽各采样10个点,那么采样的像素数就是10×10=100个像素。平时所说的手机摄像头是800万像素的,也就是摄像头拍摄的的照片最多可采样800万个。可以想到,像素数越多,图像包含的有效信息就越多,图像也就越贴近自然界的真实情况。

图像数字化采样示意图.jpg

怎么减小图片文件存储的字节数

之前说过,像素数越多,为了对图片内容特征的描述就越充分。所以,现实中很多数字图片都拥有庞大的像素数量,比如800万个像素。一般情况每个像素的位深度是24位,即3B(字节),那么要存储800万个像素点就需要占用的存储空间为:800万 × 3B = 8M × 3B = 24MB(兆字节),这是一个很大的字节数,如果图片多了,就不利于存储和传输。那么,就需要对对图片进行压缩存储,来减小字节数。

如何进行压缩存储呢?我们来作一个形象的描述。

bmp格式文件的存储方式——无压缩:

描述一:对于上述800万像素的图片,一般这样描述,第1个像素颜色、第2个像素颜色……第100万个像素颜色、第100万零一个像素颜色、第100万零二个像素颜色……第200万个像素颜色、第200万零一个像素颜色、第200万零二个像素颜色……第800万个像素颜色

800万像素简单图像示意图.png

好了,终于把800万个点的颜色说完了。显然,这种存储方式要进行大量的描述,反映到计算机上就是需要占用很大的字节数。

当然,这种方式也有优势,那就是计算机在处理bmp图像时,按描述,逐个像素绘制,就可以完成图片的显示了,不需要做额外的翻译工作。其实bmp是Windows操作系统中的标准图像文件格式,其他格式的文件在被处理的过程中都会被转换成bmp格式,才能进一步进行显示等处理。

jpg、png等格式文件的存储方式——有压缩:

描述二:对上面的描述方式,我们可以作一些改变,第1到100万个像素颜色蓝、第100万零一到第200万个像素颜色红、第200万零一到第800万个像素颜色蓝,三句话就把800万个像素描述完了,写起来连省略号都不需要!

这就是一种对信息的压缩,大多数情况下,压缩之后的图片文件字节数会减小,达到了减小图片文件存储的字节数的目标。极少数情况下压缩没效果,比如800万个像素颜色各异,当然,这种情况很少用到。

什么是图像失真

图像失真分为采样失真和存储失真,这里只介绍存储失真。前面提到了jpg、png等格式文件的存储方式——有压缩,怎么进行进一步的压缩呢?那就是把类似的颜色当作一种颜色来看,比如浅蓝、深蓝各种蓝色全部看作一个标准的蓝色。显然,经过这种“颜色简化”之后,图片内容跟原始情况就有了差距,不真实了,就叫做失真。

很多情况下,都会采取这种失真的存储方式,来进一步减少图片的字节数。虽然有失真,不过不必担心,计算机可以表示出来的颜色非常丰富,很多相近的颜色肉眼是识别不出来的,所只要不是太过分的简化颜色,是不会影响我们用眼睛欣赏图片内容的!jpg格式的图片就是用这种方式存储的。

什么叫索引方式存储?

前面说到,通畅每个像素的颜色需要用3个字节(3B)来表示,有些场景下,采样获得的图片颜色只有有限的种类。那我们可以给颜色起一个简短的名字(简短名字只占1个字节),比如:红色的名字就是“1”,蓝色的名字就是“2”,这就叫做图片的颜色索引表,是和图片存储在一起的,会占用部分的字节。有了颜色索引表,我们就可以改变一下描述一的内容,如下。

描述三:颜色索引表内容为:1-红色,2-蓝色;第1个像素颜色2、第2个像素颜色2……第100万个像素颜色2、第100万零一个像素颜色1……你看,图片的字节数就得到了减小,之前是800万×3字节,现在只需要800万×1字节,在花费少量的字节存储颜色索引表即可。

这就是索引方式存储,gif、png(8bit)就是使用这种方式。

什么是位图矢量图

位图是将图像采样,记录有限个像素点的颜色来进行存储的;矢量图更像是通过数学公式的方式,记录和存储图像中各个形状的特征,显示时再通过计算这些数学公式,把形状呈现出来。

位图适合存储场景复杂、色彩丰富的图像,不过,因为其存储的像素数量总是有限的,所以图片放大了会失真;矢量图适合存储各种点、线、面构成的图像,色彩也不宜太多,但是其支持无限放大而不会失真。本文列出的svg格式是矢量图,其他都是位图。

svg在移动端应用广泛。为了自动缩放以适应不同的屏幕尺寸,在面向移动端的网页中多采用svg图片文件,比如logo、图标等等,使网页在不同的显示比例下都能确保边缘清晰不失真,能够为用户提供更好的访问体验。要注意的是,在PC端,svg不被老版本的IE浏览器支持。

位图与矢量图放大失真对比示意图.png

此文暂时就谈这些内容,对于图片的背景透明、gif动态图、如何在PhotoShop中操作等问题,后续开贴继续浅谈,敬请关注!

结束语

如果把宽带网络比做高速公路,网络上传输的每一个图片文件就是公路上川流不息的汽车。在满足显示需求的情况下,选对图片文件格式、优化图片的尺寸和字节数,你的汽车就是符合生产和使用标准的,行驶起来优雅美观,而且安全顺畅,也不会无缘无故给别人添堵;相反,就相当于汽车超员、超载、超宽,行驶别扭,给别人添堵,而且有一定的隐患(比如网速不良时不易加载)。

作为无比挑剔的设计师、前端工程师,你有责任优化每个像素、削减每个多余字节,一起行动吧。^_^


微信公众号 微博
版权与免责声明:
  1. 凡本站及其子站注明“原创”的所有作品,其版权归属于本站所有,其他媒体、网站或个人转载使用时必须注明“文章来源:赋能网 ifuneng.net”。
  2. 凡本站及其子站注明“转载”、“转载自”、“来源”等的所有作品,均转载自其他媒体,转载的目的在于传递更多信息,并不代表本站及其子站赞同其观点,本站不对其真实性负责。其他媒体、网站或个人转载使用时必须注明文章原始来源,并自负法律责任。
© All Right Reserved 赋能网保留一切权利
皖ICP备12007137号-3   皖公网安备 34011102003241号
联系我们:ifunengcn