最新消息:阿里云双12优惠,史上最低折扣。

Web前端图片保存格式解析(中)

服务器租用 aliyun 286浏览

Web前端图片保存格式解析(下)

作为一名web前端开发者,对于图片难免要进行各种各样的处理,其本质无非是减小图片大小,同时保存清晰度。

1.jpg / jpeg(Joint Photographic Experts Group)

jpeg 代表Joint Photograhic Experts Group(联合图像专家组),这种格式经常写成JPG(因为早期的Windows只支持3个字母的后缀名,例如 .txt, .png, .html -> .htm),JPG图片的扩展名为jpg。

JPEG是有损的、采用直接色的、点阵图。

jpg的优点是它支持百万种色彩。jpg是一种有损压缩的方式,它会放弃图片的某些细节。所以要是对图片质量的要求不是很高,可以采用jpg的保存方式。那么根据jpg的特点总结出:色彩丰富的照片适合jpg的保存方式,不适合小图标,线条的图片。

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

与GIF相比,JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊,而直接色的选用,又会导致图片文件较GIF更大。

2.gif(Graphics Interchange Format)

gif是很早应用的一种图片格式。它采用的是lzw的压缩算法进行编码,是无损的、采用索引色的、点阵图。

lzw算法是将长字符串替换成短字符串的的方法来实现压缩。GIF是无损的,采用GIF格式保存图片不会降低图片质量。但得益于数据的压缩,GIF格式的图片大小要远小于BMP格式的图片。文件小,是GIF格式的优点,同时,GIF格式还具有支持动画以及透明的优点。

gif支持动画,支持透明,支持渐变色彩,同时gif是无损压缩,另外gif是水平压缩,也就是说10*500的图片压缩效果不如500*10的图片。

但是gif得缺点也是相当明显,仅支持8bit的索引色,即在整个图片中,只能存在256种不同的颜色,就是它只支持256中色彩,所以对于色彩丰富的图片压缩效果不好。

根据gif的这些特点可以总结出:小图标,色彩不丰富的图片适合压缩为gif格式。

GIF格式适用于对色彩要求不高同时需要文件体积较小的场景,比如企业Logo、线框类的图等。因其体积小的特点,现在GIF被广泛的应用在各类网站中。

3.png / apng(Portable Network Graphics)

png 是20世纪90年代推出的一种图片格式,它采用的是无损压缩,其目的是为了取代gif。

png分为png8,png24,png32.这几种主要区别是储存方式不同。

png8只有256色,支持透明(要么全透明,要么不透明)。

png24颜色很多,但是不支持透明,在Photoshop中导出的png24实际是png32.

png32有8位alpha通道,所以它支持透明度的设置。

3.1PNG-8

PNG全称Portable Network Graphics,PNG-8是PNG的索引色版本。PNG-8是无损的、使用索引色的、点阵图。

PNG是一种比较新的图片格式,PNG-8是非常好的GIF格式替代者,在可能的情况下,应该尽可能的使用PNG-8而不是GIF,因为在相同的图片效果下,PNG-8具有更小的文件体积。除此之外,PNG-8还支持透明度的调节,而GIF并不支持。

现在,除非需要动画的支持,否则我们没有理由使用GIF而不是PNG-8。当然了,PNG-8本身也是支持动画的,只是浏览器支持得不好,不像GIF那样受到广泛的支持。

3.2PNG-24

PNG-24是PNG的直接色版本。PNG-24是无损的、使用直接色的、点阵图。

无损的、使用直接色的点阵图,听起来非常像BMP,是的,从显示效果上来看,PNG-24跟BMP没有不同。PNG-24的优点在于,它压缩了图片的数据,使得同样效果的图片,PNG-24格式的文件大小要比BMP小得多。当然,PNG24的图片还是要比JPEG、GIF、PNG-8大得多。

虽然PNG-24的一个很大的目标,是替换JPEG的使用。但一般而言,PNG-24的文件大小是JPEG的五倍之多,而显示效果则通常只能获得一点点提升。所以,只有在你不在乎图片的文件体积,而想要最好的显示效果时,才应该使用PNG-24格式。

另外,PNG-24跟PNG-8一样,是支持图片透明度的。

3.3APNG

火狐mozilla提出来的, 24位的,而且也是动图,可以容纳1680万种颜色,也是为了取代GIF

但是只有火狐支持,IE10和chrome,safari全部不行

如果说gif图片是卡片机的话, APNG就是单反, 测试浏览器是否支持apng格式

转载请注明:小猪云服务器租用推荐 » Web前端图片保存格式解析(中)