图片格式是指计算机存储图片的格式，常见的存储的格式有BMP、JPEG、GIF、PNG、SVG等。我们常用到的网页图片格式一般分为2种：一种是位图，另一种是矢量图。下面我们分别细分这两种格式的特点与区别。
位图（Bitmap）概述
位图（也称点阵图或BMP）是由一个个称为像素的点组成的图像。这些像素通过不同的排列和颜色组合形成图案。放大位图时，会明显看到构成图像的方块（像素），线条和形状会出现锯齿感。从远处观看时，颜色和形状又显得连续。
Photoshop 是最常用的位图处理软件。
位图核心属性
1. 索引颜色（颜色表）
- 一种常见的压缩方式：从图像中选取最具代表性的颜色（通常≤256种）组成颜色表，用索引值替换原颜色。
- 优点：大幅有损压缩，文件体积小。
- 适用场景：颜色较少的网页图形、图标等。
- 不适用场景：照片等色彩丰富的图像。
2. Alpha通道
- 在RGB通道基础上增加透明度信息。
- 红、绿、蓝通道分别存储颜色，Alpha通道存储透明度。
- 大多数支持颜色表的位图格式都支持Alpha通道。
3. 色彩深度（位深）
色彩深度表示每个像素用多少位（bits）存储颜色信息：
- 1位：单色（2种颜色）
- 4位：16色
- 8位：256色（常用于索引颜色）
- 16位：65,536色（高彩色，人眼基本满足）
- 24位：约1677万色（真彩色，接近人眼分辨极限）
- 32位：实际颜色仍为1677万色，但额外8位用于Alpha透明度
注意：32位色并非2³²种颜色，而是24位颜色 + 8位透明度。
在制作网页图片时，通常优先选择24位图像。32位虽质量更好，但文件更大，且人眼难以分辨差异。位图缩放会造成失真，因此应尽量减少编辑次数。
4. 图像分辨率
- 分辨率决定图像细节量和清晰度。
- 分辨率越高，像素越多，图像越清晰，但文件体积越大。
- 与矢量图不同，位图输出质量高度依赖初始分辨率。
常见位图格式
| 格式 | 压缩类型 | 颜色深度 | 主要特点 | 优点 | 缺点 | 推荐场景 |
|---|---|---|---|---|---|---|
| BMP | 无压缩 | 1-24位 | Windows原生格式，与硬件无关 | 兼容性极好，支持多种颜色深度 | 文件极大，不支持压缩 | Windows壁纸、本地存储 |
| JPEG | 有损 | 24位真彩 | 最常见的照片格式，支持可调压缩比 | 文件小、支持真彩、下载快、浏览器全兼容 | 每次保存都会永久损失质量，不适合锐利边缘 | 照片、色彩丰富图像 |
| GIF | 无损(LZW) | ≤8位（256色） | 支持动画、单色透明 | 文件小、支持动画、解码快、浏览器全兼容 | 仅256色，不支持Alpha透明 | 动画、图标、简单图形 |
| PNG | 无损 | PNG-8: ≤256色 PNG-24/32: 真彩 |
支持Alpha透明，压缩率高 | 无损、高压缩、支持全透明 | 旧浏览器（IE6）支持差，不支持动画 | 网页设计、需要透明的图形 |
| WebP | 有损/无损 | 24位+Alpha | Google开发，体积更小 | 比JPEG/PNG小30-45%，支持透明和动画 | 兼容性有限（旧浏览器不支持），编码慢 | 现代网页、移动端 |
| APNG | 无损 | 真彩 | PNG的动画扩展 | 动画质量高，支持全透明 | 浏览器支持不完整 | 高质量动画（兼容性要求低） |
| BPG | 有损/无损 | 高达14位/通道 | 基于HEVC，压缩率极高 | 相同画质下体积最小，支持透明和动画 | 浏览器原生不支持，需JS解码 | 未来潜力格式 |
矢量图概述
矢量图使用数学方程描述点、线、多边形等几何图元，而不是像素。
优点
- 无限缩放、旋转不失真
- 文件体积小
- 与分辨率无关
缺点
- 不适合表现色彩层次丰富的逼真图像（如照片）
适用场景
图形设计、标志、文字、版式设计等。
常用软件：Illustrator、CorelDraw、CAD。
常见矢量格式
- AI：Adobe Illustrator 原生格式，分层可编辑
- CDR：CorelDraw 原生格式
- SVG：基于XML的开放标准，适合Web
- 支持缩放、动画、JavaScript交互、透明
- 浏览器支持良好（除极旧Android）
- 可被搜索、索引、CSS样式化
位图 vs 矢量图
| 特性 | 位图 | 矢量图 |
|---|---|---|
| 组成单位 | 像素 | 数学向量（点、线、多边形） |
| 缩放效果 | 放大失真、锯齿 | 无失真 |
| 文件大小 | 通常较大 | 通常较小 |
| 适用场景 | 照片、色彩丰富图像 | Logo、图标、插图、文字设计 |
| 分辨率依赖 | 强 | 无 |
Web网页图片优化技巧
基本原则
- 用最小的视觉牺牲换取最大的性能提升
- 照片/丰富色彩 → JPEG/WebP
- Logo/图标/透明/简单色彩 → PNG/SVG
- 动画 → GIF/APNG/WebP
JPEG使用建议
- 避免100%品质（体积大，收益低）
- 推荐80-95%品质
- 避免≤50%品质（失真严重）
前端优化方案
Base64内联
- 适合 <2KB 的小图片，且图片数量不多
- 减少HTTP请求
雪碧图（CSS Sprite）
- 将多个小图标合并成一张大图
- 减少请求数
用CSS/SVG/Canvas/Iconfont替代简单图片
- CSS：简单图形、渐变
- SVG：可缩放图标、复杂图形
- Canvas：动态图形、高性能绘制
- Iconfont：单色图标
响应式图片
- 根据设备分辨率/网络加载不同尺寸或格式
- 使用
<picture>元素或JS判断
- 使用新一代格式
- WebP、BPG 等在相同画质下体积更小
- 需要考虑浏览器兼容性（可降级为JPEG/PNG）
小结
网页图片优化核心思路：
- 静态资源：优先使用 CSS、SVG、Iconfont、雪碧图、Base64 替代或合并
- 内容图片：响应式加载 + 压缩 + 考虑WebP 等高效格式
上面提供了web图片的一些格式特点和图片优化的可行方案，具体的场景需要考虑选择不同的方式来进行优化。当然常见的优化思路为：页面静态资源图片使用css，canvas，svg，iconfont，sprite，base64来优化，后台返回的数据资源图片则通过响应式、图片压缩来优化，同时尽可能考虑使用新的更高压缩比的图片来做图片转化。例如webp、bpg。
