126 lines
5.4 KiB
Markdown
126 lines
5.4 KiB
Markdown
---
|
||
title: 4.2 图片的存储原理和格式转换
|
||
---
|
||
|
||
这一节的内容非常枯燥乏味，但是对于理解图片如何在计算机中存在非常有帮助。理解这一块内容后你对图片的理解将会达到一个全新的高度，从而你对使用和修改各种图片将会变得得心应手。
|
||
|
||
## 图片的基本属性
|
||
|
||
### 位图和矢量图
|
||
位图直接存储图像的**像素信息**，即“在什么位置应该是什么颜色”。以这种方式存储的图片放大以后就会变糊，但在分辨率和位深度足够的情况下可以存储极为复杂的图像。
|
||
矢量图不直接存储图像的像素信息，而是使用**数学公式**存储图像的路径和颜色信息。这样存储的图片可以无限放大而不用担心会模糊，但能够存储的图片较为简单，不适用于存储复杂的图像。
|
||
|
||
### 分辨率
|
||
放大一张位图，我们能够在画面中看到**像素点**，这些像素点就是用来存储图片信息的基本单位。
|
||
一张图片的分辨率描述的就是一张位图在横向和纵向各有多少个像素点。分辨率越高的位图，能够存储的信息也就越多，我们看起来这张图片就会越清晰。
|
||
|
||
::: tip 分辨率的计算
|
||
图片横向像素乘以图片竖向像素即为图片的分辨率。
|
||
一张1920x1080的图片，它的分辨率为2073600像素。
|
||
:::
|
||
|
||
### 位深度（位深）
|
||
在位图中，每个像素点都能存储不同的颜色。我们用位深度来描述单个像素能够存储的颜色种数。
|
||
16位（16bit）即每个像素点能够存储2<sup>16</sup>种颜色。
|
||
|
||
---
|
||
|
||
## 颜色模式
|
||
|
||
### RGB 颜色模式
|
||
R（Red=红色）、G（Green=绿色）、B（Blue=蓝色）。使用不同亮度的红色、绿色、蓝色三种光进行混合可以得到各种不同的颜色。
|
||
RGB 主要用于屏幕显示中，其中三种光的亮度数值范围为（0-255），混合后可得到$2^24=16777216$种颜色。
|
||
|
||
- 当RGB三种光的强度均为0时，混合出的颜色为**黑色**。
|
||
- 当RGB三种光的强度均为255时，混合出的颜色为**白色**。
|
||
|
||
### CMYK 颜色模式
|
||
C（Cyan=青）、M（Magenta=品）、Y（Yellow=黄）、K（Black=黑）。使用色料三原色的混合原理，再加上黑色油墨一共四种颜色就可以进行全彩印刷。CMYK 主要用于彩色印刷中，其中四种颜料的数值范围为（0-100）。
|
||
|
||
- 当CMYK四种颜料的数值均为0时，混合出的颜色为**白色**。
|
||
- 当CMYK四种颜色的数值均为100时，混合出的颜色为**黑色**。
|
||
|
||
### HSL 色彩模式
|
||
H（Hue=色相）、S（Saturation=饱和度）、L（Lightness=亮度）。其中三种参数的范围为（0-100%）。
|
||
> 色相调整颜色在色环中的位置，或者可以说是调整颜色的种类
|
||
|
||
---
|
||
|
||
## 图片格式
|
||
|
||
### 位图
|
||
#### PNG（后缀名：png）
|
||
一种位图格式，全称**便携网络图片（Portable Network Graphics）**
|
||
|
||
优点：
|
||
- 使用**无损**压缩算法，对图片质量没有任何影响
|
||
- 支持 **Alpha** 透明度通道
|
||
|
||
> 将一张采用**有损压缩算法**的格式的图片转换到采用**无损压缩算法**的格式无法改变这张图片已经损失一定质量的事实
|
||
|
||
#### JPEG（后缀名：jpg）
|
||
一种位图格式，全称 **Joint Photographic Experts Group**。
|
||
|
||
优点：
|
||
- 压缩率极高，相比 BMP 文件格式，平均可以减少20倍的文件体积
|
||
|
||
缺点：
|
||
- 采用有损压缩算法，对图片质量会产生不可逆的影响
|
||
- 不支持 **Alpha** 透明度通道
|
||
|
||
#### Webp（后缀名：webp）
|
||
Webp 同时支持有损和无损两种模式，且图片的体积较 JPEG 和 PNG 格式更小
|
||
|
||
优点：
|
||
- 支持有损 + **Alpha** 透明通道的图片
|
||
|
||
缺点：
|
||
- windwos11 系统自带的**图片**工具无法查看 webp 格式的文件
|
||
- **InDesign 无法导入 webp 格式的文件**。
|
||
|
||
#### PSD（后缀名：psd）
|
||
大名鼎鼎的图片编辑软件 Adobe Photoshop 的源文件，**可以直接导入 InDesign 中使用**。
|
||
|
||
优点：
|
||
- 具有任何图片格式的特性
|
||
- 可以在 Photoshop 中编辑并直接导入 InDesign 使用。并且当 psd 文件更新时，InDesign 中的内容也会同步更新
|
||
|
||
#### BMP（后缀名：bmp）
|
||
一种位图格式，全称 **Bitmap 位图**。
|
||
微软为操作系统 windows 3.0 研发的图片格式，并由*画图*软件率先支持
|
||
|
||
缺点：
|
||
- 不支持压缩，存储的文件极其大
|
||
|
||
---
|
||
|
||
### 矢量图
|
||
|
||
#### SVG（后缀名：svg）
|
||
使用记录**顶点坐标**的方式来表示各种几何形状，并记录这些几何形状的颜色。只能用于表达几何形状，无法表达复杂的色彩信息。
|
||
优点：
|
||
- 分辨率无限大
|
||
- 文件极小
|
||
|
||
#### AI
|
||
矢量图编辑软件 Adobe illustrator 的源文件
|
||
|
||
#### CDR
|
||
矢量图编辑软件 Corel DRAW 的源文件
|
||
|
||
---
|
||
|
||
## 图片格式转换
|
||
我们可以使用各种格式转换工具对图片格式进行转换。
|
||
|
||
::: info 常见的格式转换工具
|
||
- [格式工厂](http://formatfactory.org/CN/download.html)：免费多功能的多媒体文件转换工具
|
||
- [File Converter](https://file-converter.org/index.html)：File Converter 是一个非常简单的工具，它允许你使用 windows 资源管理器的右键菜单转换和压缩一个或多个文件
|
||
:::
|
||
|
||
对图像文件进行格式转换应遵循以下原则：
|
||
- 对于后续需要修改的图片，不可转换为采用有损压缩[^1]的图片格式
|
||
- 需要尽可能保留修改空间的图片采用 ``psd``（推荐）``png`` 或 ``TIFF`` 格式
|
||
|
||
[^1]: 例如 ``jepg``
|