3.4 图像格式

我们在开发中会用到各种格式的图像，不同的图像格式有不同的特点和适用场景。选择合适的图像格式能够在保证画质的前提下最小化文件大小，提升页面加载速度。

位图 vs 矢量图

首先要区分两大类图像格式：位图和矢量图。

位图（Bitmap / Raster Image）

由像素点阵组成，每个像素有自己的颜色信息
缩放会失真，放大后会看到锯齿
适合存储照片、复杂图像
常见格式：JPEG、PNG、GIF、WebP、AVIF等

矢量图（Vector Image）

由数学公式描述的点、线、曲线、形状组成
无限缩放不失真，边缘始终平滑
文件大小和图像复杂度相关，和尺寸无关
适合存储图标、Logo、插图等简单图形
常见格式：SVG、AI、EPS等

选择建议：

照片、复杂插画：用位图格式
图标、Logo、可缩放图形：用矢量图格式（SVG）

常见位图格式详解

1. JPEG / JPG

全称：Joint Photographic Experts Group
特点：有损压缩，不支持透明度，支持24位真彩色
压缩原理：利用人眼对亮度信息敏感，对色度信息不敏感的特点，丢弃部分高频信息减少文件大小
压缩比：可调，通常10:1到20:1的压缩率肉眼看不出明显损失
优点：文件小，加载快，兼容性极好
缺点：有损压缩，有质量损失，不支持透明度，不适合保存线条、文字等边缘锐利的图像，多次编辑保存会导致质量越来越差
适用场景：照片、复杂图像、不需要透明度的场景，是网页中使用最广泛的图像格式之一

2. PNG

全称：Portable Network Graphics
特点：无损压缩，支持透明度（Alpha通道），支持8位/24位/32位色深
压缩原理：使用DEFLATE无损压缩算法，不会损失画质
PNG有两种主要类型：
- PNG-8：8位索引色，最多256色，支持1位透明度，文件小，适合简单图形
- PNG-24/32：24位真彩色+8位Alpha通道，支持半透明，画质好但文件大
优点：无损压缩，画质好，支持完整的透明度，无压缩损失，适合多次编辑
缺点：文件体积比JPEG大很多，不适合存储照片
适用场景：图标、Logo、带有透明度的图像、需要清晰边缘的文字和线条图形

3. GIF

全称：Graphics Interchange Format
特点：无损压缩，最多256色，支持1位透明度，支持动画
压缩原理：LZW无损压缩
优点：支持动画，文件小，兼容性好
缺点：色彩少，只有256色，不支持半透明，画质差
适用场景：简单动画、表情图，其他场景已经基本被PNG和视频取代

4. WebP

开发公司：Google
特点：同时支持有损和无损压缩，支持透明度，支持动画
压缩率：
- 无损WebP比PNG小26%左右
- 有损WebP比JPEG小25-35%左右
- 动画WebP比GIF小64%左右
优点：压缩率高，画质好，功能全面，支持所有常用特性
缺点：兼容性比JPEG/PNG差一些，但现在所有现代浏览器都已经支持，旧版IE不支持
适用场景：几乎所有场景都适用，是JPEG和PNG的优秀替代者，能显著减少文件大小

5. AVIF

全称：AV1 Image File Format
开发组织：开放媒体联盟（AOMedia）
特点：基于AV1视频编码的新一代图像格式，支持有损/无损压缩，支持透明度，支持动画
压缩率：比WebP还要小20%左右，比JPEG小50%左右，是目前压缩率最高的图像格式
优点：压缩率极高，画质好，支持HDR、广色域
缺点：兼容性目前比WebP差，旧浏览器不支持，编码速度慢
适用场景：未来的主流图像格式，现在可以渐进式使用，作为WebP的替代

6. BMP

全称：Bitmap
特点：无压缩，原始像素数据
优点：画质无损，结构简单，容易解析
缺点：文件极大，没有压缩
适用场景：基本不用，只在一些特殊的Windows程序中使用

7. TIFF

全称：Tagged Image File Format
特点：支持无损压缩，支持多种色深，专业图像格式
优点：画质极高，支持图层、Alpha通道等专业特性
缺点：文件大，不适合网页使用
适用场景：专业印刷、摄影、图像处理领域

矢量图格式：SVG

全称：Scalable Vector Graphics
特点：基于XML的矢量图像格式，用文本描述图形
优点：
- 无限缩放不失真
- 文件小，适合简单图形
- 文本格式，可以用CSS和JavaScript控制样式和动画
- 无损压缩，编辑方便
缺点：
- 不适合存储复杂图像，比如照片，文件会比位图大很多
- 渲染性能比位图差
适用场景：图标、Logo、插图、简单动画、需要适配不同分辨率的图形

图像格式选择指南

场景	首选格式	次选格式	不建议格式
普通照片、商品图	WebP/AVIF	JPEG	PNG/GIF
透明背景图标、Logo	WebP/AVIF	PNG	JPEG
简单动图、表情	WebP/AVIF	GIF	-
图标、矢量图形	SVG	PNG	JPEG
需要编辑的源文件	PNG/TIFF	-	JPEG（多次编辑损失画质）

图像压缩原理与优化技巧

图像压缩的本质

图像压缩的本质是利用图像中的冗余信息，通过算法去除冗余，减少文件大小：

空间冗余：相邻像素的颜色通常相似，存在大量重复信息
视觉冗余：人眼对某些信息不敏感，可以丢弃这些信息而不影响主观画质
编码冗余：可以用更短的编码表示出现频率高的信息

有损压缩 vs 无损压缩

无损压缩：解压后的数据和原始数据完全一致，没有任何损失，适合需要多次编辑的源文件
有损压缩：丢弃部分人眼不敏感的信息，换取更高的压缩率，适合最终发布的图像

图像优化最佳实践

1. 选择最合适的格式

优先使用现代格式WebP/AVIF，能显著减少文件大小，同时设置fallback到JPEG/PNG兼容旧浏览器：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述">
</picture>