1、从结构上讲：
图形文件分为两种，即位图和矢量图。位图即图像由许多屏幕小点（像素px）组成，这些点对应显存中的“位”，而这些“位”决定了像素的图形属性，比如像素的颜色、灰度、明暗对比度等。（显存：一版指显卡内存，也被叫做帧缓存。它的作用是用来存储显卡芯片处理过或者即将提取的渲染数据。如同计算机的内存一样，显存是用来存储要处理的图形信息的部件），当一个像素所占的位数多时，它所能表现的颜色就更多、更丰富，从整体上看，图像的色彩就更艳丽，分辨率就更高。位图中所分的二位图、八位图等正是指像素所占的位数。当位图被放大或缩小时，由于像素的数量没有改变，图像的分辨率就会降低，图像的外观自然就大打折扣；矢量图就是用矢量代替位图中的“位”，简单来说就是不以像素为单位，而是用矢量给图的几何部分做标记（矢量：有大小有方向的量，又称向量。与之相对的是标量，即只有大小而没有方向的量）。优点是：文件小，与分辨率和图像大小无关，只与图像复杂度有关、图像可无级缩放，不会产生锯齿效果、可采用高分辨率印刷、最大缺点就是难以表现色彩层次丰富的逼真图像效果。
矢量图与位图的效果是天壤之别，矢量图无限放大不模糊，大部分位图都是由矢量导出来的，也可以说矢量图就是位图的源码，源码是可以编辑的。（百科）
个人理解：位图即在矢量图的基础上新增了很多图形的属性、比如颜色、对比度啥的，而这些属性需要用像素来标识，也就解释了位图和矢量图的各自特点。简单理解位图是带有图形属性的图形文件，图形属性丰富（大），矢量图是单纯的图像文件，通常是单色、无对比度的（小）；
2、从颜色上讲
索引色VS直接色：计算机在表示颜色的时候，有两种形式，一种称作索引颜色(Index Color)，一种称作直接颜色(Direct Color)。
索引色。用一个数字来代表（索引）一种颜色，在存储图片的时候，存储一个数字的组合，同时存储数字到图片颜色的映射。这种方式只能存储有限种颜色，通常是256种颜色，对应到计算机系统中，使用一个字节的数字来索引一种颜色。
直接色（RGBA）。使用四个数字来代表一种颜色，这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度。现在流行的显示设备可以在这四个维度分别支持256种变化，所以直接色可以表示2的32次方种颜色。当然并非所有的直接色都支持这么多种，为压缩空间使用，有可能只有表达红、绿、蓝的三个数字，每个数字也可能不支持256种变化之多。
1汉字=2字节
1Byte=8bit
1KB=1024B
=> bit * 8 = B * 1024 = KB * ....
图片大小计算：
图像文件字节数(Byte) = 图像分辨率 * 颜色深度 / 8
颜色深度：简单来说就是一个像素最多支持多少种颜色。一般用“位”（bit）来描述；也叫位深
3、常见位图格式：[BMP，JPG/JPEG，GIF，PNG]（TIF、TIFF、PCD、WMF）
BMP：windows图形界面的基本构件之一，分为四种颜色模式：2位（黑白）、4位（16色）、8位（256色）、24位（1600万色）。这种格式无压缩，所以体积通常是巨大的，一张640*480的图，若色彩丰富的话，可高达1M。优点是不会丢失图形的任何细节、所以十分适合对图像要求严格的行业使用。
GIF（87年）：无损压缩，支持256中颜色（一般叫8 bit彩色），支持单一透明色；
JPG/JPEG（92年）：提供2:1到40:1的压缩比例，在8*8像素单元内进行压缩，使用的是一种失真压缩标准方法，24 bit真彩色，内容比GIF丰富，不支持动画、不支持透明色（RGB）；（真彩色：肉眼能分辨的颜色大概有1千万种，24位编码一像素能表示1600万多种颜色，也就是说能反映肉眼真实的色彩，叫真彩色；也只有24位编码及以上的才能称之为真彩色）
PNG（96年）：该格式是无损数据压缩的，有8位、24位、32位三种形式，其中8位（PNG-8）是PNG的索引色版本；是非常好的GIF格式替代者，在可能的情况下应该尽可能的使用PNG-8而不是GIF，因为在相同的图片效果下，PNG-8具有更小的文件体积。除此之外，PNG-8还支持透明度的调节，而GIF并不支持。 现在，除非需要动画的支持，否则我们没有理由使用GIF而不是PNG-8。当然了，PNG-8本身也是支持动画的，只是浏览器支持得不好，不像GIF那样受到广泛的支持；PNG-24是PNG的直接色（RGBA）版本，是无损的、使用直接色的点阵图，听起来非常像BMP，是的，从显示效果上来看，PNG-24跟BMP没有不同。PNG-24的优点在于，它压缩了图片的数据，使得同样效果的图片，PNG-24格式的文件大小要比BMP小得多。当然，PNG24的图片还是要比JPEG、GIF、PNG-8大得多。
WebP：WebP是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的、点阵图。从名字就可以看出来它是为Web而生的，什么叫为Web而生呢？就是说相同质量的图片，WebP具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。
在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；
在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；
WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。
SVG：全称Scalable Vector Graphics，是无损的、矢量图。
SVG跟上面这些图片格式最大的不同，是SVG是矢量图。这意味着SVG图片由直线和曲线以及绘制它们的方法组成。当你放大一个SVG图片的时候，你看到的还是线和曲线，而不会出现像素点。这意味着SVG图片在放大时，不会失真，所以它非常适合用来绘制企业Logo、Icon等。
SVG是很多种矢量图中的一种，它的特点是使用XML来描述图片。借助于前几年XML技术的流行，SVG也流行了很多。使用XML的优点是，任何时候你都可以把它当做一个文本文件来对待，也就是说，你可以非常方便的修改SVG图片，你所需要的只需要一个文本编辑器。
TIF、TIFF -- 标记图像文件格式
PCD -- Photoshop的专利
WMF -- Windows位元文件
alpha通道：描述图片中的透明区域，此透明区域允许通透地显示背景。
是指一张图片的透明和半透明度。例如：一个使用每个像素16比特存储的位图，对于图形中的每一个像素而言，可能以5个比特表示红色，5个比特表示绿色，5个比特表示蓝色，最后一个比特是阿尔法。在这种情况下，它要么表示透明要么不是，因为阿尔法比特只有0或1两种不同表示的可能性。又如一个使用32个比特存储的位图，每8个比特表示红绿蓝，和阿尔法通道。在这种情况下，就不光可以表示透明还是不透明，阿尔法通道还可以表示256级的半透明度，因为阿尔法通道有8个比特可以有256种不同的数据表示可能性。（RGBA）；
PNG VS JPG：简单理解、假设一张640*480的图片：JPG采用有损压缩，在图片产生之时就已经是有损的，压缩比例又在2:1以上、40:1以下，简单算在1/2的大小，即大小为：640*480*24/8/2/1024/1024=0.43945M；PNG图片因为带有透明属性，同样体积的情况下位深高出一个alpha通道，假设是PNG-24的8位通道，即大小为640*480*32/8/1024/1024=1.171875M；
得到： 0.43945 : 1.171875 == １： 2.666666；
也就是说，按JPEG最大压缩比（通常是6：1--10：1的压缩比）、PNG未压缩（通常可选70%的压缩比）来看，PNG格式图片的大小是JPG的2.66666倍。而在真实的使用场景中，同像素情况下，PNG格式的图片大小通常是JPG的2-6倍左右。（该对比为个人理解，未经认证。另外，图片压缩算法什么的就没去了解了，有兴趣的同学可以去学习一下）
PS： 今天刚好是入简书一周年，欧欧欧~
网友评论