2021-04-13

图片在不同环境下大小受哪些因素影响

Q 

1、位图和矢量图分别是什么，它们的区别是什么？

2、用磁盘空间大小=占用内存大小  ？

3、RGB和CMYK分别是什么，它们的区别是什么？

 

一、位图和矢量图的基本概念

位图

概念：位图是以像素点为基础，用点的方式来记录图形中所有使用的颜色色码，这些点可以进行不同的排列和染色以构成图样，像拼图一样组成整张图像。

特点：

1：位图的特点是可以真实呈现图像的原貌以及色彩上的细微差异。可以表现色彩的变化和颜色的细微过渡，产生逼真的效果。

 

2：缺点是：在保存时需要记录每一个像素的位置和颜色值，占用较大的存储空间。

而且放大后，就会看见赖以构成整个图像的无数单个方块，产生如马赛克色块状的锯齿边缘。扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。

使用场景：

人物、风景、产品等这类需要表示真实图片的地方，因为”像素”可以真实地记录下所有的真实图像信息；

用数码相机拍摄的照片、扫描仪扫描的图片以及计算机截屏图等都属于位图。常用的位图处理软件有Photoshop（同时也包含矢量功能）、Painter和Windows系统自带的画图工具等，Adobe Illustrator则是矢量图软件。

成像影响因素：与分辨率有关。

_________________________________

矢量图

概念：矢量图（也称为面向对象的图像或绘图图像），是以数学概念为基础，在数学上定义为一系列由点连接的线，类似于“两点成一线”的原理。这两点可以是很大很小，所形成的直线都是根据两点的距离计算得到的，因此不会涉及到分辨率的问题，自然也不会产生“放大后失真，产生锯齿形状”的问题，矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

特点：

矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。

缺点：难以表现色彩层次丰富的逼真图像效果。不易制作色调丰富或色彩变化太多的图像,而且绘制出来的图形不是很逼真,无法像照片一样精确地描述自然界的景观,同时也不易在不同的条件间交换文件。

使用场景：

矢量图 适合卡通、线条画等表现抽象意念的东西，因为矢量图在色彩上的表现不如位图细腻（尤其是渐变色上)，无法完整记录图像的信息，只能用线条模拟出类似的效果。

因此矢量图会给人一种仿真的效果，不易产生像照片拍摄出的真实细腻感，但缺失讲究精准的设计图的最好选择，精准抽象的场景，比如地图，游戏等。

_____________________________________

关于矢量图，主要讲一下SVG：

• SVG 可被非常多的工具读取和修改（比如记事本）
• SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
• SVG 是可伸缩的，放大缩小都很清晰
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
• SVG 可以与 Java 技术一起运行
• SVG 文件是纯粹的 XML

---

▶ SVG有什么缺点？

• 兼容不了4.0以下的版本。低版本anr或者崩溃。
• SVG图是不支持硬件加速的（所以它不能用来做图片的占位图和错误图）；

附：代码中使用svg的例子

进行dark模式适配、进行多个主题的适配

 

附Android使用方法：

xml中：

 

Java代码中：

 

代码中已经封装好，直接使用

DayNightResCompat.getDrawableWithTin

传入svg和颜色，就可以生成Drawable资源来使用。

 

二、图片在磁盘中的存储

矢量图：

图像中保存的是线条和图块的信息，所以矢量图形文件与分辨率和图像大小无关，只与图像的复杂程度有关，相比位图而言，图像文件所占的存储空间较小。

位图：

最基本的组成单位是像素，计算机必须精确存储每个组成位图的象素的位置，颜色等信息。
位图是由不同亮度和颜色的像素所组成，存储的时候会经过图片压缩算法进行压缩，然后用不同的图片文件格式保存，常见的有JPEG、PCX、BMP、PSD、PIC、GIF和TIFF等。

 

因此一般情况下，图片占用磁盘空间大小都要小于图片占用内存大小。就像一张充气凳子，不用的时候放气折叠起来放着，使用的时候充气恢复原来的样子。

存储在磁盘上的是编码过的，所以这个大小是不定的，取决于不同格式的压缩比。

图片压缩算法如下：

 

 

以JPEG与PNG为例：

png采用无损压缩，压缩比相对于jpg要小，所以存储的时候图片一般比jpeg要大，但是多次压缩图片不会失真。

而jpg采用有损压缩，多次压缩图片质量会明显下降，但是压缩比较大，所以压缩后的图片较小。

 

而最终图片绘制时需要解码成bitmap，而bitmap的大小只和图片的分辨率与像素的表示方法有关。

 

三、图片在内存中的加载显示

图片内存大小和图片文件占用空间大小是没有必然关系，但是一般来说图片文件大小，图片内存大小就越大。占用空间是在磁盘上占用的空间，内存大小是加载到内存中占用的内存大小。

图片文件在外存的实际大小没法确定，跟图片格式和压缩率有关

图片占用内存的大小 = 宽*高*单个像素占用的字节数

在内存中的Bitmap大小是可以确定的，RGB每个像素3个字节，不含alpha信息的话

现在假如有一个图片是600*800的，文件大小100KB。

图片内存大小的计算公式是 ：图片高度 * 图片宽度 * 一个像素占用的字节数

也就是 600 * 800 * 4 byte = 1875KB = 1.83M

而一个像素占用的字节数与图片的编码格式（或者叫bitmap在内存中的存储形式）有关

 

四、颜色模式以及像素

CMYK模式（C：Cyan = 青色，又称为‘天蓝色’或是‘湛蓝’,M：Magenta = 品红色，又称为‘洋红色’；Y：Yellow = 黄色；K：blacK=黑色）：共计四种颜色混合叠加，形成所谓“全彩印刷”，常用于彩色喷墨打印机

RGB颜色模式：（红：Red  绿Green  蓝 Blue）以“加色法”，将三原色混合出不同的颜色。如（r255,g255,b255）为白色

他们之前的区别如下：

1.两者在性质上不同:RGB是显示器显示的颜色，而且CMYK是印刷用的颜色。如果用显示器来进行预览CMYK会变色的。

2.两者在针对的媒介上不同:RGB最主要是显示器所呈现出来的最佳的颜色，显示器用CMYK模式来显示会存在偏差问题；用RGB进行打印的话颜色也会存在着偏差。

3.两者在含义上不同:RGB模式是以色光三原色为基础建立的色彩模式。RGB图像只使用三种颜色，当不等量的三种色光进行叠加混合时，即会在屏幕上重现自然界各种各样的颜色。

咱们工作中主要使用RGB的颜色模式，重点介绍下RGB的颜色模式，RGB的色彩格式主要由ARGB构成，其中

A：透明度

R：红色

G：绿

B：蓝

（1）RGBA8888(32-bit) RGBA 4个通道各占8位，如果想获得最好的图片质量，使用这种格式最靠谱，但他占用的内存会比16位的纹理多一倍，加载速度相对较慢。

（2）RGBA4444(16-bit) RGBA 4个通道各占4位，他对每个通道都有不错的支持，还能保证相对良好的图片质量，以及加载速度和内存占用。

（3）RGB5A1 (16-bit) RGB 3个通道各占5位，A通道仅占一位，RGB通道表现良好，A通道只有透明和不透明两种，加载速度和内存占用表现良好。

（4）RGB565 (16-bit) RGB 3个通道分别占5、6、5位，没有A通道，在16为纹理中，图片质量最好。

自然是位数越多显示的效果越好。

一般情况下我们都是使用的ARGB_8888，由此可知它是最占内存的，因为一个像素占32位，8位=1字节，所以一个像素占4字节的内存。假设有一张480x800的图片，如果格式为ARGB_8888，那么将会占用1500KB的内存。

五、附：10种常见的图片文件格式以及使用场景

01 JPEG

• 用途：相机拍摄照片，网络图片等。经常被用作图片处理的最终输出格式。
• 优势：用途广泛，受到几乎所有平台和系统的支持。支持应用不同级别的压缩。压缩后的文件尺寸较小，适合携带和发送。
• 劣势：有损压缩，会随着重新存储次数增多而降低质量。不支持图层。不支持透明度。

JPEG是最常见的图片格式，使用非常广泛。几乎所有的数码相机和网络环境都支持JPEG。JPEG能使用有损压缩的方式，去除图片中不需要的像素并减少图片尺寸。

JPEG和JPG是相同的格式，在早期版本的Windows中不支持三位以上的拓展名，因此有了JPG。JPEG 2000是升级后的格式，但非常少用。

02 TIFF

• 用途：高品质图像，常被平面设计师用于出版印刷。也可以用于编辑和存储图像。
• 优势：无损压缩。支持多页面和多图层。软件基本支持。支持透明度。
• 劣势：图片尺寸很大，大于JPEG甚至大于RAW文件。只有专业软件支持多页面功能。

TIFF是无损图像格式，默认设置下在压缩时不会损失信息，但也支持开启有损压缩设置。它支持存储带有图层、透明度等内容的高品质图像，因此尺寸较大。

03 PNG

• 用途：在网络上最常用，对显示器有优化（相对于印刷来说）。
• 优势：支持比GIF更多的颜色。无损压缩。支持透明度。
• 劣势：尺寸通常比JPEG大，而且仅支持RGB色彩空间。

PNG原本是被设计用于替代GIF的。PNG是无损压缩格式，因此适合存储照片和文本。

04 GIF

• 用途：网络图片，尤其是动图。
• 优势：加载迅速，支持动画，无损压缩，尺寸较小，支持透明度。
• 劣势：最大仅支持256色，不支持CMYK。

GIF是早期互联网的产物，能被压缩到非常小的尺寸。静态GIF图片已经基本被JPEG取代了。

05 PSD

• 用途：用于Photoshop的相关项目，用于印刷和照片编辑。如今很多打印机开始支持PSD。
• 优势：支持透明度。能保存Photoshop的编辑结果。可以组合使用像素图和矢量图。
• 劣势：不能用于网络图片，并且尺寸容易变得很大。

PSD是Photoshop的专用格式，这意味着它能最大程度地保存Photoshop编辑的内容。

06 RAW

• 用途：专业摄影，尤其在照片需要后期编辑的时候。
• 优势：可以尽可能保留照片信息，适用于后期编辑。
• 劣势：尺寸非常大，很容易填满存储卡。并不被所有照片编辑器支持，大多打印机不支持。

RAW格式是现代相机使用的存储格式，相机捕捉的数据不会被压缩也不会被处理，让信息最大程度地保留下来。不同的相机品牌支持的RAW格式不同，后缀可能是CR2、NEF、DNG等。

07 EPS

• 用途：用于保存矢量图，如插画、Logo和图标。
• 优势：支持任何尺寸的图像。有大量软件支持查看。可以轻松地被转换为像素图。
• 劣势：用于编辑的软件有限，打印机支持性交叉。有些EPS文件内部是像素图，只是被伪装成了矢量图。

EPS是矢量图通用文件，大多数矢量编辑软件都支持EPS。EPS格式文件也可以包含像素图。

08 SVG

• 用途：用于网络矢量图，以及导入3D软件。
• 优势：支持矢量内容，也支持文本和像素图，可以添加动画（通过外部代码交互）。放大缩小不会模糊。尺寸较小。可直接作为代码放在HTML里。可以被搜索引擎检索。
• 劣势：支持的颜色深度有限。不适合用作印刷。

SVG基于XML格式，适合将矢量图用于网络发布。同时，SVG也非常适合用于导出2D路径到3D软件中。

09 PDF

• 用途：存储文档，用于打印。
• 优势：可以同时存储像素图、矢量图和文本。很多软件可以输出PDF，支持多页。
• 劣势：限制用于Windows和Mac OS，很难编辑。

PDF格式是封装文档用于印刷的通用标准之一。

10 BMP

• 用途：基本已经过时。
• 优势：无压缩，大多数系统都支持。
• 劣势：相对来说文件尺寸大，不支持CMYK。

BMP是古老的像素图格式，由微软开发。如今它已经很少使用。