图片格式简史:从 BMP 到 WebP
每一种图片格式的诞生,都是为了解决一个问题。这是它们完整的故事。
每次打开一个网页,浏览器都会悄悄地与几十种不同的图片格式打交道——其中一些甚至比万维网本身还要古老。我们每天都在用它们,却从未想过它们从哪里来、是谁发明的、为什么会有这么多种。
答案其实很简单:每一种格式,都是对某个限制的直接回应——存储空间的上限、一场专利诉讼、企业之间的竞争,或者人们使用计算机方式的根本性转变。以下是从第一个位图到 2019 年最前沿格式的完整历史。
BMP(1986)——原始位图
是什么: BMP(Bitmap,位图)将图像存储为像素的原始网格,每个像素都记录了精确的颜色值。没有压缩,没有任何技巧。
为什么诞生: 1980 年代中期,微软正在开发 Windows。当时并不存在跨硬件显示图像的统一标准,每个程序都用自己的方式存储图像。微软需要一种 Windows 始终能够正确渲染的通用格式。
谁创造了它: 微软,作为 Windows 设备无关位图规范(Device Independent Bitmap)的一部分,随 Windows 1.0 于 1985 年引入,并在 Windows 3.x 时代正式确立。
它带来了什么: 统一性。BMP 为 Windows 提供了可靠的图形基础。代价是残酷的文件体积——一张 100 万像素的图片可能高达 3 MB,而当时软盘的容量只有 1.44 MB。BMP 是为桌面设计的,不适合传输。互联网的出现,呼唤着更好的解决方案。
GIF(1987)——意外诞生的图标
是什么: GIF(Graphics Interchange Format,图形交换格式)支持最多 256 种颜色、无损压缩、透明度和动画。一个 GIF 文件可以包含多帧按顺序播放的画面——就像一本小小的数字翻页书。
为什么诞生: CompuServe 是美国最早的大型在线服务商之一。他们需要一种方法,让用户能通过拨号连接分享图片,而不必等上好几分钟。他们需要压缩。
谁创造了它: CompuServe 的软件工程师 Steve Wilhite 于 1987 年开发了 GIF,采用了 Unisys 持有专利的 LZW 压缩算法。GIF 迅速在早期互联网上免费传播。
然而到了 1994 年,Unisys 开始执行其专利权并要求收取授权费。开发者社区的反弹几乎是即时的。正是这场专利纠纷,直接催生了 PNG 的诞生。
它带来了什么: GIF 成为早期 Web 的视觉语言——按钮、加载动画、装饰图案,以及后来那些在技术上早已落伍、却在文化上流传数十年的表情动图。动态 GIF 或许是有史以来文化生命力最强的图片格式。
(Steve Wilhite 至死都坚持 GIF 应该读作”JIF”。互联网对此强烈反对。)
TIFF(1986—1988)——专业人士的格式
是什么: TIFF(Tagged Image File Format,标签图像文件格式)是一种灵活的无损格式,能以最高保真度存储图像。它支持多种色深、嵌入式元数据、图层,以及在单个文件中存储多张图像。
为什么诞生: 1980 年代中期,桌面扫描仪开始普及,但每家厂商都用自己的专有格式保存图像。在一台机器上扫描的文档,在另一台机器上往往无法正常打开。出版行业迫切需要一个统一标准。
谁创造了它: 由 Aldus 公司、微软和扫描仪制造商共同开发。Aldus 的工程师 Ray Davis 主导了大部分技术工作。1994 年 Adobe 收购 Aldus 后,至今仍在维护这一规范。
它带来了什么: TIFF 成为——并且至今仍是——专业图像处理的黄金标准:印刷出版、医学影像、胶片扫描、档案摄影、政府文件。它从未为 Web 而设计,但在任何对质量要求极高的工作流程中,TIFF 已统治近 40 年。
JPEG(1992)——压缩革命
是什么: JPEG(Joint Photographic Experts Group)是一种针对照片的有损压缩格式。“有损”意味着部分图像数据会被永久丢弃——但 JPEG 经过精心设计,丢弃的恰恰是人眼最不容易察觉的那部分。
为什么诞生: 1980 年代末,数码摄影和扫描产生的文件对当时的存储和网络速度来说实在太大了。一张高分辨率照片可能就能占满整块硬盘。世界需要一种方法,在不影响视觉质量的前提下,将照片压缩到原始大小的一小部分。
谁创造了它: JPEG 标准由 ISO 和 IEC 下设的联合摄影专家组制定,IBM、AT&T 贝尔实验室等研究机构作出了重要贡献。于 1992 年正式发布。
它是如何工作的: JPEG 利用了人类视觉的局限性。人眼对亮度差异比对颜色差异更敏感。JPEG 以全分辨率存储亮度,但对颜色进行更激进的压缩。然后将图像划分为 8×8 像素的块,并应用离散余弦变换(DCT)来识别并丢弃最不易被察觉的细节。一张 24 MB 的 BMP 照片,经过典型压缩设置,可以变成一张几乎看不出质量损失的 2 MB JPEG。
它带来了什么: JPEG 让数码摄影变得实用。没有它,消费级数码相机、邮件附件照片、以及图片驱动的网站在 1990 年代根本不可能出现。时至今日,互联网上绝大多数照片仍然是 JPEG——距离标准发布已经超过 30 年。这是计算机历史上最经久不衰的技术标准之一。
PNG(1996)——专利战争的产物
是什么: PNG(Portable Network Graphics,便携式网络图形)是一种无损格式,支持全彩色、完整透明度(包括部分 Alpha 透明),以及像素级精确还原。与 JPEG 不同,它不丢弃任何数据。
为什么诞生: 1994 年的 GIF 专利危机在开发者社区引发了轩然大波。一群工程师决定自己动手,建立一个免费、开放、没有专利负担的替代品——在每个维度上都优于 GIF。号召的帖子于 1995 年 1 月发布在 Usenet 上,规范在几个月内就基本完成了。
谁创造了它: 由 Thomas Boutell 协调组织的社区共同努力,PNG 开发组邮件列表上的数十位工程师参与其中。规范于 1996 年正式发布,几乎立即成为 W3C 推荐标准。
它带来了什么: PNG 取代 GIF 成为静态 Web 图形的首选——徽标、图标、截图、UI 元素,一切需要像素精确度的场合。它支持数百万种颜色(而 GIF 只有 256 种)、真正的 Alpha 透明,且完全免费使用。
PNG 还贡献了计算机世界里最经典的递归笑话:官方全称是”Portable Network Graphics”(便携式网络图形),但开发者们还提出了一个非官方的递归缩写:PNG’s Not GIF(PNG 不是 GIF)。
SVG(1999)——用数学思考的格式
是什么: SVG(Scalable Vector Graphics,可缩放矢量图形)不存储像素,而是存储数学指令:在这里画一个圆,在这两点之间画一条曲线,用这个颜色填充。浏览器渲染 SVG 时,会根据这些指令实时计算像素——无论需要什么尺寸。
为什么诞生: 1990 年代末,Web 需要能在任意分辨率下保持清晰的交互图形和徽标。光栅格式放大后会模糊。当时存在几种竞争性提案,W3C 决定将其中一种统一为开放的矢量格式标准。
谁创造了它: W3C SVG 工作组,Adobe 的 Jon Ferraiolo 和 IBM 的 Kelvin Lawrence 提出了早期提案。1.0 版于 2001 年成为 W3C 推荐标准。
它带来了什么: SVG 改变了 Web 设计的面貌。每一个在手机屏幕和 4K 显示器上都保持清晰的徽标,很可能都是 SVG。每一张交互式数据可视化图表和动画图标,大概率也是 SVG。它让分辨率无关的设计成为可能——这一能力在 2010 年高 DPI 显示器普及后变得至关重要。
WebP(2010)——谷歌的效率博弈
是什么: WebP 同时支持有损和无损压缩、完整透明度以及动画——将 JPEG、PNG 和 GIF 的最佳特性融合在一种格式中,在相近视觉质量下始终产生更小的文件。
为什么诞生: 到 2010 年,图片占据了普通网页传输数据量的 60% 以上。JPEG 服役了 18 年,但它建立在 1980 年代的数学基础上。谷歌相信现代压缩算法可以做得更好,而且以其业务规模,即便是微小的改进也价值巨大。
谁创造了它: 谷歌,基于通过 2010 年收购 On2 Technologies 获得的 VP8 视频编解码器。核心洞察是:将已远超传统图像压缩水平的视频压缩技术,应用到静态图像上。2010 年 9 月发布。
它带来了什么: WebP 照片文件通常比 JPEG 小 25—34%,带透明度的图形比 PNG 小 26%。浏览器支持进展缓慢——Safari 直到 2020 年才完全支持——但如今 WebP 已获所有主流浏览器支持,成为 Web 图像的推荐格式。它证明了旧格式不再是最优解,并为下一代格式打开了大门。
HEIF / HEIC(2015)——苹果对未来的押注
是什么: HEIF(High Efficiency Image File Format,高效图像文件格式),苹果基于 HEVC 编解码器实现的版本称为 HEIC。它支持有损和无损模式、透明度以及图像序列。HEIF 图像的文件大小通常是同等质量 JPEG 的一半。
为什么诞生: 相机硬件的发展速度远超存储效率的提升。iPhone 7 Plus 能拍摄 1200 万像素照片和 4K 视频。苹果需要一种格式,能在大幅缩小空间的同时保留画质。
谁创造了它: HEIF 由 MPEG(ISO/IEC)于 2015 年基于 HEVC 压缩标准制定。苹果于 2017 年随 iOS 11 将其设为 iPhone 默认照片格式。
它带来了什么: 为 iPhone 用户带来了立竿见影的显著存储节省——且不损失任何可见画质。麻烦出现在 HEIC 文件离开苹果生态系统之后:Windows 和大多数 Web 平台在没有转换的情况下无法原生打开它们。HEIF 生动呈现了贯穿图片格式发展史的那个反复出现的矛盾:技术卓越与生态兼容之间的张力。
AVIF(2019)——开源挑战者
是什么: AVIF(AV1 Image File Format)是一种基于 AV1 视频编解码器的免版税现代格式,提供卓越的压缩率、HDR 支持、宽色域,性能通常优于 JPEG 和 WebP。
为什么诞生: WebP 虽然优于 JPEG,但基于 2008 年的 VP8 编解码器。HEIF 技术上更出色,但受制于高昂的授权费用。开放媒体联盟开发 AV1 作为免版税替代方案,AVIF 则将其扩展到静态图像领域。
谁创造了它: 开放媒体联盟(Alliance for Open Media)——一个包括谷歌、Mozilla、微软、苹果、亚马逊、Netflix 和英特尔在内的联合体。规范于 2019 年最终确立。
它带来了什么: AVIF 文件在同等质量下通常比 JPEG 小 50%,比 WebP 小 20%。Netflix 在大规模场景下将其用于缩略图。所有主流浏览器现已支持。主要挑战在于编码速度——生成一个 AVIF 文件所需的计算量远超 JPEG 或 WebP,这在实时应用场景中仍是制约因素。
今天该用哪种格式?
| 使用场景 | 推荐格式 | 原因 |
|---|---|---|
| 网页照片 | WebP(备选:JPEG) | 质量、体积与兼容性的最佳平衡 |
| 徽标、图标、UI | SVG(备选:PNG) | 分辨率无关 |
| 截图、像素级精确 | PNG | 无损,无压缩失真 |
| 专业摄影 | TIFF 或 JPEG | 行业标准 |
| iPhone 照片 | HEIC | iOS 默认格式,画质优秀 |
| 追求极致 Web 性能 | AVIF | 最佳压缩率,支持持续扩大 |
| 动画 | WebP 或 GIF | 追求兼容用 GIF,追求现代用 WebP |
格式之间如何互相转换
知道该用哪种格式是一回事,真正完成转换又是另一回事。以下是针对最常见转换场景的实用指南——涵盖浏览器工具和命令行两种方式。
JPG / PNG → WebP
WebP 是对 Web 开发者而言最有价值的转换方向。从 JPEG 或 PNG 切换到 WebP,通常可以在视觉质量不变的情况下减少 25—34% 的文件大小。
浏览器工具(无需安装):
- pngtowebp.info — 完全在浏览器中完成 PNG 和 JPG 到 WebP 的转换,文件不会上传到任何服务器。
- Squoosh — 谷歌的开源图像压缩工具,支持 WebP、AVIF 等多种格式,可实时对比压缩效果。
命令行:
# 安装:brew install webp(macOS)或 apt install webp(Linux)
# 转换单个文件
cwebp input.jpg -o output.webp
# 控制质量(0–100,默认 75)
cwebp -q 80 input.png -o output.webp
# 批量转换文件夹内所有 JPG
for f in *.jpg; do cwebp "$f" -o "${f%.jpg}.webp"; done
JPG → PNG
JPEG 是有损的,PNG 是无损的。当你需要清晰的边缘、透明背景或像素级精确度时——例如截图、徽标或 UI 素材——就需要做这个转换。
浏览器工具:
- jpg2png.com — 快速直接的 JPG 转 PNG,无需注册。
- Squoosh — 选择 PNG 作为输出格式即可。
命令行:
# ImageMagick(brew install imagemagick)
magick input.jpg output.png
# ffmpeg
ffmpeg -i input.jpg output.png
注意: JPG 转 PNG 并不能恢复已损失的画质。JPEG 压缩是不可逆的——你得到的只是一份有损原图的无损副本。
任意格式 → AVIF
AVIF 提供了目前最好的压缩效果,但编码较慢。对于大型图像库或高流量网站而言,值得投入。
浏览器工具:
- Squoosh — 选择 AVIF 作为输出,可实时调整质量并查看文件大小。
命令行:
# avifenc — 参考编码器(brew install libavif)
avifenc --min 20 --max 40 input.jpg output.avif
# ImageMagick
magick input.jpg output.avif
# ffmpeg
ffmpeg -i input.jpg output.avif
HEIC → JPG / PNG
iPhone 拍摄的 HEIC 文件在 Windows 上往往无法打开,也难以在 Web 上分享。转换为 JPEG 是最实用的解决方案。
macOS(内置方法): 在”预览”中打开 → 文件 → 导出 → 选择 JPEG 或 PNG。
命令行:
# ImageMagick(需要 libheif:brew install libheif imagemagick)
magick input.heic output.jpg
# ffmpeg
ffmpeg -i input.heic output.jpg
SVG ↔ 栅格图(PNG / JPG)
矢量格式与栅格格式之间的转换是个特殊情况。SVG 转 PNG 很直接;PNG 转 SVG(矢量化)则是一个完全不同的问题,需要图形追踪算法。
SVG → PNG:
# 使用 Inkscape
inkscape input.svg --export-png=output.png --export-dpi=300
# 使用 ImageMagick
magick -density 300 input.svg output.png
PNG → SVG(矢量化):
- Vector Magic — 最高质量的自动追踪,付费服务。
- SVGcode — 免费,基于浏览器,使用浏览器内置的追踪 API。
快速参考:格式转换工具一览
| 转换方向 | 浏览器工具 | 命令行 |
|---|---|---|
| JPG / PNG → WebP | pngtowebp.info · Squoosh | cwebp |
| JPG → PNG | jpg2png.com · Squoosh | magick · ffmpeg |
| 任意格式 → AVIF | Squoosh | avifenc · magick |
| HEIC → JPG | 预览(macOS) | magick · ffmpeg |
| SVG → PNG | SVGcode | inkscape · magick |
| PNG → SVG | Vector Magic · SVGcode | — |
图片格式的历史,说到底是一部关于限制的历史——存储空间的上限、带宽成本、硬件能力、专利诉讼、企业竞争。每一个限制催生了一项新发明,每一项发明又创造了新的可能。
故事还没有结束。随着显示器性能不断提升,AI 以前所未有的规模生成图像,带宽瓶颈从桌面转向移动端再转向 AR,新的格式还会出现。
下一章尚未写就。但它大概率会从某个人对我们今天正在使用的格式感到不满开始。
如果你在 Web 上处理图像,不妨试试 pngtowebp.info ——一个免费的纯浏览器端工具,可将 PNG 和 JPG 转换为 WebP,文件不会离开你的设备。