前言
一切要从图像分辨率说起。前不久问过自己一个问题：小米6只有1920x1080的分辨率为什么能拍出4032x3016px的照片？
不知当时脑袋想什么，问出这样一个特别蠢的问题。但它居然就这样作为一个导火索，让我不得不去了解一下关于图像的基本知识。
这里需要说明的是，这个问题本身就是个问题。小米6的分辨率1920x1080是说的屏幕分辨率，而4032x3016px的照片是相机拍出来的图像分辨率，也就是米6后置的1200万像素摄像头拍出来的。一个是屏幕显示分辨率，另一个是拍照图像分辨率，就没得啥关联的。
然后又因为接触React Native，知道其组件的宽高用的是逻辑像素作为单位。之前买的kindle参数里其中一项是PPI，笔记本外设显示器4K屏……
于是就简单整理一下图像基础知识及相关概念，权作了解。
基本概念
位图和矢量图是计算机图形中的两大概念。
位图
位图（bitmap）也叫点阵图、栅格图像、像素图。构成位图的最小单位是像素，位图就是依靠像素阵列的排列来实现其显示效果的，缩放位图会导致失真（边缘锯齿）。例如放大后的位图出现“马赛克”。
位图图像善于重现颜色的细微层次，能够制作出色彩和亮度变化丰富的图像，可逼真地再现这个世界，文件庞大，不能随意缩放，打印和输出的精度是有限的。
位图的文件类型很多，如.bmp、.pcx、.gif、.jpg、.tif等。同样的图形，存盘成以上几种文件时文件的字节数会有一些差别，尤其是jpg格式，它的大小只有同样的bmp格式的1/20到1/35，这是因为它们的点矩阵经过了复杂的压缩算法的缘故。
位图图像面积越大，图像文件的色彩越丰富，文件的字节数就越多。
矢量图
矢量图（vector）也叫向量图，是一种缩放不失真的图像格式。矢量图是通过多个对象的组合生成的，对其中的每一个对象的纪录方式，都是以数学函数来实现的，也就是说，矢量图实际上并不是像位图那样纪录画面上每一点的信息，而是纪录了元素形状及颜色的算法，当你打开矢量图的时候，软件利用图行对应的函数进行运算，将运算结果[图形的形状和颜色]显示给你看。
矢量图形能重现清晰的轮廓，线条非常光滑、且具有良好的缩放性。因为图像中保存的是线条和图块的信息，与分辨率和图形大小无关，只与图像的复杂程度有关，所以图像文件所占的存储空间较小（图像不复杂情况下）。
与位图相比，在显示和打印方面都快的多；图形不真实生动，颜色不丰富。无法像照片一样真实地再现这个世界的景色。（矢量图基本都需要专门软件打开）
矢量图形格式也很多，常见的如.SVG。
矢量图形文件的规律：
- 可以无限放大图形中的细节，不用担心会造成失真和色块。
- 一般的线条的图形和卡通图形，存成矢量图文件就比存成位图文件要小很多。
- 存盘后文件的大小与图形中元素的个数和每个元素的复杂程度成正比。而与图形面积和色彩的丰富程度无关。（元素的复杂程度指的是这个元素的结构复杂度，如五角星就比矩形复杂、一个任意曲线就比一个直线段复杂）。
- 通过软件，矢量图可以轻松地转化为位图，而位图转化为矢量图就需要经过复杂而庞大的数据处理，而且生成的矢量图的质量绝对不能和原来的图形比拟。
一些单位
绝对单位与相对单位。比如设备尺寸5.15 inch就是绝对的物理长度，像素（pixel）就是相对单位，1英寸显示屏可以只有1个像素，也可以有100个像素。相同面积不同分辨率的显示屏，其像素点大小就不相同。
px：pixel，像素，是组成数字图像的基本单元。这种基本单元越多，越能呈现出图像的细节，图像就越清晰。像素的大小是没有固定长度的，不同设备上一个单位像素色块的大小是不一样的。
ppi ：pixels per inch,等于屏幕对角线像素点／屏幕对角线物理宽度，是每英寸对角线上所拥有的像素（pixel）数目，通常也叫像素密度。手机屏幕的PPI当达到一定数值（300ppi）时，人眼就分辨不出颗粒感了。
dpi：dots per inch,是每英寸所能打印的点数，通常也叫打印精度。如：打印机输出可达600DPI的分辨率，表示打印机可以在每一平方英寸的面积中可以输出600X600＝360000个输出点。大多数情况下，PPI与DPI的数值是相等的。
dp：density-independent pixels,一种基于屏幕密度的抽象单位。在每英寸160点的显示器上，1dp = 1px。dp的提出是为了解决控件对不同屏幕的适配问题。
sp：scale-independent pixel，与缩放无关的抽象像素，安卓开发用的字体大小单位。一般情况下可认为sp=dp。
density ：密度。density ≈ 设备PPI/160PPI。比如我是320PPI设备，density＝320PPI/160PPI=2;density是一个int类型的值。
运算案例
小米6设备参数：显示屏尺寸5.15英寸（1 inch=2.54 cm），分辨率1920x1080px
计算得：PPI=428 ，density≈3，1dp=2.67px≈3px。
分辨率
分辨率，又称解析度。分辨率=画面水平方向的像素值x画面垂直方向的像素值，分为 屏幕分辨率和图像分辨率。
显示分辨率（屏幕分辨率）是屏幕图像的精密度，是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多。显示分辨率一定的情况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。
屏幕分辨率1920x1080（16:9显示屏），就是说设备屏幕的水平方向上有1920个像素点，垂直方向上有1080个像素点。同一台硬件设备上的屏幕分辨率、像素块大小是不会变的（倾向于说显示器分辨率）。PC电脑上之所以可以调整屏幕分辨率，其实是通过算法转换实现的。
图像分辨率是指每英寸图像内的像素点数（这种定义方式更精准）。图像分辨率是有单位的，叫 像素每英寸。分辨率越高，像素的点密度越高（图像尺寸一定时），图像越逼真。
分辨率和清晰度不能对等，虽然很多情况下高分辨率的确意味着高清晰度。比如一张1920x1080尺寸的图片，放在1920x1080分辨率的PC屏幕上显示没问题（大小合适），但放在4K屏上就会发现图片变模糊（失真）了（因为4K屏幕大，图像放大失真）。又比如1920x1080和1280x720的图片作为手机壁纸，其实清晰度看起来差不多的。
图像深度与像素深度
像素深度和图像深度是两个相互关联但又有所不同的两个概念。
像素深度
像素深度是指存储每个像素所用的位数，它也是用来度量图像的分辨率。
像素深度决定彩色图像的每个像素可能有的颜色数，或者确定灰度图像的每个像素可能有的灰度级数。例如，一幅彩色图像的每个像素用R，G，B三个分量表示，若每个分量用8位，那么一个像素共用24位表示，就说像素的深度为24，每个像素可以是16 777 216（2的24次方）种颜色中的一种。在这个意义上，往往把像素深度说成是图像深度。表示一个像素的位数越多，它能表达的颜色数目就越多，而它的深度就越深。
图像深度
图像深度是指像素深度中实际用于存储图像的灰度或色彩所需要的比特位数。假定图像的像素深度为16bit，但用于表示图像的灰度或色彩的位数只有15位，则图像的图像深度为15。
在用二进制数表示彩色图像的像素时，除R，G，B分量用固定位数表示外，往往还增加1位或几位作为属性(Attribute)位。例如，RGB 5∶5∶5表示一个像素时，用2个字节共16位表示，其中R，G，B各占5位，剩下一位作为属性位。在这种情况下，像素深度为16位，而图像深度为15位。
图像通道
我们都知道颜色的三元素 Red, Green, Blue。 如果是深度为24=3*8，我们刚好就可以用第一个8位存储Red值，第二个存储Green值，第三个存储Blue值, 2的8次方刚好是255,所以我们一般看到的RGB值都是(0-255,0-255,0-255)这样的值。如果用rgb来表示图片的颜色值，我们称这样的图片通道为三。
每个像素点都有3个值表示 ，所以就是3通道；也有4通道的图（RGB+alpha），灰度图一般为单通道。
灰度图像
灰度也可以认为是亮度，简单说就是色彩的深浅程度。
灰度图像是二值图像的进化版本，是彩色图像的退化版，也就是灰度图保存的信息没有彩色图像多，但比二值图像多，灰度图只包含一个通道的信息，而彩色图通常包含三个通道的信息。
灰度数字图像是每个像素只有一个采样颜色的图像（灰度图没有色彩）。这类图像通常显示为从最暗黑色到最亮的白色的灰度，尽管理论上这个采样可以任何颜色的不同深浅，甚至可以是不同亮度上的不同颜色。灰度图像与黑白图像不同，在计算机图像领域中黑白图像只有黑白两种颜色，灰度图像在黑色与白色之间还有许多级的颜色深度。
彩色图像可以二值化和灰度化。
图像格式
BMP、PNG、GIF、TIF和JPG格式的文件是位图文件，文件的扩展明指明了图像文件的标准。SVG是矢量图文件格式。图片文件格式本质上是一种对图片进行压缩进而减少文件大小的解决方案。
如果将图像原始格式直接存储到文件中将会非常大，比如一个5000x5000 24位图，所占文件大小为5000x5000x3字节=71.5MB, 其大小非常可观。
如果用zip或rar之类的通用算法来压缩像素数据，得到的压缩比例通常不会太高，因为这些压缩算法没有针对图像数据结构进行特殊处理。
jpeg
全称JointPhotographicExpertsGroup，
JEPG格式，也叫做JPG或JPE格式，是最常用的一种文件格式。实际测试.jpeg后缀文件更改为.jpg后缀依旧可读。
JPEG格式的压缩技术十分先进，能够将图像压缩在很小的储存空间，不过这种压缩是有损耗的，过度压缩会降低图片的质量。JPEG格式压缩的主要是高频信息，对色彩的信息保留较好，因此特别适合应用于互联网，可减少图像的传输和加载时间。
jpeg没有透明信息。jpeg比较适合用来存储相机拍出来的照片，这类图像用jpeg压缩后的体积比较小。其使用的具体算法核心是离散余弦变换、Huffman编码、算术编码等技术。
png
全称Portable Network Graphic Format。
png 最重要的特点是支持alpha 通道透明度，也就是说，PNG图片支持透明背景。一般来说彩色图像是24位3通道图像，png格式的图像就是4通道的。
png的设计目的是试图替代gif和tiff。png是一种支持无损压缩的图像格式（从LZ77派生的无损数据压缩算法），没有可调整的压缩质量设置（有损程度）。虽然PNG提供的压缩量比JPEG少，但PNG图片却比JPEG图片有更小的文档尺寸，因此现在越来越多的网络图像开始采用PNG格式。
jpeg比较适合存储色彩“杂乱”的拍摄图片，png比较适合存储几何特征强的图形类图片（颜色值少）。
gif
全称Graphics Interchange Format。
GIF也是一种压缩的图片格式，分为动态GIF和静态GIF两种。
GIF格式的最大特点是支持动态图片（多帧），并且支持透明背景。网络上绝大部分动图、表情包都是GIF格式的，相比与动画，GIF动态图片占用的存储空间小，加载速度快，因此非常流行。
psd
全称Photoshop Document。
PSD格式是Photoshop默认的存储格式，适用于存储源文档和工作文件，修改起来比较方便。
PSD格式的最大特点是可以保留透明度、图层、路径、通道等PS处理信息，但是需要专业的图形处理软件才能打开。PSD格式的缺点是体积庞大，十分占用存储空间。
tiff
全称Tagged Image File Format
，TIFF格式，也叫做或TIF格式，可以支持不同颜色模式、路径、透明度、以及通道，是打印文档中最常用的格式。Photoshop支持在TIFF文件中保存图层以及其他信息，在很多方面类似于PSD格式文件。
bmp
全称Bitmap。
BMP 格式是Windows操作系统中的标准图像文件格式，能够被多种Windows应用程序所支持。BMP格式包含的图像信息较丰富，几乎不进行压缩，但由此导致了它占用的存储空间很大，所以，目前BMP在单机上比较流行。
webp
google开发的一种有损、透明图片格式，相当于jpeg和png的合体，google声称其可以把图片大小减少40%。但是当前支持差，压得慢。
svg
全称Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。
图像的附加信息
Exif信息
Exif Exchangeable image file format可交换图像文件格式，是专门为数码相机的照片设定的，可以记录数码照片的属性信息和拍摄数据。如米6拍摄的照片，照片文件详情中附带有拍摄参数，便是exif信息。Exif可以附加于JPEG、TIFF、RIFF等文件之中，为其增加有关数码相机拍摄信息的内容和索引图或图像处理软件的版本信息。
所有的JPEG文件以字符串“0xFFD8”开头，并以字符串“0xFFD9”结束。文件头中有一系列“0xFF??”格式的字符串，称为“标识”，用来标记JPEG文件的信息段。“0xFFD8”表示图像信息开始，“0xFFD9”表示图像信息结束，这两个标识后面没有信息，而其它标识紧跟一些信息字符。0xFFE0 – 0xFFEF之间的标识符称为“应用标记”，没有被常规JPEG文件利用，Exif正是利用这些信息串记录拍摄信息如快门速度、光圈值等，甚至可以包括全球定位信息。
隐私数据思考
手机所拍的照片，在查看详情时可能看到地理位置信息，即拍摄地的经纬度坐标信息。通过经纬度坐标，利用百度的拾取坐标系统进行坐标反查，能够精准定位相片的拍摄地址。这里便思考到隐私数据的问题，如果拍摄的相片都附加这些地址信息，那是不是存在隐私泄露的问题。
于是我尝试将图片原图（包含地址信息）从手机QQ/微信传到电脑QQ/微信，图片另存为，查看图片详情（文件大小未变化），发现图像的拍摄参数及地址信息依旧能看到。进一步，我下载来自朋友圈和QQ动态的实拍图片（自己上传测试用的照片），并查看详细信息，拍摄参数以及地址信息均为空。
那么照片的exif信息是被脱敏了吗？还是我们的exif信息在特定的传输过程被丢弃（蓝牙传输文件exif信息仍存在）？当我们的原图上传到qq空间或朋友圈后，图片的存储位置在腾讯的数据中心，腾讯里的我们的照片已经不包含地址信息了吗？还是图片进一步有损压缩（提高网络传输效率）直接丢弃附属信息？
答案尚且确定不了。但知道一点，相机设置里可以关闭 保存地理位置信息 的选项。如此，原图没有位置信息，便不存在地址泄露的隐私问题了。
小结
大致整理一下，才发现枯燥的文字是真的多。收获就是大概知道web开发过程中为什么logo选择.svg或者.icon格式的矢量图，为什么一亿像素相机的相片用HEIF图片格式（米10高质量图片降低文件大小的解决方案），知道jpeg格式图片改动后保存会导致图片越来越小。
更重要的是知道这样一种观点：无论哪一种图片格式规范，其本质都是为了图像传输的高效或者图像的高质量，两者不可得兼。没得最完美的，适合你需求的就是最好的选择。
参考文献：
矢量图与位图的区别
知乎：既然矢量图放大缩小都不失真，为什么还要使用位图？
图片格式 jpg、png、gif各有什么优缺点？什么情况下用什么格式的图片呢？
几种常见图片格式的区别
像素深度与图像深度
二值图像、灰度图像、彩色图像
PNG图片压缩原理解析
