PS基本教学（三）——像素与分辨率的关系以及图片的格式

1 像素与分辨率的关系

1.1 像素

像素（Pixel）是数字图像的最小组成单元。像素是图像的最小单位，无法通过常规手段分割，图像里面的颜色通常用R、G、B（红、绿、蓝）三种颜色来表示，并且图像的清晰度是由分辨率来决定。

对于一张图片进行放大，当放大到一定的程度之后，会出现若干行和若干列的小格子，如下所示：

在上图中，每一个小格子都是一个像素。

1.2 分辨率

分辨率指图像或屏幕中像素的密集程度，通常用“像素数/长度单位”表示（如每英寸像素数PPI，或每厘米像素数）。PPI（Pixels Per Inch）表示每英寸长度内的像素数，决定打印或屏幕显示的精细度。

当1英寸只排列了1个像素，那么分辨率为1PPI，如下图所示：

当1英寸内排列了4个像素，那么分辨率为4PPI，如下图所示：

当1英寸内排列了16个像素，那么分辨率为16PPI，如下图所示：

当1英寸内排列了64个像素，那么分辨率为64PPI，如下图所示：

（上面几张图仅作演示，有不同程度的放大）。

每英寸有多少像素，就知道了单个像素的大小。当图片能在显示器上完全显示时，核心是像素与显示屏像素实现适配。

首先，图片像素尺寸（宽 × 高）需与显示屏物理分辨率（如 1920×1080）完全一致，或按原始比例缩放后不超出显示屏像素范围。比如显示屏是 2K（2560×1440），图片若为 1280×720（1080P 的一半），按 2 倍等比例放大后可刚好填满屏幕，且无拉伸变形；若图片是 3000×2000，超出 2K 屏幕像素，不裁剪的话就无法完整显示。其次，缩放过程必须保持像素比例一致（即宽高比相同）。若图片宽高比与显示屏不同，强行拉伸至全屏会导致像素变形，而保持比例则会在屏幕边缘出现黑边，但能保证图片内容完整。

2 图片的类型

图片按照格式和技术类型进行分类，可以分为位图、矢量图和其他类型的图片。其中位图由像素点组成，放大之后可能失真，常见的格式：JPG/JPEG图片、PNG图片、BMP图片、GIF图片等；矢量图包括SVG图、AI图。

下面对于几种图片进行详细介绍：

（1）JPG/JPEG

JPG 和 JPEG 本质上是同一种图像压缩格式的两种扩展名，均代表 Joint Photographic Experts Group（联合图像专家组）制定的标准。它们的区别仅在于文件扩展名的书写方式，核心功能、压缩算法和技术特性完全一致。它通过丢弃人眼不敏感的色彩细节来大幅减小文件体积，适合网页加载、社交媒体分享和打印材料。但缺点是多次编辑会降低质量，且不支持透明背景。

（2）PNG

PNG 是一种无损压缩的图片格式，支持透明背景（Alpha通道）和24/32位真彩色，能完美保留图像的清晰度和细节。它常用于网页设计中的图标、LOGO、截图或需要反复编辑的图形，避免JPG的有损压缩导致的模糊问题。但文件体积通常比JPG大，且不支持动画。

（3）BMP

BMP（Bitmap） 是一种无压缩的位图图像格式，由微软开发并广泛用于Windows系统，其核心特点是将图像以原始像素数据逐点存储，支持24位真彩色、32位色（含Alpha通道）及单色/16色等模式，确保图像质量零损耗，但文件体积极大（尤其高分辨率时），且缺乏现代格式的压缩优化与元数据支持，因此主要适用于需要绝对画质保留的场景，如图像编辑原始存档、系统图标或特定工业应用，但在网络传输和日常使用中因效率低而较少采用。

（4）GIF

GIF 是以简单动画和低色彩图形著称的图片格式，支持256色和单色透明背景。它通过多帧存储实现动态效果（如表情包、加载动画），且兼容所有浏览器和设备。但色彩限制导致照片类图像失真，动画文件体积可能较大。

（5）SVG

SVG（Scalable Vector Graphics，可缩放矢量图形） 是一种基于XML的矢量图像格式，通过数学方程描述图形（如线条、形状、路径和文本）而非像素点阵，因此具备无限缩放不失真、文件体积小、可编辑性强等特性，支持透明度、渐变、滤镜等交互效果，且能通过CSS或JavaScript动态修改，广泛用于网页图标、LOGO、数据可视化及响应式设计，但不适合存储复杂照片或连续色调图像。

（6）AI

AI（Adobe Illustrator）文件是Adobe公司开发的矢量图形格式，以数学路径描述图形，支持无限缩放不失真，保留完整的可编辑图层、颜色和透明效果，广泛用于标志设计、印刷出版、UI图标及插画创作，但需通过Illustrator软件编辑，适合高精度、多尺寸适配的专业设计场景。