1.图片 2. 前言
首先,我们要清楚的是,图片从类型上分,可以分为 位图 和 矢量图。
位图:位图又叫点阵图或像素图,计算机屏幕上的图是由屏幕上的发光点(即像素)构成的,每个点用二进制数据来描述其颜色与亮度等信息。因为这些点是离散的,类似于点阵,同时因为多个像素的色彩组合就形成了图片,所以叫这种图为点阵图或者位图。常见位图有 JPG、PNG、GIF 等格式。
矢量图:矢量图又叫向量图,它是由一系列计算机指令来描述和记录一幅图,一幅图可以解为点、线、面等组成的子图。生成的矢量图文件存储量很小,特别适用于文字设计、图案设计等,而在前端中比较常用的矢量图有 SVG 等格式……
然后,我们按压缩划分,可以将图片分为 无损压缩 和 有损压缩。
无损压缩:无损压缩是对文件本身的压缩,使图片占用的存储空间变小,并且不会损害图片的质量。常见无损压缩有 PNG 等。
有损压缩:有损压缩是对图像本身的改变,会对图片质量造成损害,随着压缩次数越来越多,那么图片质量会越来越差。常见有损压缩有 JPG 等。
最后,究根结底,我们需要知道在计算机中,像素是用二进制来表示的。不同图片格式中像素与二进制位数之间的对应关系是不同的。一个像素对应的二进制位数越多,那么它可以表示的颜色种类就越多,成像效果也就越细腻,文件体积相应也会越大。
一个二进制位表示两种颜色 【 0|1 <——对应——> 黑|白 】,如果一种图片格式对应的二进制位数有 n 个,那么它就可以呈现 2^n 中颜色。例如:
PNG-8:它有 2^8 种颜色,即 256 种颜色。
PNG-24:它有 2^24 种颜色,即 1677216 种颜色(1600 万种颜色)。
OK,知道了这些基础知识,我们就按图片出现的顺序,一一讲解下常用的图片知识吧!
3.1 BMP早期使用的图片格式,叫 BMP,取自英文单词 BitMap,Windows 中文版译作 位图,它的文件结构很简单,没有压缩,一个一个像素地记录下来。
如果你的系统是 Windows,你可以打开 画图 工具,然后点击另存为,你可以看到保存的选项中有个 24位位图 的格式,即 1600 万色的图片。
当然,历史总在前进,BMP 这种没有压缩的图片格式,逐渐被后起之秀代替了。
不知道为什么,查不到 JPG、PNG、GIF 的出现顺序,下面只好按我个人记忆方式来编文章段落。
3.2 JPEG关键字:有损压缩、体积小、加载快、不支持透明
简要介绍:
JPEG/JPG 格式,是应用最广泛的图片格式之一,特点如下:
JPEG/JPG 采用特殊的有损压缩算法,将不易被人眼察觉的图像颜色删除,从而达到较大的压缩比,因此它的压缩文件尺寸较小,下载速度快,成为互联网最广泛使用的格式。
JPEG/JPG 因为属于有损压缩,所以当压缩级别逐渐增大的时候,图片质量会逐渐损耗,所以压缩要适当。
在合适的场景下,即便我们将图片体积压缩至原有体积的 50% 以下,JPG 仍能保持住 60% 的品质,且因为 JPG 格式以 24 位图存储单个图,可以呈现多达 1600 万种颜色,足以满足大多数场景,
适用场景:
大的背景图
轮播图
Banner 图
3.3 PNG关键字:无损压缩、质量高、体积大、支持透明
简要介绍:
PNG(可移植网络图形格式)是一种无损压缩的高保真的图片格式,它的压缩比高于 GIF,支持图像透明,可以利用 Alpha 通道调节图像透的明度。
PNG 分 PNG-8 和 PNG-24。
PNG-8:PNG-8 是无损压缩的索引色彩模式。PNG-8 是 GIF 格式很好的替代,虽然不能像 GIF 一样有动画,也不兼容 IE6 等老旧浏览器。PNG-8 最多支持 256 中颜色。
PNG-24:PNG-24 是无损压缩的直接色彩模式。PNG-24 会比 JPEG、GIF、PNG-8 占用更大的存储空间。PNG-24 可以呈现 1600 万种颜色。
2^8 = 256,2^24 = 1677216
适用场景:
普遍场景
小的 Logo,颜色简单且对比强烈的图片或者背景。
颜色简单、对比度强的透明小图。
什么时候使用 PNG-8,什么时候使用 PNG-24 呢?
理论上,位数最大的就是最好的,直接上 PNG-24;但是实际上,为了避免体积过大的问题,一般在适合使用 PNG 的场景中,优先选择比较小巧的 PNG-8。
如何确定是使用 PNG-8 还是 PNG-24,这就看你的 UI 设计师或者负责人能接受那个了,除非你设计功底非常好,要不然不要做这个选择!
3.4 GIF关键字:支持动画
简要介绍: