PNG、JPEG、GIF、SVG应该用哪个?

Beginning

当我们构建网站或者开发App的时候,应当怎样选择使用图片的类型呢?
是简单的全部使用一种类型还是根据业务情形选择不同的图片类型呢?
每种类型的图片类型又有怎样的优点和缺点呢?

Concepts

图片呈现效果的异同跟以下两个因素有关:

首先,压缩分两派:无损压缩有损压缩

  • 无损压缩 :能够使图片占用的存储空间变小,而且不会损害图片的质量。
  • 有损压缩:相对无损压缩会压缩的更狠一点,但是不可避免的会对图片质量产生损害。如果有损压缩的次数多了的话,那么图片的质量也会越来越差。

其次也有不同的色彩深度(色彩模式):索引色彩直接色彩

  • 索引色彩 :这个模式下图片仅可以存储有限数量的颜色种类(通常是2^8即256种)。
  • 直接色彩:这个模式下你可以存储成千上万种颜色值,所以相对而言采用这种模式的图片会显得色彩更加丰富饱满和艳丽。

接下来会通过这两个维度对常见的几种图片类型来进行分析和比较,总结它们的优缺点和适用场景。

BMP - 无损压缩、索引色彩模式、直接色彩模式

这是较早出现的一种图片格式。它是无损的但是压缩比例着实很低,BMP格式的图片通常会占用较大的存储空间。它拥有两种色彩模式,但是由于占用存储空间如此之大,几乎没有人会去使用这种格式。
擅长:真的没有,BMP格式真的没有任何优点,大家还是尽量不要用这种格式的图片。

GIF - 无损压缩、直接色彩模式

GIF使用了更好的无损压缩算法,所以你可以压缩图片的大小但是不会丢失任何数据,文件大小也比BMP小得多。但是只可以使用索引色彩模式。这意味着大多数情况下最多只可以有256种颜色显示在图片里。颜色种类貌似真的好少,确实。GIF图片可以动并且拥有透明度(透明或不透明,并没有alpha通道)。
擅长:logo,线条,或其他需要尺寸尽可能小的简单图像。

JPEG - 有损压缩、直接色彩模式

JPEG是一种偏向平衡性的格式,它会舍弃掉人眼根本无法感知的颜色信息,以使文件尽可能小并且细节不丢失。因此,它是一种有损格式。它颜色丰富并且很适合那些允许轻微失真的像素色彩丰富的图片(如相片)。但是有损压缩意味着不适合logo和线图,因为不仅看起来模糊还比GIF占用的文件大小大。
擅长:相片,渐变图像。

PNG-8 - 无损压缩、索引色彩模式

PNG是一种较新的格式,并且PNG-8(PNG的索引模式版本)是GIF格式很好的替代。可是也有一些缺点:首先不能像GIF一样能动,其次对一些老旧的浏览器(如IE6)会有不兼容的问题。
擅长:PNG-8相对于GIF来讲有对alpha透明通道的支持。

PNG-24 - 无损压缩、直接色彩模式

PNG-24对无损压缩和直接色彩模式结合的很好(就像JPEG一样色彩丰富),在这方面和BMP很相似,但是PNG的压缩比率远强过BMP,所以文件大小也更小。不幸的是PNG-24仍然会比JPEG,GIF,PNG-8占用更多的存储空间,所以如果你对文件大小很在意的话,还是要考虑是否要选择以上的一种。

尽管PNG-24压缩比率较高而且还有丰富的色彩,但它不是为了来取代JPEG的,因为一个照片保存为PNG-24格式的话会比JPEG至少大5倍,但是图片显示质量却几乎没有提升。(如果你唯一考虑的因素就是图片质量的话,你还是可以使用这个格式的)
PNG-24和PNG-8一样也支持alpha透明通道。

SVG -无损压缩、矢量模式

SVG正变得越来越热门,它不同于以上所有的文件类型,因为它是一个矢量文件格式。这就是说它实际上是由线条和曲线,而不是像素组成的。当你放大一个矢量图像时,你仍然看到一条曲线或一条线。当你放大一个由像素构成的图像时,你会看到像素。
例如:



这意味着,对于小logo和图标和来说,SVG是很理想的,因为无论是Retina屏幕或在其他低清晰度的屏幕上它的形状都是一样的。这也意味着一个小的SVG logo可以放大但不失真,如果是像素构成的图片格式的话就需要设计多套图片,可以参考Android中的xxxdpi。
SVG文件的大小通常是极小的,即使它们看起来的样子真的很大。然而,值得注意的是,SVG文件的大小也取决于要展示图形的复杂度。而且SVG在渲染的时候需要比像素图更多的计算能力,这也就意味着性能的损耗。如果你的logo是特别复杂的,它可能会很耗费性能,甚至文件大小也非常大。所以尽可能简化你的矢量形状的复杂度是很重要也很有必要的。
此外,SVG文件是用XML编写的,因此可以在文本编辑器中打开和编辑。这意味着它展示的效果在运行时是可以改变的。例如,你可以使用JavaScript来改变对一个网站的SVG图标的颜色。所以,对于简单的平面形状,像logo或图形,使用svg是坠好的。
另外Android现在对SVG的支持也算是比较成熟了,微信团队貌似现在所有的图片资源都替换成SVG了。

Summary

所以这么一个小小的问题也有这么多值得挖掘的知识点。作为一个合格的工程师,任何一个细节都不可以放过,因为They just make it better.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容